目录

1. 标准盒模型和怪异盒模型
2. link标签和import标签的区别
3. flex布局
4. BFC
5. 垂直居中的方法
6. 块元素和行元素
7. visibility=hidden, opacity=0，display:none
8. 双边距重叠问题（外边距折叠）
9. 清除浮动
10. css3新特性
11. float的元素，display是block
12. 三栏布局的实现方式
13. css新属性
14. line-height和height的区别
15. 设置一个元素的背景颜色，背景颜色会填充哪些区域？
16. inline-block、inline和block的区别
17. overflow的原理
18. 相对布局和绝对布局，position:relative和obsolute
19. CSS如何实现一个最大的正方形
20. 一行水平居中，多行居左
21. 实现左右等高布局

1. 标准盒模型和怪异盒模型

1. 标准盒模型（content-box）

元素的总宽度width=content

2. 怪异盒模型 （box-sizing:border-box）

元素的总宽度width=content+padding+border

2. link标签和import标签的区别

link属于html标签，而@import是css提供的
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。

link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。

link方式样式的权重高于@import的。
建议用link引入css

3. flex布局

容器的属性

1. flex-direction属性
属性决定主轴的方向（即项目的排列方向）。

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2. flex-wrap属性
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

• nowrap（默认）：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方

3. flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

4. justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。

flex-start（默认值）：左对齐
flex-end：右对齐

center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5. align-items属性
align-items属性定义项目在交叉轴上如何对齐。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

项目的属性

1. order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2. flex-grow
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

负值对该属性无效。
4. flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
5. flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
6. align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

4. BFC

直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。
BFC区域不会与float box重叠

BFC是页面上的一个独立容器，子元素不会影响到外面

计算BFC的高度时，浮动元素也会参与计算
BFC条件
float不为none的元素

position为fixed和absolute的元素

display为inline-block、table-cell、table-caption，flex，inline-flex的元素

overflow不为visible的元素

例子

1. 外边距合并
2. 自适应两栏布局
   （左边盒子浮动 右边BFC）
3. 父元素没有高度 子元素浮动导致的塌陷

5. 垂直居中的方法

1. margin:auto法

margin:0 auto

2. margin负值

.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height的一半*/

margin-left: -240px; /*width的一半*/
}

补充：其实这里也可以将marin-top和margin-left负值替换成，
transform：translateX(-50%)和transform：translateY(-50%)
4. flex
将父元素设置为display:flex，并且设置align-items:center;
justify-content:center;

6. 块元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度
行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失
效。

7. visibility=hidden, opacity=0，display:none

• opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
• visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
• display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

8. 双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠
折叠的结果为：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

9. 清除浮动

1.使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
2.使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
3. 给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
4. 使用邻接元素处理
什么都不做，给浮动元素后面的元素添加clear属性。
5. 使用CSS的:after伪元素
结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

10. css3新特性

CSS3边框如border-radius，box-shadow等；
CSS3背景如background-size，background-origin等；
CSS3 2D，3D转换如transform等；
CSS3动画如animation等

11. float的元素，display是block

12. 三栏布局的实现方式

两列定宽一列自适应
1.使用float+margin:
给div设置float：left，left的div添加属性margin-right：left和center的间隔px,right的div添加属性margin-left：left和center的宽度之和加上间隔
2. 使用float+overflow
给div设置float：left，再给right的div设置overflow:hidden。这样子两个盒子浮动，另一个盒子触发bfc达到自适应
3. 使用position
父级div设置position：relative，三个子级div设置position：absolute，这个要计算好盒子的宽度和间隔去设置位置，兼容性比较好
4. 使用table实现
父级div设置display：table，设置border-spacing：10px//设置间距，取值随意,子级div设置display:table-cell，这种方法兼容性好，适用于高度宽度未知的情况，但是margin失效，设计间隔比较麻烦
5. flex实现
parent的div设置display：flex；left和center的div设置margin-right；然后right 的div设置flex：1；这样子right自适应，但是flex的兼容性不好
6. grid实现
parent的div设置display：grid，设置grid-template-columns属性，固定第一列第二列宽度，第三列auto，

13. css新属性

• 在布局方面新增了flex布局
• 在选择器方面新增了例如first-of-type,nth-child等选择器
• 在盒模型方面添加了box-sizing来改变盒模型
• 在动画方面增加了animation，2d变换，3d变换等
• 在颜色方面添加透明，rbga等
• 在字体方面允许嵌入字体和设置字体阴影，最后还有媒体查讯等

14. line-height和height的区别

line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，height一般是指容器的整体高度

15. 设置一个元素的背景颜色，背景颜色会填充哪些区域？

background-color设置的背景颜色会填充元素的content、padding、border区域

16. inline-block、inline和block的区别

• Block是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding水平垂直方向都有效。
• Inline：设置width和height无效，margin在竖直方向上无效，padding在水平方向垂直方向都有效，前后无换行符
• Inline-block：能设置宽度高度，margin/padding水平垂直方向 都有效，前后无换行符

17. overflow的原理

当元素设置了overflow样式且值部位visible时，该元素就构建了一个BFC，BFC在计算高度时，内部浮动元素的高度也要计算在内，也就是说技术BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，所以达到了清除浮动的目的

创建BFC条件(满足一个):

• float的值不为none；
• overflow的值不为visible；
• position的值为fixed / absolute；
• display的值为table-cell / table-caption / inline-block / flex / inline-flex。

18. 相对布局和绝对布局，position:relative和obsolute

相对定位relative：
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位absolute：

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

19. CSS如何实现一个最大的正方形

用 padding-bottom:100% 撑起来，padding-top: 100%;也同理

20. 一行水平居中，多行居左

• p 标签设置为display:inline-block，并让 p 居中，p 中的文字左对齐：(p 的父级 text-align: center; p 自身 text-align: left;)
• p 的宽度根据文字的宽度伸缩，当文字为一行时，则 p 的宽度小于 li 的宽度，居中。当大于一行时，p 的宽度和 li 的宽度是一致的，文字就居左了。

21. 实现左右等高布局

点击跳转

22. css扇形

23. 高度自适应的水平垂直居中布局