1-3：盒子、浮动

1、 盒子模型--div

一个盒子占据de空间是边框 + 内边距 + 内容区域

width = （margin + border + padding）* 2 + content

// css中width和height指的是内容的宽度和高度，而不是盒子的宽度和高度

TIPs：网页就是多个盒子嵌套排列的结果。

内边距出现在内容区域的周围。

外边据是该元素与相邻元素之间的距离。

如果给元素定义边框，边框将出现在内外边距之间。

eg：下面这两个盒子，真实占有宽高，完全相同，都是302*302：

1） 内边距：（padding，顺时针）内容与边框之间的距离

padding-top，上：

padding-right，右：

padding-bottom，下：

padding-left，左：

// 综合属性：padding：30px 40px 50px 60px （空格隔开）

2） 外边据：（margin，上右下左）元素与其他元素之间的距离

margin-top：

margin-right：

   margin-botto：:

   margin-left：

（其他用法与padding一样）

面试题

margin的塌陷现象：

标准文档流中， margin不叠加，以较大的为准；

如果对两个盒子都设置了浮动属性，并且他们位于 水平位置，margin会叠加；

如果不在标准流，比如盒子都浮动了，那么两个盒子之间没有塌陷现象，间距叠加。

3） 盒子边框：（border，上右下左）

border-top： border-width：边框宽度

border-right： border-style：线型

border-bottom： border-color：颜色

border-left：

border：1px solid red；

粗细 线型 颜色

2、 标准文档流

1） 块状元素和行内元素

块状元素，容器级：霸占一行，不能与其他任何元素并列；

能接受宽高；

如果不设置宽度，那么宽度将默认变为父亲的100%。

行内元素：与其他行内元素并排；

不能设置宽高。默认的宽度就是文字的宽度。

TIPs：在HTML中，我们可以将标签分类为：文本级、容器级。

容器级：div、h系列、li、dt、dd（能接受宽高）

文本级：p、span、a、b、i、u、em（不能接受宽高）

在CSS中，分类和上面很像，就p不一样。

所有的文本级标签，都是行内元素，除了p， p是个文本级，但是个块级元素。

所有的容器级标签都是块级元素。

2） 块状元素和行内元素的相互转换

display：inline // 变为行内元素，不能设置宽高，可以和别人并排

block // 变为块状元素，能够设置宽高，无法和别人并排

css中一共有三种手段，是一个元素脱离标准文档流：浮动、绝对定位、固定定位

3、 浮动（float）

浮动是css里面布局用的最多的属性。

TIPs：一旦一个元素浮动了，将能够并排，并且能够设置宽高，无论他原来是div还是span

1）浮动的元素有“字围”效果

2）浮动的元素有“收缩”效果：

浮动的性质：脱标、贴边、字围、收缩

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度

3）浮动的清除：

清除的方法：

设置高度，关住浮动（实际开发很少为div设定高度，div是靠内容撑出高度）

clear属性清除浮动（clear:both / right / left;）但这个属性会让margin属性失效

4）盒子居中：

margin： 0 auto；

上下 左右

TIPs：使用margin:0 auto; 的盒子，必须有 明确的width。

只有标准流的盒子才能使用margin属性。就是说，盒子浮动或者定位了都不能使用 margin属性。

margin属性是在居中盒子，不是居中文本（居中文本：text-align:center;）

清除无序列表前面de小圆点：