十一章：用CSS进行布局

本章重点：盒模型与元素浮动。

盒模型：

1.CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型，这里的盒子由内容区域、内容区域周围的空间、内边距和外边缘和边框外面将元素与相邻元素隔开的不可见区域构成。CSS的width属性对元素所显示宽度的影响，有两种处理方式。（1）默认处理方式：浏览器中元素的宽度与其width属性并不一致。（2）box-sizing:border-box。使用这种模式元素的显示宽度就是width属性的值。

2.控制元素的显示类型和可见性：输入display:block（让元素显示为块级元素），或者输入inline-block（让元素显示为行内元素），或者输入none（隐藏元素，并将其从文档流中完全移除）。控制元素的可见性：visibility：hidden（隐藏文件，但在文档流中保存它）

visibility：visible（显示文件）

3.在元素周围添加内边距：输入padding:x 这里的x是要添加的空间量。也可以输入padding-top:x / padding-right:x / padding-bottom:x / padding-left:x 单独为一个边添加内边距。

4.设置边框：（1）定义边框风格：border-style:type，其中的type可以是none、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（槽线）、ridge（脊线）、inset（凹边）、outset（凸边）。（2）设置边宽度：borde-width:n，这里的n是需要的宽度。（3）设置边框颜色：borde-color:color，这里的color是颜色名称、十六进制值等。（4）使用简记法同时设置多个边框属性：border-top、-right、-bottom、-left将边框效果限制在某一条边上。

5.设置元素周围的外边距：外边距是元素与相邻元素之间的透明空间。输入：margin:x，其中的x是要添加的空间量，可以表示长度、相对父元素宽度的百分数或auto。也可以输入margin-top:x ,margin-right:x ,margin-bottom:x ,margin-left:x为元素的一条边应用外边距。

元素浮动：

1.可以通过float属性使元素浮动在文本或其他元素上。可以使用这种技术让文本环绕在图像或者其他元素周围，也可以使用这种技术创建多栏布局等。输入：float:left 让元素浮动到左边，其他内容围绕在它右边。 float:right让元素浮动到右边，其他内容围绕在它左边。float:none让元素完全不浮动。

2.控制元素浮动位置的步骤：clear:left阻止元素浮动在该元素的左边。clear:right阻止元素浮动在该元素的右边。clear:both阻止元素浮动在该元素的左右两边。clear:none允许元素浮动在该元素的左右两边。

3.对元素进行相对定位和绝对定位：

每个元素在页面的文档流中都有一个自然位置，相对于这个原始位置对元素进行移动就称为相对定位，周围的元素完全不受此影响。

输入：position:relative; 输入top、left、right、bottom再输入:d这里的d是希望元素从它的自然位置偏移的距离，可以表示为绝对值、相对值或百分数。

绝对定位是元素相对于body或最近的已定位祖先元素的精确位置，可以让元素脱离正常的文档流。

输入：position:absolute;输入top、left、right、bottom再输入:d这里的d是希望元素相对于其祖先元素偏移的距离，或相对于其祖先的百分数。

4.在栈中定位元素：输入z-index:n，其中n是表示元素在定位过的对象堆中的层级数字。n越大，元素在堆中就越高。

5.处理溢出：输入：overflow:visible(让元素盒子中的所有内容可见，这是默认项) overflow:hidden（隐藏元素盒子容纳不了的内容）overflow:scroll（无论元素是否需要，都在元素上添加滚动条）overflow:auto（让滚动条仅在访问者访问溢出内容时出现）。

6.垂直对齐元素：输入vertical-align:baseline(使元素的基准线对齐父元素的基准线)；vertical-align:middle（使元素位于父元素中央）；vertical-align:sub（使元素成为父元素的下标）；verticai-super（使元素成为父元素的上标）；vertical-align:text-top（使元素顶部与父元素的顶部对齐）；vertical-align:text-bottom（使元素的底部对齐父元素的底部）；vertical-align:top（使元素的顶部对齐当前行里最高元素的顶部）；vertical-align:bottom（使元素的底部对齐当前行里最低元素的底部）。

7.修改鼠标指针：输入cursor:pointer表示停留在链接上时通常显示的指针形状或default表示箭头。crosshair、move、wait、help、text、progress、或者输入auto显示特定情形下通常使用的指针形状，或者输入x-resize显示双向箭头。