CSS3有哪些新能特性？
新增特性：
- 圆角
border-radius - 阴影
box-shadow - 文字特效
text-shadow - 线性渐变
gradient - 变形
transform
增加了css选择器、媒体属性、多栏布局
媒体查询在CSS2中已经存在，只不过只能作用于style和link标签上
css选择器的优先级顺序？
内联样式 > ID选择器 > 类选择器 > 标签选择器
通过CSS有哪些方式可以实现隐藏页面上的元素？
| 方式 | 说明 |
| opactiy: 0 | |
| visibility: hidden | |
| overflow: hidden | |
| display: none | |
| transform: scale(0,0) | |
| z-index: -9999 | |
| left: -9999 |
px、em、rem之间有什么区别？
- px：绝对单位。代表像素数量，页面会按照给出的精确像素进行展示
- em：相对单位。默认的基准点位父元素的字体大小，如果自身定义了字体大小则按照自身的来算
- rem：相对单位。可以理解为root em，即基准点为根节点<html>的字体大小
在CSS中有哪些定位方式？position的属性？
static：默认值，没有定位，元素正常出现在文档流中
relative：相对定位，相对于其在普通流中的位置进行定位
absolute：绝对定位，相对于最近的非static的祖先元素进行定位
fixed：固定定位，相对于浏览器窗口进行定位
sticky：粘性定位，像relative和fixed的结合，它的父元素在视口区域，当前元素就以fixed的方式进行定位，否则就以relative进行定位
水平垂直居中的方法？
未知宽高：position + transform
div{
position:absolute;
left:50%;
top:50%;
tansform:translate(-50%, -50%);
}
已知宽高：position + margin
div{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
argin-left: -100px;
margin-top: -100px;
}
绝对定位方法：top left bottom right为0
div{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: 0;
}
flex布局方法
div{
display: flex;
justify-content: center;
align-items: center;
}
转成行级块，给父盒子设置text-align：center
.father {
text-align: center;
}
.child {
width: 100px;
height: 100px;
display: inline-block;
}
CSS属性content有什么作用？
css的content属性专门应用在after / before伪元素上，用于插入生成内容，可以配合自定义字体显示特殊符号
transition 和 margin 的百分比是根据什么计算的？（transition 和 margin 有什么不同？）
transition是根据自身宽度，margin是根据参照物
rgba() 和 opacity 有什么不同？
- opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色
- 设置rgba的元素，子元素不会继承透明效果
解释一下浮动及其工作原理
浮动元素脱离文档流，不占据空间。
浮动元素碰到包含它的边框或者浮动元素的边框停留
浮动元素引起的问题？
- 父元素的高度无法撑开
- 与浮动元素同级的，非浮动元素会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动。否则会影响页面显示的结构
清除浮动的方式？
- 父级元素定高，定义height
- 父级元素增加 overflow: hidden
- 结尾处增加 br
<br style="clear:both"/> -
父级元素增加伪元素 :after
.clearfix:after{ content: ''; display: block; clear: both; visibility: hidden; height: 0; }
clear 实现清除浮动的原理？
原理：clear是css中的定位属性，规定元素的那一侧不允许浮动元素，clear: both 就是规定在左右两侧都不允许浮动元素
怎么理解盒子模型？
浏览器的渲染引擎对网页文档进行布局时，会按照”CSS基础盒模型“ （CSS Basic Box Model）标准，将文档中的所有元素都表示成一个个矩形的盒子，再用CSS决定这些盒子的大小尺寸、显示位置、以及其他属性（如颜色、背景、边框等）。
盒模型由以下几部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）
标准盒模型 和 怪异盒模型有哪些区别？
两者的区别主要提现在元素尺寸的表示上。
盒模型的指定
在CSS3中，可以通过设置box-sizing的值：
- content-box 标准盒模型
- border-box 怪异盒模型
标准盒模型 box-sizing: content-box;
标准盒模型下，元素的宽（width）高（height）值即为盒模型中内容（content）实际宽高值
盒子宽度 = border-left + padding-left + width + padding-right + border-right
占据页面宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
怪异盒模型 box-sizing: border-box;
在怪异盒模型下，元素的宽（width）高（height）不是 content的实际宽高，而是去除margin后，元素占用区域的宽高
盒子宽度 = width
盒子占据页面宽度 = margin-left + width + margin-right
盒模型中，content-box是标准，为什么经常使用border-box?
content-box是W3C的标准盒模型，元素的宽（width）高（height）指的是content区域的宽高。增加border、padding会把破坏布局
border-box是IE的怪异盒模型，元素的宽（width）高（height）指的是content宽高 + border + padding，在元素基础上添加border和padding，不会把破坏布局
什么是BFC？
BFC（Block Formatting Context），块级格式化上下文。是页面布局中的一种css渲染模式。相当于一个独立的布局容器。里面的元素和外部的元素相互不影响
怎么创建BFC？
- position值为 absolute 或 fixed
- float值不为 none
- overflow值不为visible
- display值为 inline-block、flex、inline-flex、grid、inline-grid
BFC的作用？
避免外边距重叠（两个相邻的盒子外边距重叠或父子盒子的外边距塌陷）
清除浮动
计算BFC高度时，浮动元素也会参与计算
什么外边距重叠？重叠的结果是什么？
外边距重叠就是margin-collaps
在css中，相邻的两个盒子的外边距可以结合成一个单独的外边距，这种合并外边距的方式称为折叠，所结合成的外边距成为折叠外边距
折叠结果计算规则：
- 两个相邻的外边距都是正数时，折叠结果取两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果取两者绝对值的较大值
- 两个外边距一正一负时，折叠结果取两者相加的和
浏览器是怎样解析css选择器的？
css选择器是从右向左解析的，为了避免对所有元素进行遍历
若从左向右匹配，发现不符合规则，需要回溯，会损失很多性能
若从右向左匹配，先找到最右节点，向上寻找，会筛选掉大量不符合条件的最右节点
谈谈对媒体查询的理解？
响应式适配，根据不同的屏幕尺寸，显示不同的效果
媒体查询由两个部分组成：
一个可选的媒体类型 (计算机屏幕screen、打印预览模式print、all所有设备)
零个或多个媒体功能限定表达式（max- 500px、min- 500px）
@media screen and (max- 767px) {
.container {
width: 100%;
}
}
@media screen and (min- 768px) and (max- 991px) {
.container {
width: 750px;
}
}
谈谈对flex的理解？
只需要声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器完成实际布局
flex-direction: 调整主轴方向
row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。
justify-content 主要用来设置主轴方向的对齐方式
flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。
align-items 用于调整侧轴的对齐方式
flex-start： 元素在侧轴的起始位置对齐。
flex-end： 元素在侧轴的结束位置对齐。
center： 元素在侧轴上居中对齐。
stretch： 元素的高度会被拉伸到最大（不给高度时, 才拉伸）。
align-content 用来设置多行的 flex 容器的排列方式
flex-start： 各行向侧轴的起始位置堆叠。
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-around： 各行在侧轴中平均分布。
space-between： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch：拉伸，不设置高度的情况下。
flex-wrap 属性控制 flex 容器是单行或者多行,默认不换行
nowrap： 不换行（默认），如果宽度溢出，会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。
display、visibility、opacity的区别？
display: none- dom结构：不会占据空间
- 事件监听：无法进行事件监听
- 性能：动态改变此属性，会引起重排。性能较差
- 继承：不会被子元素继承
- transition：不支持display
visibility: hidden- dom结构：会占据空间
- 事件监听：无法进行事件监听
- 性能：动态改变此属性，会引起重绘，性能较高
- 继承：会被子元素继承，子元素可以设置visibility: visible取消隐藏
- transition：visibility会立即显示，隐藏会延时
- opacity: 0
- dom结构：会占据空间
- 事件监听：可以进行事件监听
- 性能：不会引起重绘，性能较高
- 继承：会被子元素继承，子元素可以通过设置opacity: 1取消隐藏
- transition：opacity可以延时和隐藏
position的absolut与fixed有什么相同点和不同点？
相同：
- 让元素脱离文档流，不占据空间
- 改变行内元素呈现的方式，display被置为block
不同：
- absolut的根元素是可以设置的，而fixed的根元素固定为浏览器窗口
- 滚动网页的时候，fixed在浏览器窗口的位置是不会变化的
css伪类和伪元素
伪类：一般用于匹配元素特殊状态，例如：:checked、:hover
伪元素：用于创建一些不在DOM树中显示的元素，并为其添加样式，例如：:after、:before（注：伪元素无法注册事件，不能通过js控制伪元素）
伪类用单冒号表示：如:link、:visited、:hover、:active、:focus、:first-child、:last-child、:nth-child、:nth-last-child、:not()
伪元素用双冒号表示：如::fist-letter、::first-line、::before、::after
部分伪类解释：
:link 设置未被访问的链接样式 :visited 设置被访问的链接样式
:hover 设置鼠标悬浮的样式 :active 设置鼠标松开的样式 :focus 使用键盘移动页面焦点时的样式
伪类弥补了常规css选择器的不足，伪元素创建了一个虚拟容器
.clearfix:after{
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}