Python HTML和CSS 5：CSS盒子模型

作者: IIronMan | 来源:发表于2019-02-22 22:09 被阅读1次

CSS3 盒子模型
css 盒子模型
前端一些面试题
2019-06-24
CSS 盒子模型
2019前端基础面试秘籍
2019前端基础面试秘籍
Python HTML和CSS 5：CSS盒子模型
html5+css3
css 盒子模型的认识了解

一、盒子模型解释

1.1、元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：

标准盒子模型示意图
IE盒子模型示意图
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上下