一、盒子模型解释
- 1.1、元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：
CSS盒模型和IE盒模型的区别：
- 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
- IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
- 注意：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分。
- 1.2、把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。
二、盒子的一些设置
- 2.1、设置盒子的宽高
/* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ width:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */ height:200px;
- 2.2、设置盒子的边框
- 设置一边的边框，比如顶部边框，可以按如下设置：
/* 设置顶部边框颜色为红色 */ border-top-color:red; /* 设置顶部边框粗细为10px */ border-top-width:10px; /* 设置顶部边框的线性为实线，常用的有： solid(实线) dashed(虚线) dotted(点线); */ border-top-style:solid;
- 可以把上面的三局代码用一句代替，如下，空格隔开，没有顺序
border-top:10px solid red;
设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边
- 四个边如果设置一样，可以将四个边的设置合并成一句：
border:10px solid red;
- 2.3、设置内间距 padding
- 设置盒子四边的内间距，可设置如下：
padding-top:30px; /* 设置顶部内间距30px */ padding-left:50px; /* 设置左边内间距50px */ padding-right:40px; /* 设置右边内间距40px */ padding-bottom:60px; /* 设置底部内间距60px */
- 上面的设置可以简写如下： 四个值按照顺时针方向，分别设置的是
上 右 下 左四个方向的内边距值。
padding：20px 40px 50px 30px;
- padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
- 3 个值：设置顶部内边距为20px，左右内边距为40px，底部内边距为50px
padding：20px 40px 50px;
- 2 个值：设置上下内边距为20px，左右内边距为40px
padding：20px 40px;
- 1 个值：设置四边内边距为20px
padding：20px;
- 2.4、设置外间距 margin：外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。
三、盒模型的实际尺寸
- 3.1、 按照下面代码制作页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子的实际尺寸</title> <style type="text/css"> .box01{width:50px;height:50px;background-color:red;} .box02{width:50px;height:50px;background-color:red;border:50px solid #000} .box03{width:50px;height:50px;background-color:red;border:50px solid #000;padding: 50px;} </style> </head> <body> <div class="box01">1</div> <br/> <div class="box02">2</div> <br> <div class="box03">3</div> </body> </html>
网络异常，图片无法展示
|
通过上面的页面得出结论：盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下
盒子宽度 = width + padding左右 + border左右 + margin左右
盒子高度 = height + padding上下 + border上下 + margin上下
