前端面试题之CSS系列

1、盒子模型的理解

• 标准的盒子模型
  

盒子总宽度 = width(content) + padding + border + margin;
也就是，width/height 只是内容高宽度，不包含 padding 和 border值

• IE怪异盒子模型
  
  盒子总宽度 = width（content+padding+border） + margin；
  也就是，width/height 包含了 padding和 border值

• box-sizing：定义了引擎应该如何去计算元素的总宽和总高

box-sizing: content-box|border-box|inherit:

content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
inherit 指定 box-sizing 属性的值，应该从父元素继承

2、CSS选择器有哪些？优先级？哪些属性可以继承？

• 选择器
  id选择器 #box
  类选择器 .one
  标签选择器 div
  后代选择器 #div ul
  子选择器 ul>li
  相邻同胞选择器 .box+.one
  群组选择器 div,p
  伪类选择器 :link，:active，:hover……
  伪元素选择器 ::after，::before
  属性选择器 [attrice]
  css3增加的选择器

  • 层次选择器 p~u
  • 伪类选择器 :nth-child()
  • 属性选择器

• 优先级

  • 内联 > id选择器 > 类选择器 > 标签选择器
  • A 内联的个数
  • B id选择器的个数
  • C 类选择器的属性选择器的个数
  • D 标签选择器和伪类元素选择的个数

• 继承属性

  • 字体系列属性 font－size，font－family，font－weight，font－style
  • 文本系列属性 text－align……
  • 表格系列
  • 列表系列
  • 引用系列
  • 光标 cursor

3、px/em/rem/vh/vw

• px ：绝对长度单位
• em：相对长度单位，相对于对象内文本字体大小，如果没有设置font-size = 62.5%，那么1em = 16px；否则1em = 10px
  • 特点：em值不固定；继承父元素的字体大小
• %：相对于父元素
• vh：根据窗口大小划分高度，把窗口划分为100vh，那么50vh，就是高度的一半
• vw：根据窗口的大小划分宽度
• rem：相对长度单位，相对HTML根元素的字体大小，如果设置font-size = 62.5%，那么1rem = 10px

4、CSS隐藏函数

display:none; // 隐藏，不占空间，无法响应点击事件，重排和重绘
visibility:hidden; // 隐藏，占空间，无法响应点击事件，重绘
opacity:0; // 改变元素的透明度，元素不可见，占空间，可以点击事件
height,width设置为0 // 隐藏，不占空间，无法响应点击事件
position:absolute; // 隐藏，不影响页面，将元素移除可视区域
clip-path裁剪 // 隐藏，占据空间，无法响应点击事件，通过裁剪的形式

5、BFC的理解

• BFC是什么
  BFC块级格式化上下文，它是页面中的一块渲染区域，有自己的渲染规则

• 触发条件
  根元素HTML / float / overflow / display / position

• 应用场景
  防止margin重叠（塌陷）；
  清除内部浮动；
  自适应多栏布局（解决每个元素的左外边距与包含块的左边界相接触）

6、元素水平垂直居中的方法有哪些

• 定位 + margin：auto

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;

• 定位+margin：负值

position:absolute;
top:50%;
left:50%;
margin-left:-50px;

注意：需要知道子元素的宽高

• 定位+transform

position：absolute；
top:50%;
left:50%;
transform:translate(-50%，-50%)

• table布局
  设置父元素位display：table-cell ，子元素设置display：inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中
• flex布局
• grid布局

7、如何实现两栏布局，右侧自适应？三栏布局中间自适应？

• 两栏布局

  • float左浮动 + margin-left
  • flex布局

• 三栏布局

  • 两边使用float，中间使用margin；
  • 两边使用absolute，中间使用margin；
  • 两边使用float，中间负margin；
  • display：table；
  • flex布局
  • grid布局

8、flex弹性布局

• 是什么
  flex布局，即弹性布局，可以完整的，响应，便捷的实现各种页面布局
• 属性
  flex-direction / flex-wrap / flex-flow（前面两个属性的简写形式）/ justify-content / align-items / align-content(定义多根轴线的对齐方式) / order(排列顺序) / flex-grow(放大比例）/ flex-shrink(比例缩小) / flex-basis(设置元素在主轴上的初始尺寸) / align-self

9、介绍下grid网格布局

• 是什么
  grid布局，即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构

• 属性

  • display：grid （块级元素）、inline-grid（行内元素）
  • grid-tempalte-rows （设置行高） / grid-template-columns（设置列宽）
  • grid-row-gap（行间距） / grid-column-gap（列间距） / grid-gap（前面两者的简写）
  • grid-template-areas（定义区域）
  • grid-auto-flow，容器的子元素按顺序自动放置在每一个网格
  • justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）
  • justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）
  • justify-self属性设置单个单元格内容的水平位置（左中右）align-self属性设置单个单元格内容的垂直位置（上中下）

10、CSS3新增加了哪些特性

• css,即层叠样式表的简称，是一种标记语言，由浏览器解释执行用来使页面变得更加美观

• css3是css的最新标准，向后兼容

  • 选择器
    p~ul (p元素中的每个ul元素) / [div^=“one”]

  • 边框
    border-radius 圆角边框
    border-shadow 为元素添加阴影
    border-image 使用图片来绘制边框

  • 背景
    background-clip 确定背景画区
    background-origin 背景图片的原点
    background-size 背景图片的大小

  • 文字
    word-wrap 换行
    text-overflow 当前行超过指定容器的边界如何显示
    text-show 文本阴影

  • transition过渡

  • transform转换
    transform:translate(120px,50%); // 位移
    transform:scale(2,0.5); // 缩放
    transform:rotate(0.5turn); // 旋转
    transform:skew(30deg,20deg); // 倾斜

  • animation动画

  • 渐变
    linear-gradient：线性渐变
    radial-gradient：径向渐变

11、怎么理解回流跟重绘？什么场景下会触发？

• 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置

  • 回流触发时机
    1、添加或删除可见的DOM元素
    元素的位置发生变化
    2、元素的尺寸发生变化（包括外边距、内边 框、边框大小、高度和宽度等）
    3、内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
    4、页面一开始渲染的时候（这避免不了）
    浏览器的窗口尺寸变化（因为回流是根据视口 的大小来计算元素的位置和大小的）

• 重绘：计算好盒子模型的位置，大小及其他属性后，浏览器根据盒子的其他特性进行绘制

  • 重绘触发时机
    1、颜色的修改
    2、文本方向的修改
    3、阴影的修改

• 浏览器的解析渲染机制

  • 解析HTML，生成DOM树，解析CSS，生成CSSOM树
  • 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
  • Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
  • Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
  • Display:将像素发送给GPU，展示在页面上

• 浏览器优化机制

  • 由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列

12、响应式设计

• 是什么
  响应式设计是一种网页布局，网页设计根据设备环境进行相应的调整与响应

• 实现方式

  • 媒体查询
    1、@media
    2、通过不同的设备设置不同的样式

  • 百分比 %

  • vh/vw 页面视图的高度和宽度

  • rem 相对根元素的字体大小

  • 除此之外，我们还可以使用主流的UI框架，如element ui，antd

13、CSS性能优化

• 内联首屏关键CSS
  浏览器加载好html页面就可以立刻渲染

• 异步加载CSS，不会出现阻塞渲染
  使用javascript将link标签插到head标签最后

• 合理使用选择器
  1、不要嵌套使用过多复杂选择器，最好不要三层以上
  2、css匹配的规则都是从右往左

• 资源压缩
  文件变小，大大降低浏览器的加载时间

• 减少使用昂贵的属性
  border-radiu/ box-show / :nth-child

• 不要使用@import
  @import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时,而且多个@import可能会导致下载顺序紊乱

14、单行/多行文本溢出

// 单行文本溢出
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

// 多行文本溢出
display:-webkit-box;
-webkitline-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;

15、如何用CSS完成视差滚动效果

• 是什么
  视差滚动是指多层背景以不同的速度移动，形成立体的效果

• 实现方式

  • background-attachment：scroll / fixed / inherit (设置背景图形是否固定或者随着页面其余部分滚动)

  • transform：translate3D 和 perspective：css3属性

  • transform：css3属性 是对元素进行变换（2d/3d），perspective：css3属性 是定义我们眼睛看到的是3d立体，即空间感

16、画三角形

原理分析：框是实现三角形的部分，边框实际上并不是一个直线，如果我们把四条边标记颜色，将边框慢慢放大，得到的是每条边框都是梯形

17、让Chrome支持小于12px的文字方式有哪些？区别？

• 背景
  Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制，由于Chrome团队认为汉字小于12px会有识别困难

• 实现方法

  • zoom(50%) / zoom(0.5) 可以改变页面上元素的大小，属于真实尺寸；
  • -webkit-transform：scale（0.8）只对定义了宽高的元素生效

18、link和@import的区别

• link是XHTML标签，除了加载css外，还可以定义Rss等其他事务；引用css时，在页面载入时同时加载；无兼容问题；支持javaScript控制DOM去改变样式
• @import 只能加载css；等页面完全加载完之后载入css；低版本的浏览器不支持；不支持javascript控制DOM去改变样式

19、transition和animation的区别

• transition是过渡属性，强调过度，它的实现需要触发一个事件
• animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画（用@keyframe定义）

20、伪元素和伪类的区别？

• 伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们
• 伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素

21、对requestAnimationframe的理解

• 实现动画效果的方法

  • Javascript 中可以通过定时器 setTimeout 来实现

    • 缺点
      1、settimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；
      2、settimeout的固定时间间隔不一定与屏幕刷新间隔时间相同，会引起丢帧

  • CSS3 中可以使用 transition 和 animation 来实现

  • HTML5 中的 canvas 也可以实现

  • HTML5还提供了一个专门用于请求动画的API，requestAnimationFrame（请求动画帧）

    • window.requestAnimationFrame(callback) // 默认返回id

    • cancelAnimationFrame(id)

      • 优势
        1、CPU节能
        当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统走的RequestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
        2、函数节流
        保证每个刷新间隔内，函数只被执行一次
        3、减少DOM操作
        会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

22、为什么有时候用translate来改变位置而不是定位？

• 改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合
• transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。
• ⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

23、li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

• 背景
  浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个 li 放在一行，这导致 li 换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

• 解决方法

1、li{float：left}
2、ul{font-size:0}
3、ul{letter-spacing:-9px} // letter-spacing 字符间隔
   li{letter-spacing:normal}

24、常见的图片格式及使用场景

BMP，无损，文件较大
GIF，无损，文件较小，色彩要求不高
JPEG，有损压缩导致图片模糊，体积小；对色彩要求高，导致文件体积大
PNG-8，无损，有透明度的调节
PNG-24，无损压缩，比BMP体积小但是比其他的体积大
SVG，矢量图，放大不失真
WebP谷歌开发的一种新的图片格式

25、::before和 ::after的双冒号和单冒号有什么区别？

• ：用于css3伪类，：：用于css3伪元素
• 伪元素不存在dom之中，只存在页面之中
• 伪元素在CSS2.1里面出现，起初，伪元素的前缀使用的是：，但随着web的进化，在CSS3的规范里，伪元素的前缀变成了 ::

26、对CSSprites的理解

• 是什么
  CSSSprites是精灵图，是将页面所涉及的所有的图片都包含到一张大图中去

• 优点
  1、减少网页的http请求，从而提高页面的性能
  2、减少图片的字节

• 缺点
  1、在图片合并的时候，需要合理有序的排放图片
  2、需要借助PS工具
  3、维护性差

27、对CSS工程化的理解

• CSS工程化是为了解决以下问题
  1、宏观设计：如何拆分、模块结构怎样设计？
  2、编码优化：怎么写出更好的CSS？
  3、构建：如何让打包结果最优？
  4、可维护性：如何最小化它后续的变更成本？

• CSS工程化实践
  1、预处理器：Less、 Sass 等

  • 解决CSS做不到的事情：优化CSS目录，结构清晰，可维护性

  2、重要的工程化插件： PostCss

  • 对CSS本身进行解析和处理的工具

  3、Webpack loader

  • webpack操作css需要借助两个关键loader：style-loader css-loader （注意顺序不能换，因为是从右往左去解析，先是解析CSS，再是创建style标签，把CSS内容写入标签）

28、如何判断元素是否到达可视区域

• window.innerHeight 是浏览器可视区的高度
• document.body.scrollTop 是浏览器滚动的过的距离
• img.offsetTop 是元素顶部距离文档顶部的高度

29、对sticky定位的理解

• position:sticky 基于用户的滚动位置来定位，在position：relative和position：fixed定位之间切换。
• 它的行为像position：relative，而当页面滚动超出目标区域时，它的表现就像position：fixed，它会固定在目标位置。