什么是CSS的盒子模式呢?在网页设计中我们常听的属性名是:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒模式都具备这些属性。
为了给文档树中的各个元素排版定位(布局),浏览器会根据渲染模型(是讲元素怎么在页面上定位及布局的,包括position和float等等,visual formatting model)为每个元素生成四个嵌套的矩形框,分别称作content box、padding box、border box 和margin box。
以上说的四种类型是不可分割的,并可能会重合,这就是CSS规范中描述的“盒模型”(box model),也就是以CSS的角度去看一个元素被渲染后的抽象形态。是讲一个元素自身的构成部分,不同于布局:多个元素在页面上的定位。
51CTO推荐阅读:CSS布局:Web标准必备小结
<!--EndFragment-->
上面的大框,代表一个元素生成的矩形区域,也就是 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 官方:
- <!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>
示意图: