盒子模型（自学笔记）

看透网页布局的本质

把网页元素比如图片文字等等，放入盒子，然后利用css摆盒子的过程，就是网页布局

盒子模型

盒子边框（border）

属性	作用	值
border-width	边框粗细	像素值
border-style	边框样式	solid(实线)；dashed（虚线）；dotted(点线)
border-color	边框颜色	red;blue等

连写一般按照以下顺序书写：
border:width style color;
在border后加入方位就可以指定单边的边框样式如：
例：

border-top:1px solid red;

表格的细线边框

table,td {
border-collapse: collapse(表格边框合并）
)

内边距（padding）

padding属性用于设置内边距，是指边框与内容之间的距离
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
注意：后面跟几个数值所表达的意思是不一样的

值得个数	表达的意思
1个值	padding:3px; 表示上下左右都是3px
2个值	padding:3px 5px; 表示上下3px,左右5px
3个值	padding:3px 5px 10px; 表示上3px,左右5px ,下10px
4 个值	padding:3px 5px 10px 15px; 表示上3px,右5px ,下10px，下15px

padding会撑开带有width和height的盒子

外边距（margin）

同内边距用法相同

外边距实现盒子水平居中

text-align:center;可以让盒子内容（文字、行内元素、行内块元素）居中对齐

margin:0 auto;	让盒子水平居中对齐
margin-left: auto	左侧自动充满，盒子靠右
margin-right: auto	右侧自动充满，盒子靠左
margin: auto	上下左右自动充满，盒子居中

实现盒子居中必须满足的条件

1. 必须是块级元素
2. 盒子必须设置宽度（width）

然后把左右外边距都设置成auto就能是盒子水平居中

清除默认内外边距

* {
	margin:0;
	padding;0;
}

行内元素没有上下外边距，只有左右外边距

外边距合并

使用margin定义块元素的垂直外边距是时，会出现外边距合并

相邻块元素的垂直外边距合并

当上下相邻的两个块元素 相遇时，如果上面的块元素有margin-bottom, 下面的块级元素有margin-top,它们的垂直间距不是margin-bottom+margin-top之和而是取它们中较大的值，这被称为相邻块元素垂直外边距合并（也称外边距塌陷）

嵌套块元素垂直外边距合并

对于两个嵌套的块级元素，如果父元素没有上内边距和边框，则父元素的上边距会与子元素的上边距发生合并，合并后外边距为两元素中的较大者，即是父元素的上边距为零也会发生合并

解决方法：

1. 为父元素添加1px的上内边距或上边框
2. 为父元素设定：overflow:hidden

content宽度和高度

外盒尺寸计算（元素空间尺寸）
空间高度=height+padding+border+margin
空间宽度=widtht+padding+border+margin

内盒尺寸计算（元素实际大小）
实际高度=height+padding+border
实际宽度=width+padding+border

padding 不会撑开盒子的情况

如果一个盒子没有指定宽度，就会沾满父亲的宽度，和父亲一样宽，这时padding 不会撑开盒子