首先,想像一下,页面的构成元素都有什么?恩~~,SPAN DIV TABLE INPUT IMG 等等等等。
这些元素在页面上都是怎么放置的呢?像 SPAN IMG INPUT 这样的元素是行内元素,放置的时候可以在一行,而DIV会独占一行放置……
但是不管它们这些元素怎么放置,有一点是肯定的,那就是,每个元素的形状都是矩形的,严格的说,元素形成了一个矩形的区域,这个区域,被称作box,也就是盒子(把它翻译成盒子还有一个原因,盒子能装东西,呵呵),页面上所有的元素都会形成一个矩形的区域,不信你试试,你那儿要能出来椭圆的,那你的浏览器就太牛了!附加一点,这些矩形肯定都是规规矩矩的水平的放置的,没有斜的,放心放心,不会斜的。
今天要说的就是这个矩形区域的构成,各个部分的划分等。
盒模型
总述
为了给文档树中的各个元素排版定位(布局),浏览器会根据渲染模型(是讲元素怎么在页面上定位及布局的,包括 position 和 float 等等,visual formatting model)为每个元素生成四个嵌套的矩形框,分别称作content box、padding box、border box 和margin box,它们是不可分割的,并可能会重合,这就是 CSS规范中描述的“盒模型”(box model),也就是以CSS的角度去看一个元素被渲染后的抽象形态。 是讲一个元素自身的构成部分,不同于布局:多个元素在页面上的定位。
有图有真相:
一大堆名词解释,比较让人头疼的部分……
上面的大框,代表一个元素生成的矩形区域,也就是 box,每一个 box 都包括一个 content 区域(元素的内容,如文本,图形等)以及环绕其四周的 padding(元素的内边距,填充部分)、border (元素的边框) 和 margin (元素的外边距) 区域。
padding、border 和 margin 区域都包括 top、right、bottom、left 四部分。如图所示(“LM”代表left margin,“RP”代表right padding,“TB”代表top border……)。
边界
上述四个区域(content、 padding、border和margin)分别有他们自己的边界,细化来说,每个区域都有top、right、bottom、left四个边界。
⃟ content 边界/内边界
Content 边界环绕在由该元素的宽和高决定的一个矩形上,这个尺寸通常由该元素渲染后的内容决定。这四个content边界组成的矩形框就是该元素的 content box。
⃟ padding 边界
Padding 边界环绕在该元素的 padding区域的四周,顾名思义,填充背景色,在此范围内有效。如果padding的宽度为0,则padding边界与content边界重合。这四个padding边界组成的矩形框就是该元素的padding box。
⃟ border 边界
Border 边界环绕在该元素的border区域的四周,如果border的宽度为0,则border边界与padding边界重合。这四个border边界组成的矩形框就是该元素的 border box。
⃟ margin 边界/外边界
Margin 边界环绕在该元素的margin区域的四周,如果margin的宽度为0,则margin边界与border边界重合。这四个
margin边界组成的矩形框就是该元素的 margin box。
下面分别说一下各个部分。
一个简单的例子,来自 W3C 官方:
margin
简介
'margin' 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的简写,表明 margin 的大小范围。
它的值
可以是 宽度值、百分比值或 ‘auto’这3者之一,注意:宽度值必须带有单位。
margin简写
1. 以 上、右、下、左 的顺序给以上四个值赋值。如:
2. 以上下、左右的顺序赋值
可以应用在什么元素上
非 table 类型的元素,以及 table 类型中 table-caption, table 和 inline-table这3类。例如 TD TR TH等,margin是不适用的。
什么时候无效
对于行内非替换元素(例如 SPAN),垂直方向的margin不起作用。
例如:
margin 折叠
垂直方向上的不同元素的相邻的margin在某些情况下,会发生折叠的现象。比如,两个 div ,上下相邻,上面 DIV 的margin-bottom 会和 下面 DIV 的 margin-top 产生折叠的现象,两个重叠成一个,具体宽度取较大的。
例如:
padding
简介:
padding是 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'的缩写。赋值的方法跟margin相同,只是没有 ‘auto’ 值。默认值是0。
它可以应用到的元素:
除 display 值是 ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-row’, ‘table-column-group’ 和 ’table-column’ 的所有元素。
border
border 是个比较复杂的东西。它是'border- top', 'border-right', 'border-bottom', 'border-left'。
千万别认为它跟前面的padding还有 margin一样只是设置width就好了。
border 包含3个部分,’border-width’,’border- color’,’border-style’,分别用来设置它的宽度,颜色和样式。适用于任何元素。
border-width 是 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'。默认值是0。可用值有‘thin’,‘medium’,‘thick’,以及常用的数值带单位的宽度值。
border-color 是'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'的简写。默认值是 ‘color’ 特性的值。
border-style 是'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'的简写。默认值是 none 特性的值。可用值有:’none’,’hidden’,’dotted’,’dashed’,’solid’,’double’,’groove’,’ridge’,’inset’,’outset’,有兴趣的可以逐个试试效果。
这篇里面专业名词好多,我写的都有点儿恶心……
快中暑了……
喜欢原汁原味的可以来这里看: http://www.w3.org/TR/CSS2/box.html
这些元素在页面上都是怎么放置的呢?像 SPAN IMG INPUT 这样的元素是行内元素,放置的时候可以在一行,而DIV会独占一行放置……
但是不管它们这些元素怎么放置,有一点是肯定的,那就是,每个元素的形状都是矩形的,严格的说,元素形成了一个矩形的区域,这个区域,被称作box,也就是盒子(把它翻译成盒子还有一个原因,盒子能装东西,呵呵),页面上所有的元素都会形成一个矩形的区域,不信你试试,你那儿要能出来椭圆的,那你的浏览器就太牛了!附加一点,这些矩形肯定都是规规矩矩的水平的放置的,没有斜的,放心放心,不会斜的。
今天要说的就是这个矩形区域的构成,各个部分的划分等。
盒模型
总述
为了给文档树中的各个元素排版定位(布局),浏览器会根据渲染模型(是讲元素怎么在页面上定位及布局的,包括 position 和 float 等等,visual formatting model)为每个元素生成四个嵌套的矩形框,分别称作content box、padding box、border box 和margin box,它们是不可分割的,并可能会重合,这就是 CSS规范中描述的“盒模型”(box model),也就是以CSS的角度去看一个元素被渲染后的抽象形态。 是讲一个元素自身的构成部分,不同于布局:多个元素在页面上的定位。
有图有真相:
一大堆名词解释,比较让人头疼的部分……
上面的大框,代表一个元素生成的矩形区域,也就是 box,每一个 box 都包括一个 content 区域(元素的内容,如文本,图形等)以及环绕其四周的 padding(元素的内边距,填充部分)、border (元素的边框) 和 margin (元素的外边距) 区域。
padding、border 和 margin 区域都包括 top、right、bottom、left 四部分。如图所示(“LM”代表left margin,“RP”代表right padding,“TB”代表top border……)。
边界
上述四个区域(content、 padding、border和margin)分别有他们自己的边界,细化来说,每个区域都有top、right、bottom、left四个边界。
⃟ content 边界/内边界
Content 边界环绕在由该元素的宽和高决定的一个矩形上,这个尺寸通常由该元素渲染后的内容决定。这四个content边界组成的矩形框就是该元素的 content box。
⃟ padding 边界
Padding 边界环绕在该元素的 padding区域的四周,顾名思义,填充背景色,在此范围内有效。如果padding的宽度为0,则padding边界与content边界重合。这四个padding边界组成的矩形框就是该元素的padding box。
⃟ border 边界
Border 边界环绕在该元素的border区域的四周,如果border的宽度为0,则border边界与padding边界重合。这四个border边界组成的矩形框就是该元素的 border box。
⃟ margin 边界/外边界
Margin 边界环绕在该元素的margin区域的四周,如果margin的宽度为0,则margin边界与border边界重合。这四个
margin边界组成的矩形框就是该元素的 margin box。
下面分别说一下各个部分。
一个简单的例子,来自 W3C 官方:
-
HTML code
-
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" > < HTML > < HEAD > < TITLE > Examples of margins, padding, and borders </ TITLE > < STYLE type ="text/css" > UL { background : yellow ; margin : 12px 12px 12px 12px ; padding : 3px 3px 3px 3px ; /* No borders set */ } LI { color : white ; /* text color is white */ background : blue ; /* Content, padding will be blue */ margin : 12px 12px 12px 12px ; padding : 12px 0px 12px 12px ; /* Note 0px padding right */ list-style : none /* no glyphs before a list item */ /* No borders set */ } LI.withborder { border-style : dashed ; border-width : medium ; /* sets border width on all sides */ border-color : lime ; } </ STYLE > </ HEAD > < BODY > < UL > < LI > First element of list </ LI > < LI class ="withborder" > Second element of list is a bit longer to illustrate wrapping. </ LI > </ UL > </ BODY > </ HTML >
margin
简介
'margin' 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的简写,表明 margin 的大小范围。
它的值
可以是 宽度值、百分比值或 ‘auto’这3者之一,注意:宽度值必须带有单位。
margin简写
1. 以 上、右、下、左 的顺序给以上四个值赋值。如:
-
CSS code
-
margin: 1px 2px 3px 4px;
-
CSS code
-
margin-top: 1px margin-right: 2px margin-bottom: 3px margin-left: 4px
2. 以上下、左右的顺序赋值
-
CSS code
-
margin: 1px 2px;
-
CSS code
-
margin-top: 1px margin-right: 2px margin-bottom: 1px margin-left: 2px
可以应用在什么元素上
非 table 类型的元素,以及 table 类型中 table-caption, table 和 inline-table这3类。例如 TD TR TH等,margin是不适用的。
什么时候无效
对于行内非替换元素(例如 SPAN),垂直方向的margin不起作用。
例如:
-
HTML code
-
< div style ="border:1px solid red;" > < span style ="margin:100px; background:gray;" > ddd </ span > </ div >
margin 折叠
垂直方向上的不同元素的相邻的margin在某些情况下,会发生折叠的现象。比如,两个 div ,上下相邻,上面 DIV 的margin-bottom 会和 下面 DIV 的 margin-top 产生折叠的现象,两个重叠成一个,具体宽度取较大的。
例如:
-
HTML code
-
< div style ="background-color:green; width:100px; height:100px;margin-bottom:100px;" > </ div > < div style ="background-color:red; width:100px; height:100px; margin-top:50px;" > </ div >
padding
简介:
padding是 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'的缩写。赋值的方法跟margin相同,只是没有 ‘auto’ 值。默认值是0。
它可以应用到的元素:
除 display 值是 ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-row’, ‘table-column-group’ 和 ’table-column’ 的所有元素。
border
border 是个比较复杂的东西。它是'border- top', 'border-right', 'border-bottom', 'border-left'。
千万别认为它跟前面的padding还有 margin一样只是设置width就好了。
border 包含3个部分,’border-width’,’border- color’,’border-style’,分别用来设置它的宽度,颜色和样式。适用于任何元素。
border-width 是 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'。默认值是0。可用值有‘thin’,‘medium’,‘thick’,以及常用的数值带单位的宽度值。
border-color 是'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'的简写。默认值是 ‘color’ 特性的值。
border-style 是'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'的简写。默认值是 none 特性的值。可用值有:’none’,’hidden’,’dotted’,’dashed’,’solid’,’double’,’groove’,’ridge’,’inset’,’outset’,有兴趣的可以逐个试试效果。
这篇里面专业名词好多,我写的都有点儿恶心……
快中暑了……
喜欢原汁原味的可以来这里看: http://www.w3.org/TR/CSS2/box.html
更多 说说标准系列 见:【分享】说说标准系列目录
原文地址:
http://topic.csdn.net/u/20100708/16/6cd03a69-10e8-4c06-8d17-365319990d75.html?04361624679125218