盒子模型就是把HTML页面中的元素看成是矩形盒子，也就是可以容纳内容的容器。CSS盒模型包括：边框、边距、填充和实际内容。1.边框（border）div{width:200px;高度：200px；/*border-width边框粗细，一般指定为具体的像素值*/border-width:5px;/*border-style边框样式，常用的有：solid：实线边框｜dashed：虚线边框｜dotted：虚线边框*/border-style:solid;/*border-color边框颜色*/border-color:blue;}border属性可以简写为：border:5pxsolidblue;我们也可以单独设置某个边框的样式：border-top:5pxsolidblue;在表格中，每个单元格都是一个框，设置单元格边框时，相邻单元格的边框会重叠并变成border-width的两倍，此时可以使用border-collapse合并边框：border-collapse:collapse;需要注意的是边框会影响盒子的实际大小。上面代码中，盒子的宽高都是200px，边框是5px，那么盒子的实际大小就是210px*210px。2.Paddingpadding属性用来设置padding，即边框和内容之间的距离。左填充：8px；/*左填充*/padding-right:8px;/*右内边距*/padding-top:8px;/*顶部填充*/填充底部；8像素；/*Bottompadding*/padding属性缩写可以有1到4个值：padding:8px;(表示上下左右padding均为8px)padding:8px10px;(表示上下padding为8px，左右paddingmargin为10px)padding:8px10px20px;(表示toppadding为8px，左右padding为10px，bottompadding为20px)padding:8px10px16px20px;（表示toppadding为8px，rightpadding为10px，bottompadding为16px，leftpadding为20px，内存：顺时针方向）当我们给box添加padding的时候，content和border之间有一段距离，并且padding影响框的实际大小Size如果框已经有宽度和高度，设置padding会拉伸框；如果盒子本身没有指定宽度/高度，设置padding不会拉伸盒子。3.marginmargin属性用于设置边距，即框与框之间的距离。margin的用法与padding相同。在实际开发中，边距可以使块级框水平居中：.box{width:500px;/*1.设置框的宽度*/margin:0auto;/*2.设置框的左右外边距为auto*/}如果要使内联元素或内联块元素水平居中，可以在其父元素上加上text-align:center;当两个相邻的块元素相遇时合并相邻块元素的垂直边距时，如果上面的元素设置了margin-bottom，而下面的元素设置了margin-top，那么它们之间的垂直距离不是两个，但两个值中的较大者，这种现象称为相邻块元素合并垂直边距。.box1{margin-bottom:20px;}.box2{margin-top:10px;}
