CSS盒模型的详细介绍

本篇内容主要讲解“CSS盒模型的详细介绍”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS盒模型的详细介绍”吧!

公司主营业务：成都网站建设、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出渝北免费做网站回馈大家。

为了给文档树中的各个元素排版定位（布局），浏览器会根据渲染模型（是讲元素怎么在页面上定位及布局的，包括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 官方：

     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;  }     
 
First element of list
 Second element of list is  a bit longer to illustrate wrapping. 
  

示意图：

margin

'margin' 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的简写，表明 margin 的大小范围。它的值可以是宽度值、百分比值或‘auto’这3者之一，注意：宽度值必须带有单位。

margin简写

1. 以上、右、下、左的顺序给以上四个值赋值。

CSS codemargin: 1px 2px 3px 4px;

等价于：

CSS codemargin-top: 1px  margin-right: 2px  margin-bottom: 3px  margin-left: 4px

记住，从上面开始，顺时针旋转一圈。

2. 以上下、左右的顺序赋值

CSS codemargin: 1px 2px;

那么相当于：

CSS codemargin-top: 1px  margin-right: 2px  margin-bottom: 1px  margin-left: 2px

这种赋值方式，适合下面讲到的 *-top，*-right，*-bottom，*-left的简写的赋值，如padding，border-width，border-color等，下面不再说明。

可以应用在什么元素上

非table类型的元素，以及table类型中table-caption, table 和inline-table这3类。例如 TD TR TH等，margin是不适用的。

什么时候无效

对于行内非替换元素（例如 SPAN），垂直方向的margin不起作用。例如：

 ddd