盒子模型基础（一）

盒子模型基础（一）

参考书籍：基于web标准的网页设计与制作（第二版）

网页就是由多个盒子通过不同的排列方式（上下排列、左右排列、嵌套排列）。（p118）

如图：

.div{
background:#9cf;
margin:20px;
border:10px solid #039;
padding:40px;
width:200px;
height:88px;
}

盒子模型

则该像素占据的网页总宽度为：20+10+40+200+40+10+20=340px。其中元素内容宽度为200px,高度为88px。

默认情况下盒子边框为0，背景是透明的，所以不设置css样式下元素盒子不可见，但是依然占据网页空间。

通过css重新定义元素样式，可以分别设置元素盒子的margin、padding、border的宽度值，还可以设置盒子边框和背景的颜色，巧妙设置可以美化网页元素。（p120、121）

这是两种div居中的方法：

居中对齐