【脚本化CSS】边框、外边距和内边距

边框、外边距和内边距

CSS允许指定元素周围的边框、外边距和内边距。元素的边框是一个围绕（或部分围绕）元素绘制的矩形（或者CSS3中的圆角矩形）。属性还允许指定边框的样式、颜色和厚度：

border: solid black 1px; /* 绘制一个1像素的黑色实线边框 */
border: 3px dotted red;  /* 绘制一个3像素的红色点线边框 */

可以用单独的CSS属性指定边框的宽度、样式和颜色，也可以指定元素的每条边的边框。例如，要绘制元素下面的一条线，只要简单地指定它的border-bottom属性。甚至可以为元素的单条边指定宽度、样式和颜色，如border-top-width和border-left-color属性。

在CSS3中，可以通过border-radius属性指定圆滑边框的所有角，也可以用更明确的属性名设置单独的圆角。例如：

border-top-right-radius: 50px;

margin和padding属性都指定元素周围的空白空间。主要的区别在于，margin指定边框外面——边框和相邻元素之间的空间，而padding指定边框之内——边框和元素内容之间的空间。外边距提供了常规文档流中（可能有边框的）元素和它的“邻居”之间的视觉空间。内边距保持元素内容和它的边框在视觉上分离。如果元素内没有边框，内边距往往也是没有必要的。如果元素是动态定位的，而不是常规文档流的一部分，它的外边距就无关要旨了。

使用margin和padding属性指定元素的外边距和内边距：

margin: 5px; padding: 5px;

也可以为元素单独的边指定外边距和内边距：

margin-left: 25px;
padding-bottom: 5px;

或者可以用margin和padding属性直接为元素所有的4条边指定外边距和内边距。首先指定上边的值，然后按照顺时针方式设置：上、右、下和左边的值。例如，以下代码显示了给元素的4条边设置了不同的内边距值，两种方式是等价的。

padding: 1px 2px 3px 4px;
/* 以上代码等价于以下4行代码 */
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

CSS盒模型和定位细节

以上描述的margin，border和padding等样式属性在脚本化时很可能不经常使用。因为它们是CSS盒模型（box model）的一部分，而为了真正理解CSS定位属性，应该理解这个盒模型。

下图说明了CSS盒模型与有边框和内边距元素的top、left、width和height等意义的视觉解释。

下图显示了一个绝对定位的元素嵌套在一个定位的容器元素中。容器和包含的元素都有边框和内边距，图例说明了指定容器元素每条边的内边距和边框宽度的CSS属性。注意外边距属性并没有图示：外边距与绝对定位的元素无关。

上图也包含了其他重要的信息。首先，width和height只指定了元素内容区域的尺寸，它不包含元素的内边距或边框（或外边距）所需的任何额外空间。为了确定有边框元素在屏幕上的全尺寸，必须把元素的宽度加上左右两边的内边距和左右两个边框宽度，把元素的高度加上上下两边的内边距和上下两个边框宽度。

其次，left和top属性指定了从容器边框内侧到定位元素边框外侧的距离。这些属性不是从容器内容区域的左上角开始度量的，而是从容器内边距的左上角开始的。同样，right和bottom属性是从容器内边距的右下角开始度量的。

有一个例子清楚地说明了这一点。假设已创建一个在内容区域四周有10像素内边距和5像素边框的动态定位的容器元素。现假设要动态定位一个容器中的子元素。如果将其left属性设置为“0px”，你会发现子元素的左边缘正好靠在容器左边框的右边，这样子元素覆盖了容器的内边距，本意是要留出空白（指定容器内边距的目的），而空白却没有了。如果想在容器内容区域的左上角定位子元素，就必须将其left和top属性指定为“10px”。

边框盒模型和box-sizing属性

标准CSS盒模型规定width和height样式属性给定内容区域的尺寸，并且不包含内边距和边框。可以称此盒模型为“内容盒模型”。在老版的IE里和新版的CSS中都有一些例外，在IE 6之前和当IE 6~8在“怪异模式”下显示一个页面时（页面中缺少 或有一个不够严格的doctype时），width和height属性确是包含内边距和边框宽度的。

IE的行为是一个bug，但是IE的非标准盒模型通常也很有用。认识到这一点，CSS3引进了box-sizing属性，默认值是content-box，它指定了上面描述的标准的盒模型。如果替换为box-sizing:border-box，浏览器将会为那个元素应用IE的盒模型，即width和height属性将包含边框和内边距。当想以百分比形式为元素设置总体尺寸，又想以像素单位指定边框和内边距时，边框盒模型特别有用：

box-sizing属性在当今所有的浏览器中都支持，但是还没有不带前缀通用地实现。在 Chrome和Safari中，使用-webkit-box-sizing。在Firefox中，使用-moz-box-sizing。在 Opera和IE 8及其更高版本中，可以使用不带前缀的box-sizing。

边框盒模型在未来CSS3中的一个可选方案是使用盒子尺寸的计算值：

在IE 9中支持使用calc()计算CSS的值，在Firefox 4为-moz-calc()。

元素显示和可见性

两个CSS属性影响了文档元素的可见性：visibility和display。visibility属性很简单：当其值设置为hidden时，该元素不显示；当其值设置为visible时，该元素显示。display属性更加通用，它用来为接收它的容器指定元素的显示类型。它指定元素是否是块状元素、内联元素、列表项等。但是，如果display设置为none，受影响的元素将不显示，甚至根本没有布局。

visibility和display属性之间的差别可以从它们对使用静态或相当定位的元素的影响中看到。对于一个常规布局流中的元素，设置visibility属性为hidden使得元素不可见，但是在文档布局中仍保留了它的空间。类似的元素可以重复隐藏和显示而不改变文档布局。但是，如果元素的display属性设置为none，在文档布局中不再给它分配空间，它各边的元素会合拢，就当它从来不存在。例如，在创建展开和折叠轮廓的效果时display属性很有用。

visibility和display属性对绝对和固定定位的元素的影响是等价的，因为这些元素都不是文档布局的一部分。然而，在隐藏和显示定位元素时一般首选visibility属性。

注意，用visibility和display属性使得元素不可见没什么意义，除非使用JavaScript动态设置这些属性让元素在某一刻可见！

颜色、透明度和半透明度

可以通过CSS的color属性指定文档元素包含的文本的颜色，并可以用background-color属性指定任何元素的背景颜色。早些时候，我们看到可以用border-color或border复合属性指定元素边框的颜色。

针对边框的讨论包含一些例子，使用常见颜色的英文名字（如“red”和“black” ）来直接指定边框的颜色。CSS支持若干英文颜色名字，但是在CSS中更一般的指定颜色的语法是使用十六进制数分别指定组成颜色的红、绿和蓝色分量，每个分量可以使用一位或两位数字。例如：

#000000         /* 黑色 */
#fff		/* 白色 */
#foo		/* 亮红色 */
#404080         /* 黑暗不饱和蓝色 */
#ccc		/* 浅灰色 */

CSS3也为指定RGBA色彩空间（红、绿、蓝色值加上指定颜色透明度的alpha值）中的颜色定义了语法。所有现代的浏览器（除了IE）都支持RGBA，期待在IE 9中也能支持。CSS3也定义了对HSL（色相-饱和度-值）和HSLA颜色规范的支持。它们在Firefox、Safari和Chrome中都支持，除了IE。

css允许指定元素确切的位置、尺寸、背景颜色和边框颜色，因为能绘制矩形和（当减少高度和宽度时）水平、垂直线条它有了基本的图形能力。

除了background-color属性，也可以为元素指定背景图像。background-image属性指定使用的图像，background-attachment、 background-position和background-repeat属性指定如何绘制该图像的一些高级细节。复合属性background允许一起指定这些属性值。

如果没有为元素指定背景颜色或图像，它的背景通常透明，理解这点非常重要。例如，如果一个

绝对定位在常规文档流中一些已存在的文本上方，默认情况下，文本将 透过
元素显示出来。如果
同时包含了自己的文本，字母将重叠在一起而变得模糊不清。尽管如此，默认情况下不是所有的元素都是透明的。例如，具有透明背景的表单元素看起来不透明，并且元素（如

到目前为止所讨论的透明度其实是非此即彼的：元素的背景不是全透明就是全不透明的。指定元素（内容的前景和背景）为半透明也是可能的。用CSS3的opacity属性来处理，该属性值是0~1之间的数字，1代表100%不透明（默认值），而0代表0%不透明（或100%透明）。opacity属性在当今所有浏览器中都支持，除了IE。IE提供类似的可选方式：IE特有的filter属性。让元素75%不透明，可以使用以下CSS样式：

opacity: .75；	            /* 透明度，CSS3标准属性 */
filter: alpha(opacity=75);  /* IE透明度，注意没有小数点 */

部分可见：overflow和clip

visibility属性可以让文档元素完全隐藏，而overflow和clip属性允许只显示元素的一部分。overflow属性指定内容超出元素的大小（例如，用width和height样式属性指定）时该如何显示。该属性允许的值和含义如下所示：

visible

默认值。如果需要，内容可以溢出并绘制在元素的边框的外面。

hidden

裁剪掉和隐藏溢出的内容，即在元素尺寸和定位属性值定义的区域外不会绘制内容。

scroll

元素一直显示水平和垂直滚动条。如果内容超出元素尺寸，允许用户通过滚动来査看额外的内容。此属性值负责文档在计算机屏幕中的显示，例如，打印纸质文档时滚动条是没有意义的。

auto

滚动条只在内容超出元素尺寸时显示，而非一直显示。

overflow属性允许指定当内容超出元素边框时该如何显示，而clip属性确切地指定了应该显示元素的哪个部分，它不管元素是否溢出。在创建元素渐进显示的脚本效果时候该属性特别有用。

clip属性的值指定了元素的裁剪区域。在CSS2中，裁剪区域是矩形的，不过clip属性的语法预留了开放的可能，该标准将来的版本将支持除了矩形以外其他形状的裁剪。clip属性的语法是：

rect(top right bottom left)

相对于元素边框的左上角，top、right、bottom和left 4个值指定了裁剪矩形的边界。例如，要只显示元素的100 x 100像素大小部分，可以赋予该元素style属性：

style = "clip: rect(0px 100px 100px 0px);

注意，圆括号中的4个值是长度，所以“必须”包含明确的单位，如px代表像素。不允许使用百分比。可以指定负值，让裁剪区域超出为元素指定的边框尺寸。也可以为任何4个值使用auto关键字来指定裁剪区域的边缘就是元素边框的对应边缘。例如，用style属性指定只显示元素最左边的100像素：

style="clip: rect(auto 100px auto auto);"

注意，值之间没有逗号，裁剪区域从上边缘开始顺时针设置。将clip设置为auto来停用裁剪功能。

示例：重叠半透明窗口

下例用CSS在浏览器窗口中创建滚动、重叠和半透明的视觉效果。视觉效果如下面所示。

例子代码不包含JavaScript代码和事件处理程序，因此无法和窗口进行交互（除了可以滚动它们），但是足以证明CSS可以达到的强大效果。

例：用CSS显示窗口



	 
		
		
		
		
		

		
Test Window

		

		1
2
3
4
5
6
7
8
9
0

	  	1
2
3
4
5
6
7
8
9
0
 

	

	
	

	
Another Window

	

		This is another window. Its z-index puts it on top of the other one.
		CSS styles make its content area translucent, in browsers that support that.

该例子主要的不足是样式表将所有窗口的尺寸固定了。由于窗口的标题栏和内容部分“必须”在整个窗口中精确地定位，因此一个窗口尺寸的变化需要改变定义在样式表的三条规则中的各种定位属性的值。这对于一个静态HTML文档很难做到，如果使用脚本来设置所有必要属性值并不是很难。

相关

标签