CSS两种盒子模型

CSS两种盒子模型

尺寸

width：100px | 100%； -- 宽度
height：100px； -- 高度
min-height：最小高度
	理解：内容不足100的情况，高度最少也得100，内容超出100，那么内容多高，盒子就多高
max-height：最大高度
	理解：内容不足100，高度就是内容的高度，最大只能是100

内边距

别名：内补丁 内留白
理解：内容和边框之间的间距，父子关系，要设置在父元素身上
使用：
	单个使用：
		padding-top：20px；
		padding-left：20px；
		padding-bottom：20px；
		padding-right：20px；
	复合使用：
		padding：10px；	一个值会作用于四个方位
		padding：10px 20px；	两个值，第一个作用于上下，第二个左右
		padding：10px 20px 30px；	三个值，第一个上，第二个左右，第三个下
		padding：10px 20px 30px 40px；	上下左右（顺时针方向）

外边距

别名：外补丁 外距离
理解：边框和其他标签（盒子）之间的距离，兄弟关系
使用：
	单个使用：
		margin-top：40px；
		margin-right：30px；
		margin-bottom：40px；
		margin-left：100px；
	复合使用（和内边距一样）
补充：两个盒子，一个设置底部外边距，一个设置顶部外边距，取最大的那个；
实现盒子水平居中：margin：0 auto；（注意：只针对块级元素生效）

边框

理解：盒子的厚度
使用：
	单个使用：
		border-top：1px solid red；
		border-right：1px solid pikn；
		border-left：2px dotted green；
		border-bottom：1px dashed yellow；
	复合：
		border：1px solid red；
	线型：
	solid  --- 直线
	dotted --- 点线
	dashed --- 虚线

标准盒子&怪异盒子

标准盒子：
	总宽度= width + border +padding；
怪异盒子：
	总宽度= 你设置的宽度
如何转换：
	标准转怪异：box-sizing：border-box；