弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。 试用场景:弹性布局适合于移动前端开发,在Android和ios上也完美支持。 11 用纯CSS创建一个三角形的原理是什么?...第一种真正的品字: 三块高宽是确定的; 上面那块用margin: 0 auto;居中; 下面两块用float或者inline-block不换行; 用margin调整位置使他们居中。...:hidden;transition:all 1000ms ease; 31 什么是响应式设计?...响应式设计的基本原理是什么?如何兼容低版本的IE? 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。...单行文本垂直居中:把line-height值设置为height一样大小的值可以实现单行文字的垂直居中,其实也可以把height删除。
/* 控制外边距的大小 */ } 在上面的代码中,我们创建了一个包含文本的 元素,并使用CSS盒子模型来控制其大小和位置。...: #ccc; } 如何使一个盒子在其容器中水平居中?...可以使用CSS的margin属性来实现盒子在其容器中水平居中。将盒子的左右外边距设置为auto,就可以使盒子在容器中水平居中。...200px; height: 100px; background-color: #fff; left: 50%; transform: translate(-50%, -50%); } 如何使一个盒子在页面中居中...可以使用CSS的绝对定位和负边距的方式来实现一个盒子在页面中居中。
1.什么是 BFC机制 BFC(Block Formatting Context),块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。...的值不为static或则releative中的任何一个 在IE下, Layout,可通过zoom:1 触发 BFC布局与普通文档流布局区别: BFC布局规则: 浮动的元素会被父级计算高度(父级元素触发了...清除浮动有哪些方法, 各有什么优缺点 使用clear属性的空元素 在浮动元素后使用一个空元素如,并在CSS中赋予.clear{clear:both;}属性即可清理浮动...,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。...CSS优化、提高性能的方法有哪些 尽量将样式写在单独的css文件里面,在head元素中引用 将代码写成单独的css文件有几点好处: 内容和样式分离,易于管理和维护 减少页面体积 css文件可以被缓存、重用
CSS 写在style标签中 当前页面 小案例 外联式 CSS 写在一个单独的.css文件中 多个页面 项目中 行内式 CSS 写在标签的style属性中 当前标签 配合js使用 ---- 标签选择器...、字母、下划线、中划线组成,但不能以数字或者中划线开头 一个标签可以同时有多个类名,类名之间以空格隔开 类名可以重复,一个类选择器可以同时选中多个标签 id选择器: 通过id属性值,找到页面中带有这个id...属性值的标签,设置样式 #nav { color: red; } id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的!...正常:normal(默认值) 倾斜:italic 样式的层叠问题: 如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效,所谓的层叠即叠加的意思,表示样式可以一层一层的层叠覆盖...删除线(不常用) overline 上划线(几乎不用) none 无装饰线(常用) 水平居中方法margin : 0 auto: div–p–h:水平居中(margin : 0 auto ; 实现)
6 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?...弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。 试用场景:弹性布局适合于移动前端开发,在Android和ios上也完美支持。 11 用纯CSS创建一个三角形的原理是什么?...:hidden;transition:all 1000ms ease; 31 什么是响应式设计?...响应式设计的基本原理是什么?如何兼容低版本的IE? 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。...单行文本垂直居中:把line-height值设置为height一样大小的值可以实现单行文字的垂直居中,其实也可以把height删除。
今天我们来分享web前端CSS定位中的position:absolute绝对定位的应用场景案例的相关场景!...绝对定位是CSS中非常中啊哟的知识点,接下来我我们会通过7个不同的层面结合7个不同的案例来展开讲解!...天挑战学习计划》,内容如下: HTML/HTML5,CSS/CSS3,JavaScript,真实企业项目开发,云服务器部署上线,从入门到精通 PC端项目开发(1个) 移动WebApp开发(2个) 多端响应式开发...,多端响应式开发项目开发 真机调试,云服务部署上线; Linux环境下 的 Nginx 部署,Nginx 性能优化; Gzip 压缩,HTTPS 加密协议,域名服务器备案,解析; 企业项目域名跳转的终极解决方案...,多网站、多系统部署; 使用 使用 Git 在线项目部署; 这些内容在《30天挑战学习计划》中每一个细节都有讲到,包含视频+图文教程+项目资料素材等。
> 所以到这里我们可以写下浮动的优点了: 可以将多个块级元素在同一行里显示,在一些图文混排的场景里很常见。...大致是一个三角形,如果我们把颜色换成同一个的话,看起来会更像。...寄生式继承 寄生式继承我认为和原型式继承一模一样,只不过它可能更加强调【以某种方式增强对象】 它同样需要基于Object.create() 寄生式组合继承 最完美的继承方式。...多路复用 HTTP/2 利用流在同一个TCP连接上来进行多个数据帧的通信。 在HTTP/1.1 时代,有一个很大的问题就是HTTP队头阻塞。...HTTP/2 用流 在同一个TCP连接上来进行多个数据帧的通信,这就是多路复用的的概念 此外HTTP/2 还设置了一些新功能。
响应式设计: 随着移动设备的普及,响应式设计已经成为Web开发的标配。我们将介绍如何利用CSS媒体查询和弹性布局来创建适应不同屏幕尺寸的网页。...3种: 内嵌式: css写在style标签中 提示:style标签可以写在页面的任意位置,但是通常约定写在head标签中 作用范围 当前页面 适用于 小案例 外联式: css写在一个单独的.css文件中...:center 居中 text-align :left 左对齐 要想给图片居中 给图所在的标签的父标签加上text-align :center注意不是img标签 文本修饰 属性名:text-decoration...,取值之间空格隔开 元素显示模式: 块级元素:显示特点 独占一行,一行显示同一个,宽度默认是父元素的宽度,高度默认是由内容撑开 可以设置宽高 代表:div p h ul dl dd from nav...浮动: float之后的标签具有行内块特点 float 使盒子在同一行 浮动元素会脱离标准流,在标准流中的不占原来位置 浮动元素比标准流高半个级别,可以覆盖标准流中的原素 清除浮动·: 清除浮动带来的影响
文章分为上(html,css)中(js)下(vue)三部分。 html篇 html应该是前端中最简单的知识点了,标签用着用着就熟记于心,在面试过程中对html的提问更是少之又少,话不多说,上干货。...(如div下可包含div) 行内元素(常见的行内元素a,span.img) 一行显示多个 宽度为内容的宽度 不可以设置高度和宽度 标签内一般不包含标签(如a标签内包含a标签) 行内块元素 行内块元素包含块级元素和行内元素的特征...) 多行文本 -webkit-line-clamp:2 //(用来限制在一个块元素显示的文本的行数) display: -webkit-box//(将对象作为弹性伸缩盒子模型显示) overflow...13. div水平垂直居中的几种方式。...绝对定位水平垂直居中(margin:auto实现绝对定位元素的居中) 这里是div .center {
text-align 属性值来决定; 当一个内联盒子超过父元素的宽度时,它会被分割成多盒子,这些盒子分布在多个 line box 中。...它分两种情况: 在同一个层叠上下文中,它描述定义的是该层叠上下文中的层叠上下文元素在 Z 轴上的上下顺序; 在其他普通元素中,它描述定义的是这些普通元素在 Z 轴上的上下顺序; 普通节点的层叠等级优先由其所在的层叠上下文决定...层叠顺序 在同一个层叠上下文中如果有多个元素,那么他们之间的层叠顺序是怎么样的呢?...除了通过 让指定设备生效外,还可以通过 @media 让 CSS 规则在特定的条件下才能生效。响应式页面就是使用了 @media 才让一个页面能够同时适配 PC、Pad 和手机端。...水平垂直居中 让元素在父元素中呈现出水平垂直居中的形态,无非就 2 种情况: 单行的文本、inline 或者 inline-block 元素; 固定宽高的块级盒子; 不固定宽高的块级盒子; 以下列到的所有水平垂直居中方案这里写了个
text-align 属性值来决定; 当一个内联盒子超过父元素的宽度时,它会被分割成多盒子,这些盒子分布在多个 line box 中。...它分两种情况: 在同一个层叠上下文中,它描述定义的是该层叠上下文中的层叠上下文元素在 Z 轴上的上下顺序; 在其他普通元素中,它描述定义的是这些普通元素在 Z 轴上的上下顺序; 普通节点的层叠等级优先由其所在的层叠上下文决定...层叠顺序 在同一个层叠上下文中如果有多个元素,那么他们之间的层叠顺序是怎么样的呢? ?...除了通过 让指定设备生效外,还可以通过 @media 让 CSS 规则在特定的条件下才能生效。响应式页面就是使用了 @media 才让一个页面能够同时适配 PC、Pad 和手机端。...水平垂直居中 让元素在父元素中呈现出水平垂直居中的形态,无非就 2 种情况: 单行的文本、inline 或者 inline-block 元素; 固定宽高的块级盒子; 不固定宽高的块级盒子; 以下列到的所有水平垂直居中方案这里写了个
在常规的实现方式中也是在这个中间列里做文章,如何使中间列内容不被左右列遮挡。...} } 居中布局 「居中布局」由父容器与若干个子容器组成,子容器在父容器中横向排列或竖向排列且呈水平居中或垂直居中。...居中布局是一个很经典的问题,所以笔者在小册中罗列了所有居中布局方式,详情请查看小册第6章布局方式。 ? 居中布局 在此直接上一个目前最简单最高效的居中方式。...气泡对话框的身板就是一个圆角矩形,可用直接绘制,小尾巴是一个三角形,可用::after占位并绘制。这样就无需在里添加一个绘制小尾巴了。 ?...,而hidden使隐藏起来,不占用页面任何位置,此时放置在页面任何位置都行。
::before 为父级元素定义一个伪元素 padding-top:100%; 设置伪元素的内上边距,这里的百分比的值是按照宽度计算的,所以会呈现为一个响应式的元素块。...此方法还允许将内容正常放置在元素内。 浏览器支持情况 100% 4.使用表格居中 使用display:table(作为flexbox的替代)使子元素在其父元素中水平垂直居。...使最后一项占满剩余高度 通过为最后一个元素提供当前视口中剩余的可用空间,即使在调整窗口大小时,也可以利用可用的视口空间。...使用transform居中子元素 使用 position:absoluteandtransform:translate() 进行居中,不需要知道父级和子元素的宽高,因此它非常适合响应式应用程序。...弹出菜单 在悬停和焦点上弹出交互式菜单。 ?
.gallery { min-height: 100vh} 有关图片的快速标记 图片默认是一个 inline-block 元素,有宽高,通常排列在同一行(除了图片尺寸有限定,一行排不下的情况)。...除了能得到一个免费的响应式图片集外,使用 Flexbox 的另一个优势就是它的对齐选项。...图片在水平方向上完美居中 如上所示,这会让图片水平居中。 .gallery { ... justify-content:center; align-items: center;} ?...再进一步,我们可以让图片完美居中对齐(无论是水平还是垂直) 如上所示,这可以让图片在 .gallery 内水平和垂直都居中。 你可以通过 Flexbox 的布局方式随意选择你想要的对齐选项。...应用 .row\_cell — top 类可以让特定的元素在 row 内靠顶部对齐 你一定有在标识文本中给特定元素加上这个类。
在常规的实现方式中也是在这个中间列里做文章,如何使中间列内容不被左右列遮挡。...} } 复制代码 居中布局 居中布局由父容器与若干个子容器组成,子容器在父容器中横向排列或竖向排列且呈水平居中或垂直居中。...居中布局是一个很经典的问题,所以笔者在小册中罗列了所有居中布局方式,详情请查看小册第6章布局方式。 在此直接上一个目前最简单最高效的居中方式。...气泡对话框的身板就是一个圆角矩形,可用直接绘制,小尾巴是一个三角形,可用::after占位并绘制。这样就无需在里添加一个绘制小尾巴了。...关联起来,而hidden使隐藏起来,不占用页面任何位置,此时放置在页面任何位置都行。
:checked 单选框或复选框被选中 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?...] > Tag[1] 在同一组属性设置中,!...原理类似图片轮播原理,超出隐藏部分,滚动时显示 可能用到的CSS属性:overflow:hidden; transform:translate(100%, 100%); display:none; 什么是响应式设计...响应式设计的基本原理是什么?如何兼容低版本的IE?...响应式设计就是网站能够兼容多个终端,而不是为每个终端做一个特定的版本 基本原理是利用CSS3媒体查询,为不同尺寸的设备适配不同样式 对于低版本的IE,可采用JS获取屏幕宽度,然后通过resize方法来实现兼容
领取专属 10元无门槛券
手把手带您无忧上云