CSS学习笔记（二）--CSS框模型CSS定位

CSS 内边距—padding

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。 您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值

h1 {padding: 10px 0.25em 2ex 20%;} 或是： h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }

百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。

CSS 边框—border

元素的背景是内容、内边距和边框区的背景。 1.边框的样式 border-style

p.aside {border-style: solid dotted dashed double;} 上面这条规则为类名为 aside 的段落定义了四种边框样式： 实线上边框、点线右边框、虚线下边框和一个双线左边框。 这里的值采用了 top-right-bottom-left 的顺序 定义单边样式:border-top-style。border-right-style。border-bottom-style。border-left-style

2.边框的宽度： border-width。为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。

p {border-style: solid; border-width: 15px 5px 15px 5px;} 按照 top-right-bottom-left 的顺序设置元素的各边边框 定义单边宽度：border-top-width。border-right-width。border-bottom-width。border-left-width

如果边框样式为 none，即边框根本不存在，此时无论设置边框宽度为多少都不会显示边框。

3.边框的颜色 border-color .可以是命名颜色，也可以是十六进制和 RGB 值 定义单边颜色：border-top-color。border-right-color。border-bottom-color。border-left-color 透明边框：CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。

CSS 外边距—margin

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白 百分数是相对于父元素的 width 计算的

1.值复制 如果缺少左外边距的值，则使用右外边距的值。 如果缺少下外边距的值，则使用上外边距的值。 如果缺少右外边距的值，则使用上外边距的值。

2.单边外边距属性 margin-top。margin-right。margin-bottom。margin-left

CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 在CSS里添加代码如下：

* { margin:0; padding:0; border:0; }

CSS 定位 (Positioning)

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。

CSS position static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

z-index 是 0。Z-index 1 拥有更高的优先级（元素堆叠上边）。Z-index -1 拥有更低的优先级（元素堆叠下边）

CSS 相对定位

#box_relative { position: relative; left: 30px; top: 20px; }

CSS 绝对定位

#box_relative { position: absolute; left: 30px; top: 20px; }

CSS 浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。