CSS 笔记——盒子模型

2. 盒子模型

在CSS眼中,任何HTML标签对象都是一个矩形,有长度,宽度以及各角的定位坐标,俗称CSS 盒子模型理论

CSS 笔记——盒子模型

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

CSS 笔记——盒子模型

(1)margin(外边距)

基本语法

margin : auto | length

语法取值

auto    :  取计算机值
length :  由浮点数字和单位标识符组成的长度值 | 百分数。
百分数是基于父对象的高度。除了内联对象的上下外边距外,支持使用负数值。

属性列表

margin-top margin-right margin-bottom margin-left

使用说明

检索或设置对象四边的外边距。默认值为 0 0。

如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。

如果只提供一个,将用于全部的四边。

如果提供两个,第一个用于上-下,第二个用于左-右。

如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

在IE4.0+中你可以使用 em 和 ex 单位。在IE4.0+中此属性不支持用于 td 和 th 对象。要设置单元格内的外补丁,请使用单元格内的如 div 、 p 等类型对象的此属性。在IE5.5+中此属性支持内联对象使用。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。对于内联对象来说,上下外补丁如果被设置了,将是用于计算环绕内联对象的边框区域的。它们的值不会影响内联对象所在行的高度( height )。外补丁总是透明( transparent )的。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 margin 。

代码示例

margin: 20px;					/* 上下左右都是一个值 */
margin: 10px 20px; /* 上下、左右依次设置 */
margin: 10px 10px 20px; /* 上、左右、下依次设置 */
margin: 10px 20px 30px 40px; /* 上、右、下、左依次设置 */ margin-top: 20px; /* 单独设置上外边距 */
margin-bottom: 20px; /* 单独设置下外边距 */
margin-left: 20px; /* 单独设置左外边距 */
margin-right: 20px; /* 单独设置右外边距 */

(2)border(边框)

基本语法

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

语法取值

该属性是复合属性。请参阅各参数对应的属性。

属性列表

border border-color border-style border-width
border-top border-top-color border-top-style border-top-width
border-right border-right-color border-right-style border-right-width
border-bottom border-bottom-color border-bottom-style border-bottom-width
border-left border-left-color border-left-style border-left-width

(2.1)border-color

基本语法
border-color : color
使用说明

设置对象边框的颜色。如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。如果只提供一个,将用于全部的四条边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

在 IE5.5+ 中,边框属性可以直接应用于内联要素。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。

如果 border-style 设置为 none ,本属性将失去作用。

(2.2)border-style

基本语法
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
语法取值
none    :  默认值。无边框。不受任何指定的 border-width 值影响
hidden :  隐藏边框。IE不支持
dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid :  实线边框
double :  双线边框。两条单线与其间隔的和等于指定的 border-width 值
groove :  根据 border-color 的值画3D凹槽
ridge :  根据 border-color 的值画3D凸槽
inset :  根据 border-color 的值画3D凹边
outset :  根据 border-color 的值画3D凸边
使用说明

设置对象边框的样式。如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。如果只提供一个,将用于全部的四条边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

在 IE5.5+ 中,边框属性可以直接应用于内联要素。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。

(2.3)border-width

基本语法
border-width : medium | thin | thick | length
语法取值
medium  :  默认值。默认宽度
thin :  小于默认宽度
thick :  大于默认宽度
length :  由浮点数字和单位标识符组成的长度值。不可为负值。
使用说明

设置对象边框的宽度。如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。如果只提供一个,将用于全部的四条边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

在 IE5.5+ 中,边框属性可以直接应用于内联要素。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。

代码示例

border: 2px solid red;
/* 缩写边框属性设置在一个声明中所有的边框属性。可以设置的属性分别(按顺序):border-width, border-style, 和border-color。*/ border-width: thin; /* 所有4个边框都是细边框 */
border-width: thin medium; /* 上下边框是细边框,左右边框是中等边框 */
border-width: thin medium thick; /* 上边框是细边框,左右边框是中等边框,下边框是粗边框 */
border-width: thin medium thick 10px; /* 上边框是细边框,右边框是中等边框,下边框是粗边框,左边框是 10px 宽的边框 */ border-style: solid; /* 设置元素所有边框的样式 */
border-style: dotted solid; /* 上下边框是点状,左右边框是实线 */
border-style: dotted solid double; /* 上边框是点状,左右边框是实线,下边框是双线 */
border-style: dotted solid double dashed; /* 上边框是点状,右边框是实线,下边框是双线,左边框是虚线 */ border-color: red; /* 所有四个边框是红色 */
border-color: red green; /* 上下边框是红色, 左右边框是绿色 */
border-color: red green blue; /* 上边框是红色, 左右边框是绿色, 下边框是蓝色 */
border-color: red green blue pink; /* 上边框是红色, 右边框是绿色, 下边框是蓝色, 下边框是粉红色 */ border-top: thick double #ff0000; /* 把上边框的所有属性设置到一个声明中。 */
border-top-color: red; /* 设置元素的上边框的颜色。 */
border-top-style: dotted; /* 设置元素的上边框的样式。 */
border-top-width: thin; /* 设置元素的上边框的宽度。 */ border-right: thick double #ff0000; /* 把右边框的所有属性设置到一个声明中。 */
border-right-color: red; /* 设置元素的右边框的颜色。 */
border-right-style: dotted; /* 设置元素的右边框的样式。 */
border-right-width: thin; /* 设置元素的右边框的宽度。 */ border-bottom: thick double #ff0000; /* 把下边框的所有属性设置到一个声明中。 */
border-bottom-color: red; /* 设置元素的下边框的颜色。 */
border-bottom-style: dotted; /* 设置元素的下边框的样式。 */
border-bottom-width: thin; /* 设置元素的下边框的宽度。 */ border-left: thick double #ff0000; /* 把左边框的所有属性设置到一个声明中。 */
border-left-color: red; /* 设置元素的左边框的颜色。 */
border-left-style: dotted; /* 设置元素的左边框的样式。 */
border-left-width: thin; /* 设置元素的左边框的宽度。 */

(3)padding(内边距)

基本语法

padding : length

语法取值

length  :  由浮点数字和单位标识符组成的长度值 | 或者百分数。
百分数是基于父对象的宽度。不允许负值。

属性列表

padding-top padding-right padding-bottom padding-left

使用说明

检索或设置对象四边的内边距。对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。

如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。

如果只提供一个,将用于全部的四边。

如果提供两个,第一个用于上-下,第二个用于左-右。

如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

在IE5.5+中此属性支持内联对象使用。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

代码示例

padding: 20px;					/* 上下左右都是一个值 */
padding: 10px 20px; /* 上下、左右依次设置 */
padding: 10px 10px 20px; /* 上、左右、下依次设置 */
padding: 10px 20px 30px 40px; /* 上、右、下、左依次设置 */ padding-top: 20px; /* 单独设置上内边距 */
padding-bottom: 20px; /* 单独设置下内边距 */
padding-left: 20px; /* 单独设置左内边距 */
padding-right: 20px; /* 单独设置右内边距 */

(4)注意

默认的 margin 和 padding 的存在,而且不同的浏览器该值还不同。为了达到一致,我们一般在样式表的头部,需要一条初始化操作语句:

body, div, span {
margin: 0px;
padding: 0px;
}
上一篇:HTML+CSS之盒子模型


下一篇:c++类大四个默认函数-构造函数 析构函数 拷贝构造函数 赋值构造函数