盒模型Box Model（浮动）

一、标准盒模型的大小：border+padding+content（width）

       怪异盒模型大小：padding+border

 

二、display

• inline  默认，且变为行由内容撑开
• block  变为块元素，前后会自带有换行符
• none  不会显示元素（只是隐藏掉，但还在布局中）
• inline-block  不设置宽度，有内容撑开；行标签会实现宽高到校；块标签已不是独占一行
• table  以表格的表现显示

 

三、float（浮动）用来在一定宽度中实现一行输出多个块

• 除非添加margin，否则块间会消除距离
• 行标签支持宽高，块标签不是独占一行
• 可实现文字环绕
• 可决定块输出是从左到右（left），还是从右到左（right）

对块标签的影响：

• 在没有设置宽高的情况下浮动后，内容撑开宽高；
• 可以使块元素并排排列
• 浮动元素不占父级的宽高

对行标签的影响：

• 浮动后能设置宽高属性，并支持margin和padding

---

四、overflow  通常用在已设置固定宽高的情况下

• visible 显示超出内容，不剪切内容也不添加滚动条
• hidden  隐藏超出内容
• auto  默认，要剪切内容并添加滚动条
• scroll 总是显示滚动条

 

五、clear（清除）

• none  允许浮动元素出现在两侧
• left  左侧不允许有浮动元素
• right  右侧不允许有浮动元素
• both  不允许有浮动

 

六、visitility（可视）

• visble  元素可视
• hidden  元素不可视（元素从布局中消失）
• inherit  继承父元素可视性

 

七、zoom 使用对象的实际尺寸（加数字），同时亦有清浮动的作用

---

八、清浮动的三种常用方法：

• overflow：hidden；
• 空标签清浮动：height：0；overflow：hidden；clear：both；
• after清浮动。