CSS盒模型
如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)
盒模型图解
填充、边框和边界都分为“上右下左”四个方向,既可以分别定义,也可以统一定义。
CSS内定义的宽(width)和高(height),指的是填充以内的内容范围,因此一个元素:
实际宽度 = 左边界 + 左边框 + 左填充 + 内容宽度(width) + 右填充 + 右边框 + 右边界
实际高度 = 上边界 + 上边框 + 上填充 + 内容高度(height) + 下填充 + 下边框 + 下边界
例如有CSS定义如下:
#menu {
background: #9cf;
margin: 20px;
border: 10px solid #039;
padding: 40px;
width: 200px;
}
则其实际宽度