1.说说你对盒子模型的理解，如何切换
当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，
将所有元素表示为一个个矩形的盒子
• content，即实际内容，显示文本和图像
• boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三
部分组成
• padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒
子的 background 属性影响
• margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域
盒子模型可以分成：
• W3C 标准盒子模型,是浏览器默认的盒子模型
o 盒子总宽度 = width + padding + border + margin;
o 盒子总高度 = height + padding + border + margin
o 也就是，width/height 只是内容高度，不包含 padding 和 border 值
• IE 怪异盒子模型
o 盒子总宽度 = width + margin;
o 盒子总高度 = height + margin;
o 也就是，width/height 包含了 padding 和 border 值
Box-sizing
定义了引擎应该如何计算一个元素的总宽度和总高度
• content-box 默认值，元素的 width/height 不包含 padding，border，与标准盒子
模型表现一致
• border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一
致
• inherit 指定 box-sizing 属性的值，应该从父元素继承
2. css 选择器有哪些？优先级？哪些属性可以继承？
css 选择器
• id 选择器（#box），选择 id 为 box 的元素
• 类选择器（.one），选择类名为 one 的所有元素
• 标签选择器（div），选择标签为 div 的所有元素
• 后代选择器（#box div），选择 id 为 box 元素内部所有的 div 元素
• 子选择器（.one>one_1），选择父元素为.one 的所有.one_1 的元素
• 相邻同胞选择器（.one+.two），选择紧接在.one 之后的所有.two 元素
• 群组选择器（div,p），选择 div、p 的所有元素 • 还有一些使用频率相对没那么多的选择器：
• 伪类选择器
o :link：选择未被访问的连接
o :visited：选取已被访问的链接
o :active：选择活动链接
o :hover：鼠标指针浮动在上面的元素
o :focus：选择具有焦点的
o :first-child：父元素的首个子元素
• 伪元素选择器
o :first-letter ：用于选取指定选择器的首字母
o :first-line ：选取指定选择器的首行
o :before : 选择器在被选元素的内容前面插入内容
o :after : 选择器在被选元素的内容后面插入内
• 属性选择器
o [attribute]选择带有 attribute 属性的元素
o [attribute=value]选择所有使用 attribute=value 的元素
o [attribute~=value]选择 attribute 属性包含 value 的元素
o [attributel=value]:选择 attribute 属性以 value 开头的元素
• 在 CSS3 中新增的选择器有如下：
o 层次选择器（p~ul），选择前面有 p 元素的每个 ul 元素
o 伪类选择器
▪ :first-of-type 表示一组同级元素中其类型的第一个元素
▪ :last-of-type 表示一组同级元素中其类型的最后一个元素
▪ :only-of-type 表示没有同类型兄弟元素的元素
▪ :only-child 表示没有任何兄弟的元素
▪ :nth-child(n) 根据元素在一组同级中的位置匹配元素
▪ :nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元
素中的位置，从末尾开始计数
▪ :last-child 表示一组兄弟元素中的最后一个元素
▪ :root 设置 HTML 文档
▪ :empty 指定空的元素
▪ :enabled 选择可用元素
▪ :disabled 选择被禁用元素
▪ :checked 选择选中的元素
▪ :not(selector) 选择与 <selector> 不匹配的所有 元素
• 属性选择器
o [attribute*=value]:选择 attribute 属性值包含 value 的所有元素选择
o [attribute^=value]: attribute 属性开头为 value 的所有元素
o [attribute$=value]:选择 attribute 属性结尾为 value 的所有元素
优先级
内联 > ID 选择器 > 类选择器 > 标签选择器
• 如果存在内联样式，那么 A = 1, 否则 A = 0 • B 的值等于 ID 选择器出现的次数
• C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数
• D 的值等于 标签选择器 和 伪元素 出现的总次数
比较规则：
• 从左往右依次进行比较 ，较大者优先级更高
• 如果相等，则继续往右移动一位进行比较
• 如果 4 位全部相等，则后面的会覆盖前面的
内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用!important
继承属性
• 字体系列属性
o font:组合字体
o font-family:规定元素的字体系列
o font-weight:设置字体的粗细
o font-size:设置字体的尺寸
o font-style:定义字体的风格
o font-variant:偏大或偏小的字体
• 文本系列属性
o text-indent：文本缩进
o text-align：文本水平对刘
o line-height：行高
o word-spacing：增加或减少单词间的空白
o letter-spacing：增加或减少字符间的空白
o text-transform：控制文本大小写
o direction：规定文本的书写方向
o color：文本颜色
• 元素可见性
o visibility
• 表格布局属性
o caption-side：定位表格标题位置
o border-collapse：合并表格边框
o border-spacing：设置相邻单元格的边框间的距离
o empty-cells：单元格的边框的出现与消失
o table-layout：表格的宽度由什么决定
• 列表属性
o list-style-type：文字前面的小点点样式
o list-style-position：小点点位置
o list-style：以上的属性可通过这属性集合
• 引用
o quotes：设置嵌套引用的引号类型
• 光标属性
o cursor：箭头可以变成需要的形状
继承中比较特殊的几点：
• a 标签的字体颜色不能被继承 • h1-h6 标签字体的大下也是不能被继承的
无继承的属性
• display
• 文本属性：vertical-align、text-decoration
• 盒子模型的属性：宽度、高度、内外边距、边框等
• 背景属性：背景图片、颜色、位置等
• 定位属性：浮动、清除浮动、定位 position 等
• 生成内容属性：content、counter-reset、counter-increment
• 轮廓样式属性：outline-style、outline-width、outline-color、outline
• 页面样式属性：size、page-break-before、page-break-after
3. 元素水平垂直居中的方法有哪些？如果元素不定宽高呢？
实现元素水平垂直居中的方式：
• 使用 Flexbox 布局：
o 将父容器的 display 属性设置为 flex，
o 然后使用 align-items 和 justify-content 属性分别设置为 center，
• 使用绝对定位和负边距：
o 父级设置为相对定位，子级绝对定位，
o 并将 left 和 top 属性设置为 50%，
o 然后使用负边距将子级向左和向上移动自身宽度和高度的一半
o 不要求父元素的高度
• 使用 table 布局：
o 设置父元素为 display:table-cell，
o 子元素设置 display: inline-block。
o 父元素利用 vertical 和 text-align 可以让所有的行内块级元素水平垂直居中
o vertical-align: middle；
o text-align: center
• 使用 grid 布局：
o 将父容器的 display 属性设置为 grid，
o 并使用 justify-items 和 align-items 属性分别设置为 center，
• 使用 transform 和 translate 方法：
o 不需要知道自身元素的宽高
o 父级设置为相对定位，子级绝对定位
o translate(-50%, -50%)将子级水平和垂直方向上平移自身宽度和高度的一半
• 利用定位+margin:auto
o 父级设置为相对定位，子级绝对定位
o 四个定位属性的值都设置了 0
o 如果子级没有设置宽高，则会被拉开到和父级一样宽高
o 子元素设置了宽高，实际上子级的虚拟占位已经撑满了整个父级
o margin：auto 就可以上下左右都居中
• 内联元素居中布局
o 水平居中
▪ 行内元素可设置：text-align: center
▪ flex 布局设置父元素：display: flex; justify-content: center
o 垂直居中
▪ 单行文本父元素确认高度：height === line-height
▪ 多行文本父元素确认高度：display: table-cell; vertical-align: middle
• 块级元素居中布局
o 水平居中
▪ 定宽: margin: 0 auto
▪ 绝对定位+left:50%+margin:负自身一半
o 垂直居中
▪ position: absolute 设置 left、top、margin-left、margin-top(定高)
▪ display: table-cell
▪ transform: translate(x, y)
▪ flex(不定高，不定宽)
▪ grid(不定高，不定宽)，兼容性相对比较
4. 怎么理解回流跟重绘？什么场景下会触发？如何减少回流和重回
Html 的渲染流程：dom 节点 dom 树 css 生成 OM Html 分为 dom+css
回流（重排）：获取尺寸大小 生成几何 重绘：根据像素渲染 回流一定重绘
• 回流： 布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
• 重绘： 当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制
浏览器解析渲染机制：
⚫ 解析 HTML，生成 DOM 树，解析 CSS，生成 CSSOM 树
⚫ 将 DOM 树和 CSSOM 树结合，生成渲染树(Render Tree)
⚫ Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
⚫ Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
⚫ Display:将像素发送给 GPU，展示在页面上
回流触发时机
• 添加或删除可见的 DOM 元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
• 页面一开始渲染的时候（这避免不了）
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
重绘触发时机
• 触发回流一定会触发重绘
• 颜色的修改
• 文本方向的修改
• 阴影的修改
减少回流和重回
• 想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
• 避免设置多项内联样式
• 应用复杂的元素动画，使用 position 属性 fixed 值或 absolute 值
• 避免使用 table 布局，每个元素的大小以及内容的改动，导致整个 table 的重新计算
• 使用 css3 硬件加速，可以让 transform、opacity、filters 这些动画不会引起回流重绘
• 避免使用 CSS 的 JavaScript 表达式
5. 什么是响应式设计？响应式设计的基本原理是什么？如何做？
适配 rem（根元素字体大小） em（父元素字体大小）媒体查询 vw/vh（性能问题） %
响应式网站设计 是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环
境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
响应式设计的基本原理 是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，
页面头部必须有 meta 声明 viewport
属性对应：
• width=device-width: 是自适应手机屏幕的尺寸宽度
• maximum-scale:是缩放比例的最大值
• inital-scale:是缩放的初始化
• user-scalable:是用户的可以缩放的操作
实现响应式布局的方式有如下：
• 媒体查询
o 设置不同类型的媒体条件，并根据对应的条件，
o 给相应符合条件的媒体调用相对应的样式表
o 当视口在 375px - 600px 之间，设置特定字体大小 18px
@media screen (min-width: 375px) and (max-width: 600px) {
body {
font-size: 18px;
}
}
• 百分比
o 当浏览器的宽度或者高度发生变化时，通过百分比单位
o 浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果
• vw/vh
o vw 表示相对于视图窗口的宽度，
o vh 表示相对于视图窗口高度。
o 任意层级元素，在使用 vw 单位的情况下，1vw 都等于视图宽度的百分之一
• rem
o rem 是相对于根元素 html 的 font-size 属性
o 默认情况下浏览器字体大小为 16px，此时 1rem = 16px
6. 如果要做优化，CSS 提高性能的方法有哪些？
• 内联首屏关键 CSS
o 使浏览器在下载完 html 后就能立刻渲染
o 注意：较大的 css 代码并不合适内联（初始拥塞窗口、没有缓存）
• 异步加载 CSS
o 使用 javascript 将 link 标签插到 head 标签最后
o 设置 link 标签 media 属性为 noexist
▪ 浏览器认为当前样式表不适用当前类型，会在不阻塞页面渲染的情
况下再进行下载。
▪ 加载完成后，将 media 的值设为 screen 或 all，从而让浏览器开始解
析 CSS
o 通过 rel 属性将 link 元素标记为 alternate 可选样式表，
▪ 加载完成之后，将 rel 设回 stylesheet
• 资源压缩
o 利用 webpack、gulp/grunt、rollup 等模块化工具
o 将 css 代码进行压缩，使文件变小，大大降低了浏览器的加载时间
• 合理使用选择器
o 不要嵌套使用过多复杂选择器，最好不要三层以上
o 使用 id 选择器就没必要再进行嵌套
o 通配符和属性选择器效率最低，避免使用
• 减少使用昂贵的属性
o 如 box-shadow/border-radius/filter/透明度/:nth-child 等，
o 在页面发生重绘的时候，昂贵属性会降低浏览器的渲染性能
• 不要使用@import
o css 样式文件有两种引入方式，一种是 link 元素，另一种是@import
o @import 会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增
添了额外的往返耗时
o 而且多个@import 可能会导致下载顺序紊乱
)
