CSS基础（四）：盒模型
CSS盒模型
HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。下图是W3C对于盒模型的描述图。
使用Firebug，可以轻松地查看到盒子的布局大小。
盒子本身的大小是这样计算的：
width: width + padding-left + padding-right + border-left + border-right
height: height + padding-top + padding-bottom + border-top + border-bottom
静态定位或相对定位的盒子
当放置一个块级元素于页面上时，并且不设置它的定位属性(relative,absolute,fixed),即position:static,或者设置了position:relative的情况下，块的宽度是延伸自动填充满它的父元素的宽度区域。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>盒子模型</title> <style type="text/css"> .box1 { background:black; color:White; height:100px; padding:10px; border:20px solid Red; margin:30px; } </style> </head> <body> <h2>静态定位和相对定位的盒子</h2> <div class="box1">静态定位和相对定位的盒子</div> </body> </html>
注意上面的盒子是没有声明宽度的，所以默认宽度为100%，padding 和 border 会向内推动，而不是向外扩展。
但是当声明宽度后，那么 padding 就会向外延展。
浮动和绝对定位的盒子
当设置浮动float元素和绝对定位元素，他们的结果却恰恰相反，他们会收缩以致包裹紧贴内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>盒子模型</title> <style type="text/css"> .box1 { background:black; color:White; height:100px; padding:10px; border:20px solid Red; margin:30px; position:absolute; } </style> </head> <body> <h2>浮动和绝对定位的盒子</h2> <div class="box1">浮动和绝对定位的盒子</div> </body> </html>
亲眼目睹一下
想看看组成页面的每个单独的“盒子”吗？试着把这行代码暂时放入样式表：
* { border: 1px solid red !important; }
