盒子模型是html布局的基础,直接上图(图来自菜鸟教程)
把HTML中的元素看做是一个矩形的盒子（盛装内容的的容器），每个容器都是由元素内容、内边距（padding）、边框（border）和外边距（margin）组成。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
注意:
盒子模型有一个属性设置会影响内边距是否会撑开盒子
box-sizing:盒子的大小模型设定
默认值: content-box:当内容的大小是固定的情况下，那么就是用content-box
border-box:当希望整个盒子大小是固定的，不会因为设置了内边距和border而撑开改变大小。
浏览器的兼容性问题
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
盒子模型基础布局代码介绍
* 使用width来设置盒子内容区的宽度
*使用height来设置盒子内容区的高度
width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，
盒子可见框的大小由内容区，内边距和边框共同决定
width: 300px;
height: 300px;
* 为元素设置边框border
要为一个元素设置边框必须指定三个样式
border-width:边框的宽度
border-color:边框颜色
border-style:边框的样式
* 设置边框的宽度
border-width:10px ;
使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值，
则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的
如果指定三个值，
则三个值会分别设置给 上 左右 下
如果指定两个值，
则两个值会分别设置给 上下 左右
如果指定一个值，则四边全都是该值
除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度
border-width:10px 20px 30px 40px ;
border-width:10px 20px 30px ;
border-width: 10px 20px ;
border-width: 10px;
border-left-width:100px ;
* 设置边框的颜色
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
border-xxx-color
border-color: red;
border-color: red yellow orange blue;
border-color: red yellow orange;
border-color: red yellow;
* 设置边框的样式
可选值：
none，默认值，没有边框
solid 实线
dotted 点状边框
dashed 虚线
double 双线
style也可以分别指定四个边的边框样式，规则和width一致，
同时它也提供border-xxx-style四个样式，来分别设置四个边
border-style: double;
border-style: solid dotted dashed double;
*设置边框border
- 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
- 而且没有任何的顺序要求
- border一指定就是同时指定四个边不能分别指定
border-top border-right border-bottom border-left
可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
border: red solid 10px ;
border-left: red solid 10px ;
border-top: red solid 10px;
border-bottom: red solid 10px;
border-left: red solid 10px;
* 内边距padding
指的是盒子的内容区与盒子边框之间的距离
一共有四个方向的内边距，可以通过：
padding-top
padding-right
padding-bottom
padding-left
来设置四个方向的内边距
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
盒子的大小由内容区、内边距和边框共同决定
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
可见宽的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
设置上内边距
padding-top: 100px;
设置右内边距
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
使用padding可以同时设置四个边框的样式，规则和border-width一致
padding: 100px;上下左右都是100px
padding: 100px 200px;上下是100px, 左右是200px
padding: 100px 200px 300px;上是100px, 左右是200px, 下是300px
padding: 100px 200px 300px 400px; 上是100px, 右是200px, 下是300px, 左是400px
*外边距margin
外边距指的是当前盒子与其他盒子之间的距离，
他不会影响可见框的大小，而是会影响到盒子的位置。
盒子有四个方向的外边距：
margin-top
margin-right
margin-bottom
margin-left
由于页面中的元素都是靠左靠上摆放的，
所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
而如果是设置右和下外边距会改变其他盒子的位置
设置box1的上外边距，盒子上边框和其他的盒子的距离
margin-top: 100px;
左外边距
margin-left: 100px;
设置右和下外边距
margin-right: 100px;
margin-bottom: 100px;
外边距也可以指定为一个负值，
如果外边距设置的是负值，则元素会向反方向移动
margin-left: -150px;
margin-top: -100px;
margin-bottom: -100px;
margin-bottom: -100px;
margin还可以设置为auto，auto一般只设置给水平方向的margin
如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
垂直方向外边距如果设置为auto，则外边距默认就是0
如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，
就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
以使子元素在父元素中水平居中
margin-left: auto;
margin-right: auto;
外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,
规则和padding一样
margin: 0 auto;
注意* 垂直外边距的重叠
* - 在网页中相邻的垂直方向的外边距会发生外边距的重叠
* 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
* 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
网友评论