CSS3与页面布局学习总结（二）BoxModel、边距折叠、内联与块标签、CSSReset

一、盒子模型（Box Model）

盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。当设置一个元素的样式如下：

 
 
 
 
 
 
 

 Box Model
 
 

运行结果：

1.1、宽度测试

计算最大宽度，示例如下：

 
 
 
 
 
 
 

 
Left
Right
 
 

要达到如下效果，请求?处最大可以设置为多少像素？

答案：

340px

1.2、溢出测试

代码如下：

 
 
 
 
 
 
 

 

 innerBox
 
 
 

请问运行时innerBox是否会超出box，如果会，超出多少？

可见部分=850-815=35，还有10个margin不可见，45px

如果不想让innerBox超出，则应该删除其100%的宽度设置，去掉width:100%，一般不要设置，多此一举。

1.3、box-sizing属性

设置或检索对象的盒模型组成模式

content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。

示例：

 
 
 
 
 
 
 

 Box Model
 
 

运行结果：

因为默认就是为content-box所以这里没有直接设置，占用宽度为160px;

border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。

示例代码：

 
 
 
 
 
 
 

 Box Model
 
 

运行结果：

当box-sizing: border-box时的宽度设置会包含border与padding，但不包含margin，但margin也会占用位置。

1.4、利用CSS画图

示例代码：

运行结果：

心形：

运行结果：

二、边距折叠

2.1、概要

外边距折叠：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）
相邻：没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系，如：

示例代码：

运行结果：

因为div2与div3的外边距是相邻的（是父子关系的相邻），当div2 margin-top为20,div3的margin-top也为20,此时div2与div3的外边距会合并，就是折叠。

如果想让div3的margin-top生效，可以破坏相邻的，示例：

运行结果：

2.2、垂直方向外边距合并计算

a)、参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。

示例：

 
 
 
 
 
 
X
 
Y
 

运行结果：

b)、参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。
示例：

 
 
 
 
 
 
X
 
Y
 

结果：

c)、参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
示例：

 
 
 
 
 
 
X
 
Y
 

运行结果：

三、内联与块级标签

3.1、行内标签与块标签区别

html中的标签默认主要分为两大类型，一类为块级元素，另一类是行内元素，许多人也把行内称为内联，所以叫内联元素，其实就是一个意思。为了很好的布局，必须理解它们间的区别，区别如下：

常用块级与内联元素：

内联元素（行内元素）内联元素(inline element)
 a - 超链接
 abbr - 缩写
 acronym - 首字
 bdo - bidi override
 big - 大字体
 br - 换行
 cite - 引用
 code - 计算机代码(在引用源码的时候需要)
 dfn - 定义字段
 em - 强调
 i - 斜体
 img - 图片
 input - 输入框
 kbd - 定义键盘文本
 label - 表格标签
 q - 短引用
 samp - 定义范例计算机代码
 select - 项目选择
 small - 小字体文本
 span - 常用内联容器，定义文本内区块
 strike - 中划线
 strong - 粗体强调
 sub - 下标
 sup - 上标
 textarea - 多行文本输入框
 tt - 电传文本
 u - 下划线
 var - 定义变量

块元素(block element)
 address - 地址
 blockquote - 块引用
 center - 举中对齐块
 dir - 目录列表
 div - 常用块级容易，也是css layout的主要标签
 dl - 定义列表
 fieldset - form控制组
 form - 交互表单
 h1 - 大标题
 h2 - 副标题
 h3 - 3级标题
 h4 - 4级标题
 h5 -