努力打造最全面的CSS面试题

CSS基础

CSS3新特性

• 新增的css选择器：( :first-child{样式} 、:last-child{样式}、:nth-child{样式}.......)

• 渐变：gradient: linear-gradient(线性渐变) || radial-gradient(圆形径向渐变)

• 圆角 ：border-radius ：2px； (半径为2px的圆角)

• 阴影： box-shadow：水平阴影位置 垂直阴影位置 模糊距离 阴影大小 阴影的颜色 阴影开始方法

• 盒子模型：box-sizing： content-box(标准盒子模型) | border-box(怪异盒子模型)

• 文字阴影： text-shadow：水平阴影 垂直阴影 模糊距离 阴影颜色

• 文本溢出省略：

  单行文本溢出省略号代替：
  1.强制文字一行显示:white-spase:nowrap;(默认为normal，自动换行。)
  2.超出的部分隐藏:overflow:hidden;。
  3.超出文字用省略号代替:text-overflow:ellipsis;
  

  多行文本溢出省略号代替：
  1.先设置一个盒子宽高，然后overflow:hidden; text-overflow:ellipsis;
  2.弹性伸缩盒子模型显示：display:-webkit-box;
  3.限制显示行数：-webkit-line-clamp:2;
  4.设置或检索伸缩盒对象子元素的排列方式：-webkit-box-orient: vertical;（从上到下垂直排序）
  

• transation(过渡) ：要过渡的属性 花费时间 运动曲线 何时开始； （谁过渡，给谁加！ ）

• animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画的起始或结束状态；（前两个属性必须写）

• transform(转换) ：

  • translateX | Y | Z (10px): 向 X | Y | Z 轴移动 10 px
  • rotateX | Y | Z(10deg) ： 以 X | Y | Z 轴旋转 10 °
  • scale（X, Y） : 元素缩放，取决于 X 轴与 Y 轴的参数
  • skew（X，Y） ： 元素倾斜，参数表示 X 轴与 Y 轴倾斜的角度

• flex布局：当父盒子设为flex布局后，子盒子的float，clear，vertical-align属性将失效。

flex布局

• 常见容器属性：

  • flex-direction ：设置主轴的方向

    • row: 默认值 从左到右
    • row-reverse:从右到左
    • column：从上到下
    • colum-reverse从下到上

  • justify-content:设置主轴上的子元素排列方式 （注意：使用这个属性之前 一定要先确定好主轴是哪个）

    • flex-star 默认值 从头部开始 如果主轴是x轴，则从左到右
    • flex-end 从尾部开始排列
    • center 在主轴居中对齐
    • space-around 平分剩余空间
    • space-between 先两边贴边 在平分剩余空间（重要）

  • align-items ：设置侧轴上的子元素排列方式（限于单行元素使用）

    • flex-start:从上到下
    • flex-end：从下到上
    • center：挤在一起居中
    • stretch：；拉伸 默认值
    • flex-flow：复合元素，相当于同时设置了 flex-direction 和 flex-wrap。 flex-flow:column wrap;

  • align-content:设置侧轴上的子元素的排列方式（只能在子元素出现换行的时候使用 在单行下使用没有效果）

    • flex-star 默认值 在侧轴的头部开始排列
    • flex-end 从侧轴尾部开始排列
    • center 在侧轴居中对齐
    • space-around 子项在侧轴平分剩余空间
    • space-between 子项在侧轴先两边贴边 在平分剩余空间（重要）
    • stretch 设置子项元素高度平分父元素高度

  • flex-wrap:设置子元素是否换行 nowrap(默认 不换行) | warp(换行)

定位（position）

• static：静态定位 ，相当于标准流的摆放模式

• relative：相对定位，元素移动是相对于自身原本的位置，移动后原本位置还继续占有。

• absolute：绝对定位

  • 没有祖先元素或者祖先元素没有定位时，则以浏览器为准定位
  • 祖先有定位时（无论是相对、绝对、固定定位），则以最近一级有定位祖先元素为参照点移动位置
  • 绝对定位不在占有原来位置（脱标）

• fixed ：固定定位，固定定位一定要有宽度。

  • 以浏览器可视窗口为参照物移动元素
  • 固定元素不占有原来位置(脱标，可看作特殊的绝对定位)

• sticky：粘性定位，被认为相对定位和固定定位的混合。

  • 以可视窗口为参照点移动元素(固定定位特点)
  • 粘性定位占有原来位置。(相对定位特点)
  • 必须添加四个方位中的其中一个才有效

link与@import的区别

• link属于 XHTML 标签；@import属于 css 提供的一种方法，有兼容问题，仅支持IE5以上
• 页面加载的时候，link会同时被加载，而@import则会等页面加载完成之后在进行加载
• link 权重大于 @import
• link 支持使用 JS 去控制 DOM来修改样式；@import 不支持。
• @import 只能加载 css文件；link除了可以加载 css 外，还可以定义 ref连接属性等

CSS可继承与不可继承属性

可继承属性：

• 元素可见性（visibility）

• 字体系列属性

  • font-size：字体大小
  • font-weight：字体粗细
  • font-style：定义字体的风格
  • font-family：字体系列

• 文本系列属性

  • text-indent：文本缩进
  • text-align：文本水平对齐
  • line-height：行高
  • word-spacing：单词之间的间距
  • letter-spacing：字符之间的间距
  • direction：规定文本的书写方向
  • color：⽂本颜⾊

• 光标属性：cursor（光标形态）

不可继承属性：

• display

• 文本属性

  • vertical-align:垂直文本对齐
  • text-direction:文本装饰
  • text-shadow： 文本阴影
  • white-space：空白符的处理
  • unicode-bidi：设置文本方向

• 盒子模型的属性：width、height、margin、padding、border

• 背景属性： background、background-color、background-image、background-repeat、 background-position等

• 定位属性：：float、clear、position、top、right、bottom、left、overflow、clip、z-index等

• ⽣成内容属性：content、counter-reset、counter-increment

精灵图/雪碧图

将一些小图片合并到一张大图片中，然后利用 background-position 来获取到所需要的小图片。（一般只有小图片才会做成精灵图）

优点：

• 减少网页的 http 请求，加快网页加载速度，提高用户的体验
• 能够减少图片的字节数

缺点：

• 在宽屏、高分辨率的屏幕下的自适应页面，如果图片不够宽很容易出现背景断裂
• 开发时需要利用 ps 或其他工具测量图片的准确的位置
• 维护比较麻烦，一旦背景有少许改动就需要该这张精灵图

inline-block 显示有空隙

• 如果有空格的时候，删除空格
• 如果使用margin的时候，让margin负值即可
• 使用font-size的时候，可通过设置font-size:0 、letter-spacing 、word-spacing 解 决；

css权重

！important > 行内样式(1000)> id选择器(100) >类选择器、伪类选择器(10)> 元素选择器(1)>继承 *(0)

隐藏元素

• display：none : 最常使用的元素隐藏方法。隐藏后不会在页面占据位置
• visibility:hidden : 隐藏后元素还在页面中占据位置
• opacity: 0 : 将元素透明度设置为0，以此来达到隐藏元素的目的。此元素还在页面占据位置且可能会触发事 件。
• position:absolute; left: -999px : 将元素设为相对定位，然后通过top、left、right、bottom的大额负值来 移出可视化区域，以此实现元素隐藏。
• transform：scale(0) | translate(-999px,0) : 通过元素缩放为 0 或者 平移出可视化区域来实现元素隐藏。
• 设宽、高属性为 0 ： 将盒子模型的所有属性设置为 0，如果盒子内还有子元素或者内容的话，还需要设置其 overflow:hidden 来隐藏其子元素。

display:none 与 visibility:hidden 的区别

• 前者会让元素在页面中完全消失，不在页面中占据空间。后者只是内容不可见，依然在页面中占据空间。
• 前者是非继承属性，子节点是完全消失的，修改子节点属性也不会在显示。后者是继承属性，子元素消失是由于继承了 hidden，子元素可以通过设置 visibility:visible 来显示出来。
• 修改前者的时候，一般都会造成文档的重排。修改后者的时候，只会造成重绘。
• 使用读屏器的时候，前者内容不会被读取到，后者内容可以被读取到。

px/em/rem/vh/vw 的区别

• px : 表示像素，为绝对单位。
• em : 为相对长度单位。相对于为父节点字体的大小，如果自身定义了font-size按自身来计算。
• rem：也是为相对长度单位。相对于 HTML 根元素 font-size 的值。
• vh : 根据可视化窗口的高度，分成100 等份。100vh就相当于是满高。
• vw ：根据可视化窗口的宽度，分成100 等份。100vh就相当于是满宽。

BFC

BFC（Block Formatting Context）：块级格式化上下文，是页面中的一块渲染区域，拥有自己的一套渲染规则。

通常用于定位、清除浮动。

规则：

• 内部的盒子在垂直方向上一个接一个放置
• 在同一BFC中，相邻的两个盒子的margin会发生重叠
• BFC区域不会和float的元素区域重叠（用于自适应布局）
• 计算BFC区域高度的时候，float子元素也参与计算
• 每个元素的左外边距与包含块的左外边界相接触，浮动元素也是如此
• BFC 就是页面上的一个隔离的容器。容器内的子元素不会影响到外面的元素，反之亦然。

形成条件：

• 浮动元素：浮动元素的值不为 none
• 定位： position : absolute | fixed
• display: inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group
• overflow ： hidden、auto、scroll

应用场景：

• 防止相邻设有margin的两个盒子发生 margin 重叠（塌陷，以值较大的margin为准）。让两个盒子处于不同的BFC区域就行。
• 清除内部浮动：让外部大盒子形成 BFC 区域
• 自适应多栏布局（两栏布局，三栏布局.....）

水平垂直居中

• position：absolute + margin：auto
• position：absolute + margin：(-50%,-50%)
• position：absolute + transform：translate(-50%,-50%)
• 父元素设置 display：table-cell、vertical-align: middle、text-align:center， 子元素设置 display：inline-block
• flex布局: 给父盒子设置 display：flex、justify-content: center、align-items:center;
• grid网格布局：给父盒子设置 display：grid、justify-content: center、align-items:center;

常用的CSS预处理语言

CSS预处理语言为 CSS 增加了一些编程的特性，可以让你在 CSS 中使用变量、简单的逻辑程序、函数等等还可以让你的 CSS嵌套编写，看起来更加舒适。常用的CSS预处理语言有 Sass 、 Less 、 Stylus。

响应式布局设计

指的是仅用一套代码就能实现在不同屏幕下有不用的显示结果。（会根据场景进行调整）

实现方式

• 媒体查询

@media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}
@media screen (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 20px;
  }
}

• 百分比（%）需要设置每个元素才能实现响应式布局，较为复杂，不建议使用。

  • 子元素宽高依赖于父元素的宽高。
  • 子元素的margin、padding设置百分比，无论水平、垂直，都是相对于父元素的 width。
  • border-radius设为百分比，则是相对于自身来说的。

• rem： 先利用媒体查询更改不同分辨率下的 根元素的 font-size 值，然后将 rem 设置为 width 的十分之一。

• vw/vh：表示视图的宽度/高度。一般都是使用vw。

回流（重排）、重绘

回流：布局的时候，计算每个盒子在页面的大小和位置

重绘：计算完盒子大小与位置后，会根据盒子自身的特性进行绘制

回流一定会触发重绘，重绘不会触发回流。

回流的触发：

• 添加或删除DOM元素
• 元素位置发生变化
• 盒子模型属性发生变化
• 元素内容发生变化
• 可视化窗口变化
• 页面渲染

重绘的触发：

• 改变文字颜色
• 改变文本方向

如何减少：

• 减少DOM的增删
• 对于一些复杂的动画，尽量使它脱离文档流（position：fixed| absolute），减少对其他元素的影响
• 避免设置多项内联样式
• 避免使用 table 布局，table内的每个元素及内容改动，都会导致整个 table 重新计算
• 避免使用 CSS 的 JavaScript 表达式

css提高性能的方法

• 尽量将样式写在单独的 css 文件中，然后再引用。
• 不要使用 @import。会影响浏览器的并行下载，增加页面加载的延迟事件。
• 避免使用多层选择器，会增加匹配时间。
• 使用 webpack、rollup 等 模块化工具对 css 代码进行压缩。
• 减少使用高性能属性： float、定位。
• 使用精灵图，减少http请求
• 将小图片转化为 base64编码
• 减少重排、重绘操作
• 增加继承操作，减少属性编写

像素

• 设备像素/物理像素(dp) ： 设备能控制显示的最小物理单位，单位为 pt 。
• 设备独立像素/逻辑像素(dip) ：设备独立像素是与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素。一个设备独立像素里可能包含1个或者多个物理像素点，包含的越多则屏幕看起来越清晰。
• 设备像素比(dpr） ：代表设备独立像素到设备像素的转换关系，设备像素比（dpr) = 设备像素 /设备独立像素
• 像素密度(ppi) :在一定尺寸的物理屏幕上显示像素的数量，单位一般为dip

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

• zoom:可以改变页面上元素的真实尺寸。zoom:50%或zoom:0.5，均表示缩小到原来的一半。
• text-size-adjust:none ：这样设置之后会有一个问题，就是当你放大网页时，一般情况下字体也会随着变大，而设置了以上代码后，字体只会显示你当前设置的字体大小，不会随着网页放大而变大了，不建议全局应用该属性，而是单独对某一属性使用。
• ‐webkit‐transform:scale() :使用该属性进行缩放。但是该属性只对定义了宽高的元素生效。

区别 ：

• zoom是非标准属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排
• text-size-adjust:none 对谷歌浏览器有版本要求，在27之后，就取消了该属性的支持，并且只对英文、数字生效
• ‐webkit‐transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化

场景应用

三角形

元素宽高设为 0 ，若三角形角朝上，则设置 右、下、左边框。然后将左右边框设为透明。

div{
      width: 0;
      height: 0;
      border-right: 50px solid transparent;
      border-bottom: 50px solid skyblue;
      border-left: 50px solid transparent;
    }

扇形

元素宽高设为 0，设置透明外边框，然后设置百分百的 border-radius。在将四边任意一边的边框设为有颜色的即可（每一边对应不同指向的扇形）

div{
      width: 0;
      height: 0;
      border: 100px solid transparent;
      border-radius: 100%;
      border-top-color: pink;
    }

圆形

div{
      width: 100px;
      height: 100px;
      border-radius: 100px;
      background-color: skyblue;
    }

半圆

div{
      width: 100px;
      height: 50px;
      border-radius: 0 0 100px 100px;
      background-color: skyblue;
    }

直角梯形

div{
      height: 0;
      width: 100px;
      border-bottom: 100px solid skyblue;
      border-right: 5 0px solid transparent;
    }

等腰梯形

div{
      width: 100px;
      height: 0;
      border-bottom: 50px solid skyblue;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
    }

\