| 前端面试总结之CSS | 您所在的位置：网站首页 › 回流重构 › 前端面试总结之CSS |
前端面试总结之CSS
|
文章目录
1. BFC:块级格式化上下文（重点关注）2. CSS盒子模型3. 清除浮动4. 隐藏元素的方法及各自的特点5. line-height和heigh区别6. 用CSS画三角形7.圣杯布局（三栏布局方式两边固定中间自适应，与双飞翼布局解决的问题一致）8. 画一根0.5px的线9.水平 垂直居中问题固定宽高水平居中垂直居中水平垂直居中
不固定宽高水平垂直居中
10. 骰子布局11. overflow 的原理12. display: none与visibility: hidden的区别13. 重绘与回流回流（重构/重排/reflow）：定义触发条件
重绘减少重绘与回流
14. 单双冒号区别15. 元素空隙原因及解决方法16. Css3新特性17.Scoped原理18.CSS 动画比JavaScript 动画高效的原因参考资料
1. BFC:块级格式化上下文（重点关注）
BFC基本概念:BFC是 CSS布局的一个概念，是一块独立的渲染区域(环境)，里面的元素不会影响到外部的元素。 BFC原理(渲染规则、布局规则): (1)内部的 Box会在垂直方向，从顶部开始一个接着一个地放置; (2)Box垂直方向的距离由 marain决定，属于同一个 BFC 的两个相邻 Box的margin 会发生重叠; (3)每个元素的margin Box的左边，与包含块 border Box的左边相接触，(对于从左到右的格式化，否则相反)。即使存在浮动也是如此; eg:左浮是子div的左边接触父div的borderbox的左边，右浮是子div接触父div的borderbox右边 (4)BFC在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。 BFC布局规则： (5)BFC的区域不会与float Box重叠(即清浮动) (6) 计算BFC的高度时，浮动元素也参与计算。 BFC触发条件(即脱离文档流) 根元素，即HTML元素(最大的一个 BFC)浮动(float 的值不为none)定位(position的值为absolute或fixed)表格单元(display为table、table-cell、table-caption、inline-block等 HTML表格相关的属性 )弹性盒(display为flex或inline-flex)overflow不为visibleBFC作用（应用场景） 1、自适应两(三)栏布局(避免多列布局由于宽度计算四舍五入而自动换行) 2、避免元素被浮动元素覆盖 3、让父元素的高度包含子浮动元素，清除内部浮动(原理:触发父 div的BFC属性，使下面的子 div都处在父 div的同一个BFC区域之内) 4、使用不同的BFC防止margin重叠 2. CSS盒子模型CSS的盒子模型：标准盒子模型、IE盒子模型(怪异盒模型) 区别： 标准盒子模型宽高 = content + border + padding + margin IE盒子模型宽高 =margin+content（content包含 border + padding ） 即标准盒子模型增大padding 、 border 就会撑大盒子，但IE盒模型则不会撑大，而是通常减小content 默认为标准盒子模型 CSS盒子模型的转换： box-sizing: content-box; /*标准盒子模型*/ box-sizing: border-box; /*IE盒子模型*/ .box2 { margin-bottom: 10px; width: 100px; border: 20px solid black; height: 100px; background-color: red; } .box3 { box-sizing: border-box; margin-top: 10px; width: 100px; border: 20px solid black; height: 100px; background-color: blue; }
3. 清除浮动
给父元素单独定义高度 优点简单，代码少 ； 缺点无法进行响应式布局给浮动元素的容器加overflow：hidden 优点简单，兼容性较高 ； 缺点：超出部分被隐藏在浮动元素后面加一个带clear：both属性的空标签 优点：简单代码少，兼容性较高 ； 缺点：增加无语义的空标签，不利于页面优化和后期维护：after伪元素方法（最推荐）一定要有的属性content display clear 优点：写法固定，兼容性高 ； 缺点：代码多
.box {
border: 1px solid black;
padding: 5px;
width: 450px;
/* overflow: hidden;
法二：父元素加overflow: hidden;
*/
}
/* 法三：伪元素（推荐） */
.box:after {
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.left {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.right {
width: 100px;
height: 100px;
background-color: red;
float: right;
}
/* .clean{
clear: both;
} */
4. 隐藏元素的方法及各自的特点
- rgba(0,0,0,0) /*占据空间，可以响应点击事件 */
- opacity:0 /* 占据空间，可以响应点击事件 ，子元素会继承吗，在读屏软件中无法隐藏*/
- overflow：hidden /*用来隐藏元素溢出部分，占据空间，无法响应点击事件*/
- visibility:hidden /* 占据空间，无法点击 ：与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏*/
- transform: scale(0,0) /* 占据空间，无法点击 */
- display：none /*不占据空间，无法点击*/
- z-index:-1000 /* 不占据空间，无法点击 */
- position：absolute;
left:-99999px;
top:-90999px; /* 不占据空间，无法点击 */
5. line-height和heigh区别
line-height：每一行文字的高，如果文字换行则整个盒子高度会增大（高度=行数*行高）。 height：定值，即这个盒子的高度。 6. 用CSS画三角形按要求画某一朝向的三角形，其他三个边框设为透明 div{ width: 0; height: 0; border: 50px solid transparent; border-bottom:50px solid red; } .all{ margin-top: 20px; width: 0; height: 0; border: 50px solid transparent; border-color: blue green purple black; }
eg: 两边100px，中间自适应 使用flex布局：左右固定宽 中间 flex：1 /* 法一：flex布局 */ body{ display: flex; } .left{ width: 100px; height: 500px; background-color: aquamarine; } .middle{ flex:1; /* 占据剩余空间 */ background-color: lightsalmon } .right{ width: 100px; height: 500px; background-color: red; } 绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右 margin 值撑开距离 body { position: relative; margin: 0; } .left { position: absolute; width: 100px; height: 500px; background-color: aquamarine; left: 0; top: 0; } .right { width: 100px; height: 500px; position: absolute; background-color: red; right: 0; top: 0; } .middle { height: 500px; margin-left: 100px; margin-right: 100px; background-color: lightsalmon; } 自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后 .left { float: left; width: 100px; height: 500px; background-color: aquamarine; } .right { width: 100px; height: 500px; float: right; background-color: red; } .middle { height: 500px; background-color: lightsalmon; } 25484868 margin 负值法：左右两栏均左浮动，左右两栏采用负的 margin 值。中间栏被宽度为 100%的浮动元素包起来 8. 画一根0.5px的线 采用meta viewport的方式（viewport只针对移动端，只在移动端上才能看到效果）-采用transform: scale()的方式 div{ margin: 50px; width: 150px; height: 1px; background-color: aqua; transform: scaleY(0.5); } 9.水平 垂直居中问题 固定宽高 水平居中 法一 ： margin: auto; div { width: 500px; height: 200px; background-color: blue; /* 法一 ： margin: auto;*/ margin: auto; } 父元素text-align: center;子元素display: inline-block; body{ text-align: center; } div{ width: 500px; height: 200px; background-color: blue; display: inline-block; } Flex布局 body{ display: flex; justify-content: center; } div{ width: 500px; height: 200px; background-color: blue; } 垂直居中 已知父元素高度，子元素相对定位并 transform:translateY(-50%);弹性盒布局，父元素 display：flex，子元素 align-self：center使用 line-height改变行高，设置子元素和父元素行高一样使内联元素居中，需要已知父元素的高度 水平垂直居中 绝对定位+margin div{ width: 500px; height: 200px; background-color: blue; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -250px; } 绝对定位，设置四个方向值为0后margin设为auto div{ width: 500px; height: 200px; background-color: blue; position: absolute; top:0; left: 0; bottom: 0; right: 0; margin: auto; } 不固定宽高 水平垂直居中 子元素相对父元素绝对定位后子元素top,left值为50%，再 transform: translate(-50%,-50%);父元素设置弹性盒子 display: flex; justify-content: center; align-items: center; table-cell（父级需固定宽高且不能为百分比） .parent { width: 200px; height: 150px; //固定宽高 background-color: blue; display: table-cell; text-align: center; vertical-align: middle; } .son { /* 因为 table-cell方案是用于控制文本水平垂直居中，故要转换为行内或行内块元素*/ display: inline-block; } 10. 骰子布局 11. overflow 的原理当元素设置了 overflow 样式且不为visible 时，该元素就构建了一个BFC。BFC 在计算高度时内部浮动元素的高度也会计算在内，故BFC 的高度不会发生坍塌，所以达到了清除浮动的目的。 12. display: none与visibility: hidden的区别占用位置的区别 display: none不占用位置 visibility: hidden占用位置 重绘和回流的问题 visibility: hidden;、 display: none; 均产生重绘 display: none 还会产生一次回流 PS: 产生回流一定会造成重绘，但是重绘不一定会造成回流。 13. 重绘与回流 回流（重构/重排/reflow）： 定义当渲染树中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。（重排开销大） 触发条件1.一个DOM 元素的几何属性发生变化，常见的几何属性有width、height、padding、margin、left top、 border 等 2.可见的DOM 节点添加、删除、更新 3.读写 offset 族、 scroll 族和 client 族属性时（需要通过即时计算得到） 4.字体大小改变 5.display：none 重绘定义： 重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，由于没有导致 DOM 几何属性的变化，因此元素的位置信息不需要更新，从而省去布局的过程，跳过了生成布局树和建图层树的阶段。 触发： 颜色的修改、阴影的修改等外观样式的改变 减少重绘与回流 最小化重绘和重排，如样式集中改变，使用添加新样式类名.class 而不是用大量的style修改批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量再去使用，而不是频繁使用这个计算属性;或利用 document.createDocumentFragment()来添加要被添加的节点，处理完之后再插入到实际 DOM 中使用 absolute 或 fixed 使元素脱离文档流，再对其进行复杂动画效果的绘制尽量避免使用table布局开启 GPU 加速，利用 css 属性 transform、will-change 等，如改变元素位置时使用translate 比使用绝对定位改变高效，因为它不会触发重排或重绘 14. 单双冒号区别单冒号:用于表示伪类，操作文档已有的元素，伪类一般匹配的是元素的一些特殊状态，如 hover、link等 双冒号:用于表示伪元素，会创建文档树之外的元素，伪元素一般匹配的是特殊位置，如after、before等，侧重于表达或定义不在语法定义范围内的抽象元素 15. 元素空隙原因及解决方法原因代码中添加了空白符(空格、tab(制表符)、回车换行等)等字符引起的: 元素被当成行内元素排版的时候，元素之间的空白符(空格、tab(制表符)、回车换行等)都会被浏览器处理，根据white-space的处理方式(默认是normal，合并多余空白)，原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。 解决方案： 在HTML中的标签之间不留空格，但代码可读性会变差父元素 font-size:0，子元素再单独设置字体样式margin 负值设置父元素的letter-spacing属性word-spacing 词间距float: left 16. Css3新特性 Box-shadowBox-radiuscss3选择器 last-child、nth-child渐变弹性盒flex过渡、动画、2D/3D转换 17.Scoped原理原理： 1.给HTML的DOM节点加一个不重复data属性(形如:data-v-2333a)来表示他的唯一性。 2.在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(如[data-v- 2333a])来私有化样式。 优点: 实现组件的私有化，不对全局造成样式污染 缺点：父组件无法设置子组件样式 解决：使用两个style，一个用于私有样式，一个用于公共样式。 18.CSS 动画比JavaScript 动画高效的原因通常渲染引擎生成一帧图像有三种方式：重排、重绘和合成。其中重排和重绘操作都是在渲染进程的主线程上执行的，比较耗时；而合成操作是在渲染进程的合成线程上执行的，执行速度快，且不占用主线程。 js的动画执行在主线程容易引发阻塞和等待；css的动画执行在合成线程，速度快且不阻塞主线程。 参考资料关于CSS-BFC深入理解 |
【本文地址】