西条るり 步兵:盒子模型

来源:百度文库 编辑:九乡新闻网 时间:2024/04/25 15:21:51

   在CSS中,一个独立的盒子模型由content(内容)、border(边框)、padding(内边距)和margin(外边距)4个部分组成。

 1、边框

   border 的属性主要有3个,分别是color、width和style。

(1)如果给出1个属性值,表示上下左右边框均为该值;

(2)如果给出2个属性值,前者表示上下边框的属性,后者表示左右边框的属性;

(3)如果给出3个属性值,前者表示上边框的属性,中间的数值表示左右边框的属性,后者表示下边框的属性;

(4)如果给出4个属性值,依次表示上、右、下、左边框的属性,即顺时针顺序。

   在设置边框时,在给元素设置background-color背景色时,IE作用的区域为content+padding,而Firefox则是content+padding+border。

示例:



test






2、内边距(padding)

   (1)设置1个属性值,表示上下左右4个padding均为该值;

   (2)设置2个属性值,前者为上下padding的值,后者为左右padding的值;

   (3)设置3个属性值,第1个为上padding值,第2个为左右padding的值,第3个位下padding的值;

   (4)设置4个属性值,按照顺时针方向,依次为上、右、下、左padding的值。

如果需要专门设置某一个方向的padding,可以使用padding-left、padding-right、padding-top或者padding-bottom来设置。

3、外边距(margin)

   margin指的是元素与元素之间的距离。

   边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器窗口的边框。这是因为body本身也是一个盒子,在默认情况下,body会有一个若干像素的margin,具体数值各个浏览器不尽相同。因此在body中的其他盒子,就不会紧贴着浏览器窗口的边框了。

示例:

body{
  border:1px black solid;
  background:#cco;
}

body是一个特殊的盒子,它的背景色会延伸到margin的部分,而其他盒子的背景色只会覆盖“padding+内容”部分(IE),或者“border+padding+内容”部分(firefox)。