03.盒模型

盒模型：

1 盒模型概述:

• width和height 设置内容区的宽度和高度。增加内边距、边框、外边距不会影响内容区的尺寸，但是会增加元素框的总尺寸。
• 背景会铺满内容区和内边距，不会加到border上的。
• 内边距、边框、外边距默认值为0，但是用户代理（浏览器样式表）会提供自己的样式属性值，为了在不同的浏览器中表现相同，一般对部分属性进行重设。

1.1 通用选择器重设：

• 缺点：对option元素有不利的影响。

*{
   vertical-align:baseline;
   font-weight:inherit;
   font-family:inherit;
   font-style:inherit;
   font-size:100%;
   outline:0;
   padding:0;
   margin:0;
   border:0;
}

1.2 Poor Man Reset:

1.3 Siiolon's Global Reset

http://dwz.cn/6pD4M6

---

2 外边距叠加：

• 同级元素上下叠加： 两者相遇取其大。(无条件)
• 自己跟自己叠加： 有外边距，但是没有内边距和边框，这时候顶外边距和底外边距就碰到一起了。
• 父子元素外边距叠加： 在没有边框和内边距的前提下，两者相遇取其大。

只有普通文档流中的 块框 才会叠加，行内框、浮动框、绝对定位框之间的外边距不会叠加。

---

3 定位概述：

3.1 格式模型：

• css中3中定位机制：普通流、浮动、绝对定位。

3.2 行内框：

• 可以使用 水平 外边距、边框、内边距调整他们的水平间距，但在垂直方向上的属性是不影响行内框的高度的。so， 在行内框上设置显示的宽高是没有影响的 。
• 修改行内元素尺寸的唯一方法就是：修改行高和水平属性（外边距、边框、内边距）。
• 将行内元素的 display 设置为 block，可以让行内元素表现的像块元素一样。同时也能显示的设置宽高、以及垂直外边距和内边距。

3.3 块级元素：

• 块级元素能够显示的设置宽高。（p、div、h1）。
• 将块级元素的 display 设置为 inline-block，可以让块级元素像行内元素一样水平的依次排列。但是，其余行为不变，比如仍然能够显示的设置宽高、垂直外边距和内边距。

3.4 定位：

• static：无特殊定位，对象遵循HTML规则。
• absolute：将对象从文档流中拖出，使用：left、right、top、bottom进行绝对定位，通过 z-index 定义层叠属性，不具有边距，但仍有补白和边框。相对于已经定位的祖先元素进行定位。
• relative：对象不可以层叠，将依据left、right、top、bottom等属性在正常的文档流中进行偏移。相对对于本体所在左上位置进行定位。
• fixed：固定定位是绝对定位的一种，固定定位的元素在滚动时一直出现在屏幕的固定位置，比如博客评论表单的设计。（<=IE6不支持）

3.5 浮动：

• 浮动的框可以左右移动，直到它的边缘碰到包含框或者另一个浮动框的边缘。
• 1号元素浮动后，2号元素如果是块级元素，它会被1号覆盖在下面，如果是行内元素，它仍会继续使用1号元素所在位置的行，不会被1号元素覆盖。
• 阻止行框围绕浮动元素：给这些行框应用 clear 属性：left,right,both,none

3.6 浮动框旁边的行框被缩短：

• 无论是行内元素还是块级元素中的内容都会围绕浮动元素。