1.让元素在容器中水平居中

1. 内联的元素，内联的块， inline inline-block

实现：给父容器加 text-align：center

1. 块元素水平居中

实现：给当前元素加 #box{ margin:0 auto}
注：针对的都是水平操作，垂直后续讲。

2. 规范

1. 固定嵌套规则:

ul、li、ol、li
dl、dt、dd
table、tr、thead、tfoot
tr、td、th

1. 限制嵌套规则

   …

   等标签不允许嵌套任何块标签
   标签不允许嵌套标签
   块标签允许嵌套内联标签，内联标签不允许嵌套块标签。

   3. CSS雪碧图

   好处：

2. 请求次数少，性能好

3. 图片的质量小，性能好，请求快

注： 雪碧图主要针对小图标操作的
要单独给雪碧图加一个容器

4. 最小和最大宽高

min-height min-width
max-height max-width
width height

5. 添加省略号

white-space:nowrap; 让文字不折行
overflow:hidden;
text-overflow:ellipsis; 添加省略号
多行：hack写法
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow: hidden;

6. 浮动

脱离文档流
float:left; 左浮动：会沿着父容器靠左排列，如果之前有浮动的元素会挨着之前的浮动元素进行左排列。
float:right;右浮动：会沿着父容器靠右排列，如果之前有浮动的元素会挨着之前的浮动元素进行右排列。
float：none(默认)
注：

1. 只会影响后面的元素
2. 浮动对内容默认提升半层
3. 默认宽根据内容确定 (块和内联都可以浮动，块浮动后如果没有写宽就不再继承父容器的宽，由内容撑开。)
4. 父容器如果放不下了，就换行排列

7. 清除浮动

不想让浮动影响到元素
clear属性： 在正常文档流下 left、 right、 both 左右都清除

嵌套的时候，很容易出现浮动的问题，一定要解决这个问题
要实现，子容器浮动不影响父容器：
解决嵌套的浮动问题：

1. 固定宽高：高度固定，不宜扩展自适应高
2. 父元素浮动：会影响后面的布局
3. overflow：hidden

BFC规范实现的 , 不适合做那种需要溢出的效果

1. display : inline-block

   BFC规范实现的 , 会影响到默认的排列方式

2. 设置空标签 :

1. after伪类

:after{} : 往容器的最后添加一些文本
:before{} 往容器的前面添加一些文本
注：添加元素通过 content : ‘值’，填进来的是一个内联元素。
注：clear:both;能生效的话，必须是一个块元素。
清除浮动最优的方案：after伪类的方式
inline inline-block都还可以让元素左右排列，不适合做布局。