CSS——盒模型基本属性

盒模型
width：内容的宽度，不是盒子的宽度
height：内容的高度，不是盒子的高度
padding：内边距
border：边框
margin：外边距

	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border:1px solid red;
			padding: 50px;
		}
	</style>

这个盒子width:200px; height:200px; 但真实占有的宽高是302*302，因为还有padding、border。宽度和真实占有的宽度不是一个概念。

下面两个盒子的真实占有宽高完全相同，都是302*302：

		.box1{
			width:100px;
			height:100px;
			padding:100px;
			border:1px solid red;
		}
		.box2{
			width:250px;
			height:250px;
			padding:25px;
			border:1px solid red;
		}

如果想保持一个盒子的真实占有宽度不变，那么加width就要减padding，加padding就要减width。

padding就是内边距，padding的区域有背景颜色，CSS2.1前提下，并且背景颜色一定和内容区域的相同，也就是说，background-color将填充所有border以内的区域。
有四个方向，padding-top，padding-right，padding-bottom，padding-left。
如果不写padding-left，那就是没有左内边距。
快捷键是pdt、pdr、pdb、pdl然后按tab。

综合属性：
如果写了四个值，则padding: 30px 20px 40px 100px; 即上、右、下、左。
如果只写了3个值，则padding: 20px 30px 40px; 即上、右、下。没有左，说明左和右是一样的。
如果只写了2个值，则padding: 30px 40px;即上、右。没有下，说明和上一样；没有左，说明和右一样。等价于padding: 30px 40px 30px 40px。

	div{
		padding: 20px;
		padding-left: 30px;
	}

以上是小属性层叠大属性，也就等价于padding: 20px 20px 20px 30px。
但是不能把小属性写在大属性前面（如下）：

	div{
		padding-left: 30px;
		padding: 20px;
	}

题目1，说出下面盒子真实占有宽高：

	div{
		width: 200px;
		height: 200px;
		padding: 10px 20px 30px;
		padding-right: 40px;
		border: 1px solid #000;
	}

真实占有宽度=200+20+40+1+1

题目2，说出下面盒子真实占有宽高：

	div{
		width: 200px;
		height: 200px;
		padding-left: 10px;
		padding-right: 20px;
		padding: 40px 50px 60px;
		padding-bottom: 30px;
		border: 1px solid #000;
	}

padding-left: 10px; 和padding-right: 20px; 没用，因为后面的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
边框。三个要素：粗细、线型、颜色。
颜色如果不写，默认是黑色。如果另外两个属性不写，则显示不出来边框。

所有线型：
a dotted border /a dashed border /a solid border /a double border /a groove border /a ridge border /an inset border /an outset border

border: 10px ridge red; 在chrome和firefox、IE中会有细微差别。

border是一个大综合属性，
border: 1px solid red; 就是把4个边框都设置为1px宽度、线型实线、red颜色。

border属性能够被拆开，有两种方式：
1）按3要素: border-width、border-style、border-color
border-width: 10px; →边框宽度
border-style: solid; →线型
border-color: red; →颜色
等价于border: 10px solid 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;

等价于border: 10px solid red;

border: 10px solid red;
border-right-color: blue;

border: 10px solid red;
border-style: solid dashed;

可以没有border→border: none;
某一条边没有→border-left: none;
也可以调整左边边框的宽度为0→border-left-width: 0;

用border制作一个三角形：

	div{
		width: 0px;
		height: 0px;
		border: 30px solid white;
		border-bottom: none;
		border-top-color: blue;
	}