CSS 面试题

盒模型

标准盒模型

box-sizing: content-box;
设定宽度 = 内容宽度
实际宽度 = 内容 + 内边距 + 边框

IE盒模型

box-sizing: border-box;
设定宽度 = 内容 + 内边距 + 边框
实际宽度 = 内容 + 内边距 + 边框（设定宽度）

选择器优先级

优先级：!important > style > id > class

内联样式：1000
ID 选择器：100
class 选择器、属性选择器、伪类选择器：10
标签、伪元素：1

元素隐藏

display: none; 不占空间无法点击重排不继承
visibility: hidden; 占空间无法点击重绘继承
opacity: 0 占空间可以点击重绘不继承

重排 & 重绘

重排

元素的几何信息（元素在视口内的位置和尺寸大小），浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。

添加、删除、更新 DOM 节点
display: none;
元素尺寸改变
窗口尺寸改变，resize 事件触发

重绘

将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。

改变背景色
改变字体颜色
outline、visibility 等

减少重排和重绘

样式集中改变，使用添加新样式类名 .class 或 cssText
批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量
使用 absolute 或 fixed 使元素脱离文档流
开启 GPU 加速，利用 CSS 属性 transform 等

margin

纵向重叠

相邻元素的 margin-top 和 margin-bottom 会发生重叠
空白内容的 <p></p> 也会重叠

负值问题

margin-top 和 margin-left 负值，元素向上/向左移动
margin-bottom 负值，自身位置不变，下方元素上移
margin-right 负值，自身位置不变，右侧元素左移

BFC

概念

块级格式化上下文，指的是一块独立渲染区域
内部元素的渲染不会影响边界以外的元素

创建

float 不为 none
position 为 absolute 或 fixed
overflow 不为 visible
display 为 flex grid inline-block 等

作用

清除浮动
解决高度塌陷
解决外边距合并

清除浮动

父元素固定高度
父元素定义 overflow: hidden; （创建BFC）
添加空标签法（同下）
伪元素法

css

.clearfix::after {
  content: '';
  display: block;
  clear: both;
  height: 0;
}

两栏布局

float + margin: 左侧浮动，固定宽度；右侧设置 margin-left
float + BFC: 左侧浮动，固定宽度；右侧设置 BFC
absolute+ margin: 左侧绝对定位，固定宽度；右侧设置 margin-left
flex: 左侧固定宽度；右侧设置 flex: 1

三栏布局

绝对定位

中栏使用 margin: 0px 150px 预留出左右栏位置
左栏与右栏绝对定位到预留位置

圣杯布局

左中右三个部分浮动
container 使用 padding 留出左右空间
中栏设置宽度为 width: 100%;
左栏使用 margin-left: -100%; + relative 与中栏同行
右栏使用 margin-right: -150px; 与中栏同行

html

<div class="container">
  <div class="center">Center</div>
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

双飞翼布局

div 包裹中栏
左中右三个部分浮动
container 设置宽度为 width: 100%;
中栏使用 margin 留出左右空间
左栏使用 margin-left: -100%; 与中栏同行
右栏使用 margin-left: -150px; + relative 与中栏同行

html

<div class="container">
  <div class="center">Center</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div

水平居中 & 垂直居中

水平居中

inline 元素：text-align: center;
block 元素：margin: auto;
absolute 元素：left: 50%; margin-left 负值（宽度一半）
absolute 元素：left: 50%; translateX(-50%);

垂直居中

inline 元素：line-height 的值等于 height 值
absoulte 元素：top: 50% + margin-top 负值（高度一半）
absoulte 元素：top: 50% + translateY(-50%)
absoulte 元素：top, left, bottom, right = 0 + margin: auto （定宽高）

继承 line-height

父元素的 line-height 写了具体数值，比如 30px，则子元素 line-height 继承该值
父元素的 line-height 写了比例，比如 1.5 或 2，则子元素 line-height 也是继承该比例
父元素的 line-height 写了百分比，比如 200%，则子元素 line-height 继承的是父元素 font-size * 200% 计算出来的值。

flex 布局

flex: 1

flex-grow: 1 ：默认为 0 ，如果存在剩余空间，元素也不放大。设置为 1 代表会放大。
flex-shrink: 1 ：默认为 1 ，如果空间不足，元素缩小。
flex-basis: 0% ：默认值为 auto，该属性定义在分配多余空间之前，元素占据的主轴空间。

CSS 面试题 ​

盒模型 ​

选择器优先级 ​

元素隐藏 ​

重排 & 重绘 ​

margin ​

BFC ​

清除浮动 ​

两栏布局 ​

三栏布局 ​

水平居中 & 垂直居中 ​

继承 line-height ​

flex 布局 ​

预览: