CSS深入浅出（一）

1、文档流

　　内联元素从左往右流动；块级元素从上往下流动，每个块级元素另起一行。

　　块级元素的高度由其内部的文档流元素的高度总和决定

2、套路

　　1.中文两端对齐（text-align: justify;）

姓名

联系方式

　　

　　2、打断单词换行（word-break:break-all;）

　　3、float横向布局

你是
谁

　　4、文字溢出

/一行文本溢出省略号显示/

1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0

/多行文本溢出省略号显示/

1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0

5、文字居中

1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0

6、去除margin相关Bug（在父元素上加boder或者padding）

7、全屏居中

1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0

8、padding-top:100%;设置长宽相等