1.display:none与visibility:hidden的区别
(1)从效果上来区别： display:none 隐藏元素后不在占据空间位置（相当于设置了元素的宽高为0，overflow：hidden） visibility:hidden 隐藏元素后仍然占据空间位置（相当于将元素的透明度设置为0）
（2）从CSS3的transition支持情况区别： display 不支持transition，visibility支持transition，因此可以使用visibility配合transition来实现元素的淡入淡出
（3）从子元素来区别： 设置了 visibility:hidden的子元素相当于继承了父元素的这个属性，可以单独设置visibility：visible来显示某子元素； display：none相当于将整体的宽高设置为0，overflow：hidden了所以不能单独控制子元素的显示和隐藏
2.什么是BFC？BFC的原理是什么？BFC的约束规则？如何实现BFC？BFC的作用？
（1） 什么是BFC？
BFC（Block formartting contexts)块级格式化上下文。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
（2）BFC的原理是什么？
BFC的原理就是通过一些css属性设置，使当前盒子形成一个相对独立的容器，使其子元素不影响盒子外面的元素，外面的元素也不能影响其子元素。
（3）BFC的约束规则？
a.BFC内部的box会在垂直方向上一个接一个的排列；
b.垂直方向的距离由margin决定（相邻的两个box的margin会重叠，与方向无关）
c.每个box的margin的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
d.BFC的区域不会与浮动元素的区域重叠；
e.计算BFC的高度时，浮动子元素也参与计算；
f.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
（4）BFC的实现？(以下条件之一)
a.根元素;
b.float的值不为none;
c.overflow的值不为visible;
d.display的值为inline-block、table-cell、table-caption;
e.position为fixed或absolute
（5）BFC的作用？
a.防止margin重叠（塌陷）
b.清除元素内部浮动;
c.实现自适应多栏布局的；
3.元素水平垂直居中的方法有哪些？
（1）水平居中
a.行内元素的水平居中，给其父元素设置text-align:center;
b.块级元素的水平居中，设置元素的属性margin:0 auto;
c.若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:
.parent{
width: -moz-fit-content;
width: -webkit-fit-content;
width:fit-content;
margin:0 auto;
}
d.使用flex布局实现元素水平居中,子元素设置如下：
.son{
display:flex;
justify-content:center;
}
（2）垂直居中
a.单行文本或图片的垂直居中，设置元素的line-height为元素高度即可
b.若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.
.parent::after, .son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:'';
height:100%;
}
c.flex布局
.parent {
display: flex;
align-items: center;
}
（3）水平垂直居中 请参考 CSS实现水平垂直居中的1010种方式（史上最全）
4.css3新特性有哪些？
（1）实现了圆角（border-radius)
（2）阴影（box-shadow、text-shadow)
（3）线性渐变（gradient）
（4）新增了动画
（5）新增了更多元素选择器
5.盒模型
（1）盒模型的概念 文档中的每个元素都被描述成矩形的盒子，渲染引擎的目的就是判定盒子的大小、属性及位置等。标准的盒模型由margin、border、padding、content组成。
（2）常用盒模型的种类 a.w3c标准盒模型，width=content的宽度 b.IE怪异模式盒模型，width=content+padding+border
(3)css3改变盒模型的属性 box-sizing:content-box 标准盒模型 box-sizing:border-box IE盒模型
6.css的定位机制有哪些？
（1）普通文档流（css默认文档流）
从左右，从上往下布局元素，由块级元素（垂直方向布局）和行内元素（水平方向布局）组成
（2）浮动
a.使用float:left/right使元素浮动；
b.浮动元素不在普通文档流中占据空间，但会影响后面浮动元素的布局；
c.左浮动的元素从左往右挨个布局，右浮动反之；
(3)定位
元素可使用position属性进行定位，且所有浏览器都支持position属性。
元素的定位的position属性值如下：
| 值 | 作用 |
|---|---|
| static | 没有定位，遵循普通文档流，默认的定位方式 |
| absolute | 绝对定位，位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于根元素，必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离 |
| relative | 相对定位，位置相对于相对其正常位置（position：static时的位置），必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离 |
| fixed | 固定定位，位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动 |
| sticky | 粘性定位，能实现网页在滚动到某个位置时固定某元素定位的效果，像ralative和fixed定位的切换 |
postion：sticky的用法说明
7.css常见布局
参考 几种常见的CSS布局
8.浮动
（1）浮动带来的问题
a.父元素的高度无法被撑开，影响与父元素同级的元素
b.与浮动元素同级的非浮动元素（内联元素）会跟随其后
c.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
（2）清除浮动的方法
a.父级div定义height
b.最后一个浮动元素后加空div标签 并添加样式clear:both。
c.包含浮动元素的父标签添加样式overflow为hidden或auto。
d.父级div定义zoom
