第五章 CSS盒模型

第五章 CSS盒模型

5.1盒模型的定义

        Web 页面上大部分的元素（特别是块状元素）都可以看作是一个盒子，W3C组织建议把所有网页上的对象都放在一个盒子（box)中，设计者可以通过创建定义来控制这个盒子的各种属性，这些对象包括段落、列表、标题、图片及层。

        盒子的结构可以看作一个矩形框，包括边框（border）、外边距（margin）、内边距（padding)，以及元素内容（content），元素会在指定的高度和宽度范围内在页面上显示出来。它们之间的关系，如图5-1所示。

        一个页面由许多这样的盒子组成，这些盒子层层嵌套，互相影响，设计者在布局网页和定位Web元素时要充分考虑到这些要素，才能更自如地摆弄这些盒子。

        而网页元素的定位实际上就是这些大大小小的盒子在页面中的定位，这些盒子在页面中是“浮动”的，当某个块状元素被CSS设置了浮动属性，这个盒子就会移动到上一块级元素所处的行中。要关注的是这些盒子在页面中如何摆放、如何嵌套的问题，而这么多盒子摆在一起，其中盒子尺寸计算，是否浮动等要素都需要关注的。

   
5.2 CSS元素的高度和宽度

5.2.1 盒模型的宽度

        盒模型的宽度=左外边距（margin-left）+左边框（border-left）+左内边距(padding-left）+ 内容宽度（width)+右内边距（padding-right）+右边框（border-right)+右外边距（margin-right）。

5.2.2 盒模型的高度

        盒模型的高度=上外边距（margin-top)+上边框（border-top)+上内边距（padding一op）+内容高度（height)+下内边距（padding-bottom)+下边框（border-bottom）+下外边距（margin-bottom)。

5.3 边距设置和边框设置

5.3.1 外边距设置

        外边距是指元素与元素之间的距离，外边距设置属性，可分别设置margin-top、margin-right、margin-bottom、margin-left，也可以用margin 属性一次性设置所有外边距。

5.3.1.1 上外边距

         语法：

<meta name=" description" content=" xxx "/>

5.3.1.2 右外边距

        语法：

margin-right:length / percent /auto

5.3.1.3 下外边距

        语法：

margin-bottom:length / percent /auto

5.3.1.4 左外边距

        语法：

margin-left:length / percent /auto

5.3.1.5 外边距

        语法：

margin-length:length / percent /auto

5.3.2 外边距的合并

        通常，盒子与盒子之间的外边距相遇会互相影响，必须对margin 属性深入了解，小

精确地控制盒子的位置。

5.3.2.1 行级元素外边距合并

        行级元素的盒子相遇，盒子与盒子之间的距离等于两个盒子外边距的总和。

5.3.2.2 块级元素外边距合并

        块级元素的盒子相遇，盒子与盒子之间的距离等于两盒子中外边距的较大者。

5.3.3 内边距设置

        元素的内边距用来控制边框和内容区之间的空白距离，并非实体，用padding属性表示，类似于HDML中表格单元格的填充属性。内边距（padding）和外边距（margin）很相似，都是透明不可见的，只是内边距和外边距之间还有边框。从语法和用法上来说，内边距的属性与外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性，padding属性接受 length 值或percent 值，区别于外边距，内边距不可以使用负值。

5.3.4 边框设置

        元素外边距内就是元素的边框（border），它是围绕内边距和元素内容的一条或多条线在内边距和外边距之间。边框的四条边分别用border-top、border-right、border-bottom border-left 表示，它们的属性与内外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性。

        边框作为盒模型的某个组成部分，边框的CSS样式设置将直接影响到盒子的尺寸和外观。而通过使用border 属性，可以创建出更佳的边框效果，还可以应用于任何元素。border属性设置通常有3种：样式（border-style)、宽度（border-width）和颜色（border-color)。

5.3.4.1上边框

        语法：

border-top:border-style | border-width | border-color

5.3.4.2右边框

        语法：

border-right:border-style | border-width | border-color

5.3.4.3下边框

        语法：

border-bottom:border-style | border-width | border-color

5.3.4.4 左边框

        语法：

border-left:border-style | border-width | border-color

5.3.4.5 边框样式

        在CSS中，样式是边框最重要的一个设置，因为如果没有样式，在Web页面边框就不会显示。

        bonder-style 是一个复合属性，可以同时取1~4个值，取值方法与外边距相似，边框属性有12个值可选，包括默认（initial)和无边框（none)。

5.3.4.6 边框宽度

        在CSS中，宽度是通过border-width 属性来设置边框粗细的。与border-style 属性相同，border-width 也是一个复合属性。设置边框宽度时，可以直接输入length确定长度值，如5px或2cm，但不可以为负值；或者选择系统预设属性值。

5.3.4.7 边框颜色

        在CSS中，边框颜色是通过border-color 属性来设置的，该属性可以使用任何类型的颜色值，包括用颜色命名的值、十六进制参数或 RCB 值。但是如果对象的border-style设置为none 或者horder-widh设置为0，本属性将失去作用。

5.3.5 新增边框属性

5.3.5.1圆角边框

        border-radius:设置边框四个角有弧度成为圆角，需要设置相关参数。

5.3.5.2阴影边框

        box-shadow:像四个边框添加一到多个阴影，需要设置相关参数。

5.3.5.3图片绘制边框

        border-image:设置所有边框用图片显示，需要嵌入相关图片，部分浏览器不支持相关属性。

5.4 CSS元素的定位

        position的属性值有4个：static / relative / absolute / fixed

5.4.1 static 定位

        static是HTML元素的默认值，不受top,right,bottom和left属性影响，元素出现在正常的文档流中。

5.4.2 relative定位

        relative不脱离文档流的布局，需要参照父元素的四条边（不是浏览器），设置自身的top、right、bottom和 left属性的参数，从盒子中独立出来浮在上面。相对定位只改变自身的位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。

5.4.3 absolute定位

        absolute 脱离原来文档流的布局，浮在其他盒子上面，独立出来。子盒子原来位置的空间由后面的盒子填充。绝对定位的起始位置为最近已定位的父盒于，如果父盒于投有定位，那么子盒子的起始位置为浏览器，并随着滚动条的移动而改变位置。

5.4.3.1 相对浏览器绝对定位

5.4.3.2 相对父盒子绝对定位

5.4.4 fixed定位

        fixed 类似于absolute，但在固定定位中，盒子的位置不随着滚动条的移动而改变位置，相当于浏览器窗口是固定不变的。

5.5 CSS元素的浮动

5.5.1 盒子的浮动添加

        语法：float:left / right / none

5.5.2 盒子的浮动清除

        语法：clear:left / right / both / none

5.6 综合案例——昵心美食空间

        待发