CSS页面布局基础1——盒模型

1、根据CSS盒模型的规定，每个元素(不论是块级元素还是内嵌<也可称“内联”>元素)，都会产生一个矩形盒子围绕在元素内容之外，这个盒子被称为元素盒。

标准的盒子模型：

元素的内容本身，也即上图中的淡粉(暂且称之为淡粉)色的部分，称之为内容区。

内容区的变被称为元素盒的内边缘。元素的高度(height) 和 (width) 是内边缘之间的距离。

内边距(padding)是内容区和边框之间的区域。即上图中黄色部分。

边框(border)是一到多个围绕在元素内容的内边距的线。即上图中蓝色部分。

外边距(margin)是元素边框外面的区域，外边距区域总是透明的。即上图中淡绿色部分。

2、元素盒在玉面上占据的总宽度是左边的外边缘到右边的外边缘之间的距离，它包含了内容区域的宽度以及padding 、border 、 margin 区域。当我们指定一个元素的width 值时，只是设置了内容区域的宽度，要得到元素的整个宽度，必须加上其他区域的宽度。

3、宽度(width)和高度(height)：设置块级元素或者内嵌元素(可替换，如图像)的大小，width和height属性不适合于内嵌文本元素(不可替换元素)，即便设置，遵循的浏览器也会将其忽略。

当width和height属性为auto时，会根据HTML规则自动分配其宽度。

对img元素来说，仅指定其中的一个属性值，另外一个属性值将会根据图片源尺寸等比例缩放。

4、外边距margin：围绕在元素边框之外的可选区域，使用margin-top,margin-right,margin-bottom,-margin-left四个属性，属性值可以自定义。有以下几个特点：

(1)外边距总是透明的。因此父级元素的背景色或者背景图片是可以看见的。

(2)元素可以有负外边距。当设置一个元素的外边距为负数时，该元素会突破父元素的盒模型空间或者与页面上其他元素重叠。

(3)正常文档流中的相邻块级元素的垂直(top , bottom) 外边距会重合，即相邻的两个块级元素之间的空白将会是两个元素的外边距中较大的那一个。

5、边框border：边框有三个特征可以指定：样式，宽度和颜色。

边框的样式有：border-top-style 、 border-right-style 、 border-bottom-style 、 border-left-style 。 也可以用border-style属性缩写样式，属性的名称为：none，dotted，dashed，solid ，double ，groove ，ridge ，inset ，outset 九种。none即是没有边框。其他边框效果如下图(丑是丑了点，但还比较直观，凑合看。)

边框的特点：(1)边框画在元素的背景之上

(2)非可替换内嵌元素(文本元素)的边框对于该元素所在行的行高没有影响。

(3)可替换元素的边框将影响行高。

6、内边距padding：内容区和边框之间的可选区域

属性名称有padding-top ， padding-right ， padding-bottom ， padding-left ，padding ,可取值是百分比或者自定义固定长度。

padding不允许有负值。

如果想让一个元素出现在一个有或者没有明显边框的彩色盒子中，padding属性可以用来在盒子边缘以及内容之间放置一些空白。

元素背景色和背景图片在padding区可以显示，与margin不同，padding是不会重合的。

7、正常文档流布局：在正常流中，文本元素按照从上到下，从左到右格式布局。也就是，块级元素从上到下依次排列，而内嵌元素从左到右一次排列。