首页 > 代码库 > css之盒模型
css之盒模型
盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成，一个盒子中主要的属性就5个：width、height、padding、border、margin。
下面一一介绍盒子中的区域
width
宽度，CSS中width指的是内容的宽度，而不是盒子的宽度，CSS中height指的是内容的高度，而不是盒子的高度
width:200px;height: 200px;padding:50px;margin: 50px;border: 5px solid red;background-color: green;
上面的代码，设置的宽度为200px，那么内容的宽度则为200px，但是当我们把鼠标移到盒子上，显示的宽度为310px, 此宽度为盒子的宽度，真实占有宽度= 左border + 左padding + width + 右padding + 右border，如果想保持一个盒子的真实占有宽度不变，那么加width就要减padding。加padding就要减width。
比如写三个402*402的盒子，答案会有无穷多种，只有按照上述公式计算组合即可
.box1{width: 400px;height: 400px;border: 1px solid red;}.box2{width: 200px;height: 200px;border: 6px solid red;padding: 95px;}.box3{width: 0px;height: 0px;padding: 200px;border: 1px solid red;}
<div class="box1">第1个盒子</div><div class="box2">第2个盒子</div><div class="box3">第3个盒子</div>padding
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有boder以内的区域。
padding是4个方向的，所以我们能够分别描述4个方向的padding。方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
小属性：这种适合只有一个方向需要设置值的时候采用，不然各个方向都要写很麻烦。
padding-top: 30px;padding-right: 20px;padding-bottom: 40px;padding-left: 100px;
综合属性：方向为上、右、下、左
/*如果写了四个（表示方向为 上、右、下、左）*/padding:30px 20px 40px 100px;/*上、右、下、左（和右一样）*/padding: 20px 30px 40px;
/*如果写了两个（表示方向为 上、右、下（和上一样）、左（和右一样））*/padding:30px 20px;/*如果写了一个（表示方向为所有方向）*/padding:30px;
一般的用法是：用小属性层叠大属性
padding: 20px; /*各个方向都设置为20*/
padding-left: 30px;/*左边单独设置为30*/
不能把小属性，写在大属性前面
padding-left: 30px;padding: 20px; /*这样写上边一行已经失去意义了*/
下面考一考你是否真的掌握了？说出下面盒子真实占有宽高
div{ width: 200px; height: 200px; padding: 10px 20px 30px; padding-right: 40px; border: 1px solid #000; }真实占有宽度 = 200（内容宽） + 20（左填充） + 40（右填充） + 1（左边框） + 1（右边框） = 262px
内边距会影响盒子大小，但是继承的宽度， padding不会挤开 。
一些元素，默认带有padding，比如ul标签，所以，我们为了做站的时候，便于控制，总是喜欢清除这个默认的padding：
*{margin: 0;padding: 0;}*的效率不高，所以我们使用并集选择器，罗列所有的标签
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}border
border就是边框。边框有三个要素：粗细、线型、颜色。颜色如果不写，默认是黑色。另外两个属性不写，显示不出来边框。border在各大浏览器中渲染会有细微差别，具体看这篇专门有介绍
border: 1px solid red;
border是一个大综合属性，上面代码是把4个边框，都设置为1px宽度、线型实线、red颜色。
border属性能够被拆开，有两大种拆开的方式：
1） 按3要素:
border-width、border-style、border-color
border-width:10px; → 边框宽度border-style:solid; → 线型border-color:red; → 颜色
如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：
border-width:10px 20px;border-style:solid dashed dotted;border-color:red green blue yellow;
2） 按方向：
border-top、border-right、border-bottom、border-left
border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;
按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句：
border-top-width:10px;border-top-style:solid;border-top-color:red;
border-right-width:10px;border-right-style:solid;border-right-color:red;
border-bottom-width:10px;border-bottom-style:solid;border-bottom-color:red;
border-left-width:10px;border-left-style:solid;border-left-color:red;
border可以没有
border:none;/*某一条边没有*/border-left: none;/*或者*/border-left-width: 0;
css之盒模型