HTML布局之盒子模型

HTML布局之盒子模型

1.1盒子模型
    任何一个在页面上显示的HTML元素（无论是块级还是行内元素）都会呈现为一个盒子形状，即为盒子模型(box model)。
示意图：

    见附带图片！！！

    盒子首先以元素的width和height开始，宽和高可由元素的类型，元素内类容，或者指定的width和height属性决定。随后便是元素的padding和border。紧跟border的便是margin。
1.2 内外边距
    盒子模型的内边距、边框和外边距都是可选的，默认值是零。但是，每个浏览器都给元素应用了一个基本的margin和padding值来使得元素易读和易于区别。每个浏览器的各个元素的值都不一样。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
*{
margin: 0;
padding: 0;
}
1.2.1外边距
    外边距默认是透明的，因此不会遮挡其后的任何元素。通过设置CSS margin属性，可以在元素的四周设置指定大小的一段空间。
注意：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
1.2.2内边距
    内边距呈现了元素的背景，即背景应用于由内容和内边距、边框组成的区域。通过设置CSS padding属性，给元素内部提供指定大小的一个空间，并不和margin一样用来定位元素。
1.3边框
    边框处在元素内边据和外边据之间，设置了元素的轮廓。边框的设置需要三个值，宽度，样式，和颜色。简写模式中按照宽度（width），样式（style），颜色（color）的顺序即可。完整模式则分解为三个属性border-width，border-style和border-color。
例：
div {
border: 6px solid #ccc;//常见样式：单位宽度，实线，单色的边
}
1.4盒子的宽高
    设置宽高（width, height）属性，只是在设置内容部分的宽高。
    一个盒子的总宽=width+padding-left+padding-right+border-left+border-right。
    一个盒子的高度=height+padding-top+padding-bottom+border-top+border-bottom。
    当然实际显示的时候你还得考虑margin，但是有些浏览器里margin是会叠加的，所以还要根据上下文来考虑。
1、盒子模型自动设置宽度的方式
    放置一个块级元素于页面上，并且不设置它的定位属性(relative,absolute,fixed),即position:static,或者设置了position:relative的情况下，块的宽度是延伸自动填充满它的父元素的宽度区域
例：
HTML代码：
<div class="box1">For floated or absolutely positioned </div>
CSS代码：
.box1{
background:black;
color:White;
height:100px;
padding:10px;
border:20px solid Red;
margin:30px;
}
    放置一个块级元素于页面上，设置其浮动或者绝对定位时，块的宽度会收缩以致包裹紧贴内容。
例：
HTML代码
<div class="box2">For floated or absolutely positioned </div>
CSS 代码
.box2{
background:black;
color:White;
height:100px;
padding:10px;
border:20px solid Red;
margin:30px;
position:absolute;
}
注意：box1、box2均未设置宽度属性，不同的是box2进行了绝对定位。
2、盒子模型的高度
    无论内容区域如何定位，如果高度，最小高度(min-height)，最大高度(max-height等没有被声明的话，内容区域高度与内容的高度是相等的。
1.5浏览器兼容性
    IE5和 6 不支持上述盒子模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
1.6实际盒子模型应用
    一个元素的宽度被设置为100%时，它不应该有任何的外边距，内边距，或者是边框。
HTML代码：
<div class="contain">
<div class="box"></div>
</div>
CSS代码：
.box{
background:black;
width:100%;
height:100px;
}
.contain{
background:yellow;
height:120px;
width:200px;
}
    没有margin和padding的情况下，100%的内容能恰到好处的填充父元素。为类为box的盒子加入了margin和padding，元素出现了错位，并且只能显示左侧的margin。
CSS代码：
.box{
margin:10px;
padding:10px;
}