盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成，一个盒子中主要的属性就5个：width、height、padding、border、margin。

宽度，CSS中width指的是内容的宽度，而不是盒子的宽度，CSS中height指的是内容的高度，而不是盒子的高度

background-color:green;

上面的代码，设置的宽度为px，那么内容的宽度则为px，但是当我们把鼠标移到盒子上，显示的宽度为px,　此宽度为盒子的宽度，真实占有宽度=左border+左padding+width+右padding+右border，如果想保持一个盒子的真实占有宽度不变，那么加width就要减padding。加padding就要减width。

比如写三个*的盒子，答案会有无穷多种，只有按照上述公式计算组合即可

padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有boder以内的区域。

padding是4个方向的，所以我们能够分别描述4个方向的padding。方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。

小属性：这种适合只有一个方向需要设置值的时候采用，不然各个方向都要写很麻烦。

综合属性：方向为上、右、下、左

一般的用法是：用小属性层叠大属性

不能把小属性，写在大属性前面

下面考一考你是否真的掌握了？说出下面盒子真实占有宽高

真实占有宽度=（内容宽）+20（左填充）+40（右填充）+1（左边框）+1（右边框）=px

内边距会影响盒子大小，但是继承的宽度，padding不会挤开。

一些元素，默认带有padding，比如ul标签，所以，我们为了做站的时候，便于控制，总是喜欢清除这个默认的padding：

*的效率不高，所以我们使用并集选择器，罗列所有的标签

border

border就是边框。边框有三个要素：粗细、线型、颜色。颜色如果不写，默认是黑色。另外两个属性不写，显示不出来边框。border在各大浏览器中渲染会有细微差别，具体看这篇专门有介绍

border是一个大综合属性，上面代码是把4个边框，都设置为1px宽度、线型实线、red颜色。

border属性能够被拆开，有两大种拆开的方式：

如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：

按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句：

不支持高度小于12px的盒子，任何小于12px的盒子，在IE6中看都偏大，原因是在IE6下，所有标签的最小高度都是为12px

解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。

height:4px;_font-size:0px;margin

margin和padding的用法差不多，只不过一个是内边距，一个是外边距，不过margin的值可以设置为负值

标准文档流中，竖直方向的margin不叠加，以较大的为准。

如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的

margin的值可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子居中了

margin:0auto;

注意：

1）使用margin:0auto;的盒子，必须有width，有明确的width

2）只有标准流的盒子，才能使用margin:0auto;居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0auto;

3）margin:0auto;是在居中盒子，不是居中文本。文本的居中，要使用text-align:center;

margin:0auto;→让这个div自己在大容器中居中。text-align:center;→让这个div内部的文本居中。







































昆明白癜风权威医院
北京看白癜风的最专业医院