3.5 CSS定位与盒模型

3.5.1 元素可见性

1.display属性：该属性主要有inline、block和none三个属性值。

(1)display:inline

主要用来设置元素为行内元素，设置了该属性之后再设置高度、宽度都无效。

(2)display:block

设置元素为块级元素，如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行，高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度。

(3)display:none

将元素设置为none的时候既不会占据空间，也无法显示，相当于该元素不存在。

2.visibility属性：该属性设置元素是否可见，确定元素是显示还是隐藏。visibility="visible|hidden"，visible为显示，hidden为隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据原来所在的位置，仍然会影响布局。

然而，visibility还可能取值为collapse。当设置元素“visibility：collapse”后，一般的元素的表现与“visibility：hidden”一样，即也会占用空间。但如果该元素是与table相关的元素，例如table row、table column、table column group等，其表现却与“display：none”一样，即将其占用的空间释放。

3.5.2 CSS定位

CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

1.position属性：该属性指定了元素的定位类型。元素可以使用顶部、底部、左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定position属性。position属性的主要取值如下：

·static：HTML元素的默认值，即没有定位，元素出现在正常的文档流中。静态定位的元素不会受到top、bottom、left、right或者z-index的影响。

·relative：元素框偏移某个距离，相对定位元素的定位是相对其正常位置。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

·fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。fixed定位使元素的位置与文档流无关，因此不占据空间。fixed定位的元素和其他元素重叠。

·absolute：元素框从文档流中完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

例3-10：position定位

绝对定位：脱离文档流，遗留空间由后续元素填充。

相对定位：不脱离文档流，只改变自身的位置，在文档流原先的位置遗留空白区域。

固定定位：固定在页面中，不随浏览器的大小改变而改变位置。

2.z-index属性：该属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

3.float属性：会使元素向左或者向右移动，其周围的元素也会重新排列。浮动往往是用于图像，但它在布局时也一样非常有用。元素在水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。浮动元素之后的元素将围绕它，而浮动元素之前的元素将不会受到影响。

3.5.3 CSS盒模型

所有HTML元素可以看作盒子。CSS盒模型（Box Model）本质上是一个盒子，封装在HTML元素的周围。它规定了元素框处理元素内容、内边距、边框和外边距的方式。CSS盒模型见图3-1。

元素框的最内部分是实际的内容，直接包围内容的是内边距（padding）。内边距呈现了元素的背景。内边距的边缘是边框（border）。边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素。背景通常是由内容、内边距和边框组成的区域。在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

3.5.3.1 内边距

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

提示：px，em，ex，%都是CSS的相对长度单位，其中ex代表字母x的高度。

也可以通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

3.5.3.2 边框

元素的边框（border）是围绕元素内容和内边距的一条或者多条线。CSS border属性允许规定元素边框的样式、宽度和颜色。

1.边框样式

边框样式使用border-style属性。可以为一个边框定义多个样式，这里的值采用的也是top-right-bottom-left顺序。边框的样式包括：none：无样式；dotted：点线；dashed：虚线；solid：实线；double：双线；groove：槽线；ridge：脊线；inset：内凹；outset：外凸。例如：

上面这条规则为div层定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。

如果希望为元素框的某一个边单独设置边框样式，而不是设置所有4个边框样式，可以使用下面的单边边框样式属性：

2.边框宽度

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

可以按照top-right-bottom-left的顺序设置元素的各边边框：

或者简写成：

用两个值取代前面4个值的情形，叫作值复制。CSS定义了一些规则，允许为外边距指定少于4个值。规则如下：

·如果缺少左外边距的值，则使用右外边距的值。

·如果缺少下外边距的值，则使用上外边距的值。

·如果缺少右外边距的值，则使用上外边距的值。

换句话说，如果为外边距指定了3个值，则第4个值（即左外边距）会从第2个值（右外边距）复制得到。如果给定了两个值，第4个值会从第2个值复制得到，第3个值（下外边距）会从第1个值（上外边距）复制得到。最后一种情况，如果只给定一个值，那么其他3个外边距都由这个值（上外边距）复制得到。

同样地，也可以通过下列四个属性分别设置边框各边的宽度：border-top-width，border-right-width，border-bottom-width，border-left-width。

3.边框颜色

设置边框颜色非常简单，CSS使用一个简单的border-color属性，它一次可以接受最多4个颜色值。

还有一些单边边框颜色属性，它们的原理与单边样式和单边宽度属性相同：border-top-color，border-right-color，border-bottom-color，border-left-color。

CSS2引入了边框颜色值transparent，这个值用于创建有宽度的不可见边框。

3.5.3.3 外边距

设置外边距的最简单的方法就是使用margin属性。这个属性接受任何长度单位、百分数甚至负值。

与内边距的设置相同，这些值的顺序是从上外边距（top）开始围着元素顺时针旋转的。也可以使用下列任何一个属性单独设置相应的外边距，而不会直接影响其他外边距：margin-top，margin-right，margin-bottom，margin-left。