css盒模型分析

一：盒模型解析

1.属性

width（宽度）- 设置模型的内容宽度
height（高度）- 设置模型的内容高度
padding（内边距）- 设置模型的内边距的距离
margin（外边距）- 设置模型的外边距的距离
border（边框）- 设置模型的边框大小
注意：table有自己的border属性 =0 所以在css中设置border 属性无效

2.属性设置

padding的子方向实现
padding：分别设置1、2、3、4个值来设置四个方向不一样的量
padding-top、padding-bottom、padding-left、padding-right
margin的子方向实现
margin：分别设置1、2、3、4个值来设置四个方向不一样的量
margin-top、margin-bottom、margin-left、margin-right
border的子方向实现
border边框：公有三个属性（粗细、类型、颜色）+四个方向（上、下、左、右）
属性别名分别为：width、style、color + top、bottom、left、right

问题：当我们设置盒模型宽度（width）、内边距（padding）和边框（border）后 盒模型的宽度大于width的值.
原因：width设置的只是内容content区域的大小，整个盒模型的宽度还要加上border和padding

问题：margin和padding使用区别
如果是父级元素和兄弟元素设置编剧用padding，兄弟元素之间用margin
（注意margin-top和marginbottom宽度值，取得是最大值
marginleft和marginright宽度值取得是总值）

二：内联元素和块元素分析

1.什么是标准文档流？

答：标准文档流是指元素排版布局过程中，元素会自动从左往右，从上往下的流式排列

2.文档流中元素分类:内联元素（行内元素）、块级元素。

3.元素特点：

（1）块级元素特点
所有块级元素独自占有一行，不能和其他元素共享一行
可以根据盒模型特性设置宽高内外间距，如果不设置宽度，则默认填充父级元素的宽度
内部可以继续容纳其他元素
元素包括：div、dl、h系列、hr、ul、li、ol、table、p等
（2）内联元素特点
默认和其他元素在同一行
不遵循盒模型特性设置，宽高只和内容有关
元素包括：文本标签(a、b、u、font、span )、input、label、textarea、img、select等

4.块级元素和内联元素相互转换

块级元素->内联元素：增加css属性 display:inline
内联元素->块级元素：增加css属性 display:block

5.脱标实现

定义：让标签脱离标准文档流的约束限制，独自进行定位设置
约束：一般脱标设置的都是块级元素（内联元素可以脱标，不常用）
实现方式：浮动、绝对定位

三：浮动分析

浮动说明
- 给元素的float属性赋值后，标签会脱标，停留在浮动层
- 浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去
- 如果填充的元素为块级元素且发生了重叠，浮动元素覆盖块级元素
- 如果之前是内联标签，浮动后，是可以设置宽高度（因为脱标了）
注意：所有脱标的元素，都符合盒模型的约束规则
（不管是块级元素还是内联元素）