一篇文章带你实操代码理解盒子模型

https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）

- 一、盒子模型的几个关键词
- 二、盒子有尺寸，用CSS写法为宽度（width）和高度（height）
- 三、盒子有边框，用CSS写法为上下左右边框（border）
- - 3.1边框线型 border-style
  - 3.2边框颜色
  - 3.3边框的复合属性
  - 3.4单独控制上下左右边框
  - - 3.4.1上边框 border-top
    - 3.4.2下边框 border-bottom
    - 3.4.3左边框border-left
    - 3.4.4右边框border-right
- 四、盒子有内边距，用CSS写法为上下左右内边距（padding）
- - 4.1padding的复合属性
  - 4.2单独控制上下左右边框
  - - 4.2.1上边内边距 padding-top
    - 4.2.2底边内边距 padding-bottom
    - 4.2.3左边内边距 padding-left
    - 4.2.4右边内边距 padding-right
- 五、盒子有外边距，用CSS写法为外边距（margin）
- - 5.1margin的复合属性
  - 5.2单独控制上下左右边框
  - - 5.2.1上边外边距 margin-top
    - 5.2.2下边外边距 margin-bottom
    - 5.2.3左边外边距 margin-left
    - 5.2.4左边外边距 margin-left
- 六、盒子模型实例
- 七、如何隐藏一个元素

一、盒子模型的几个关键词

内容(content)、填充(padding通俗讲就是内边距)、边框(border)、边界(margin通俗讲就是外边距)。

用图片来演示一下
在这里插入图片描述
简单用画图工具演示一下就是

二、盒子有尺寸，用CSS写法为宽度（width）和高度（height）

定义盒子的宽度和高度

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 200px;height: 100px;background-color: blue;}</style></head><body><div id="box1">Hello, I am box1</div></body>
</html>

运行结果
在这里插入图片描述
注意：只有块元素才可以设置宽度和高度，行内元素无法设置宽度和高度。

三、盒子有边框，用CSS写法为上下左右边框（border）

3.1边框线型 border-style

参数：
none : 无边框 dotted : 点线边框 dashed : 虚线边框 solid : 实线边框 double : 双线边框

3.2边框颜色

检索或设置对象的边框颜色。
语法：

 border-color : color

3.3边框的复合属性

语法：

border : border-style||border-width|| border-color

例如我要设置 p标签的边框为：线型实线，宽度20px ，颜色为红色

p { border: solid 20px red; }

3.4单独控制上下左右边框

3.4.1上边框 border-top

检索或设置对象的上边框。这是一个复合属性。
语法：

 border-top: border-style||border-width||border-color

例如我要设置 p标签的上边框为：线型实线，宽度20px ，颜色为红色。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 200px;height: 100px;border-top: solid 20px red;}</style></head><body><div id="box1">Hello, I am box1</div></body>
</html>

运行效果
在这里插入图片描述

3.4.2下边框 border-bottom

检索或设置对象的下边框。这是一个复合属性。
语法：

 border-bottom :border-style||border-width||border-color

比如我要设置 p标签的下边框为：宽度2px ，线型实线，颜色为红色。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 200px;height: 100px;border-bottom: 20px solid red;}</style></head><body><div id="box1">Hello, I am box1</div></body>
</html>

运行效果
在这里插入图片描述

3.4.3左边框border-left

3.4.4右边框border-right

左边框 border-left、右边框 border-right同上

四、盒子有内边距，用CSS写法为上下左右内边距（padding）

4.1padding的复合属性

检索或设置对象四边的内边距，换句话说，也就是边框与内容之间的距离。
语法：

padding :length

例如我要边框与内容之间的距离为50px

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 200px;height: 100px;border: 20px solid red;padding: 50px;}</style></head><body><div id="box1">Hello, I am box1</div></body>
</html>

运行效果
在这里插入图片描述

注意：
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

4.2单独控制上下左右边框

4.2.1上边内边距 padding-top

检索或设置对象的上边内边距。
语法：

padding-top :length

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 200px;height: 300px;border: solid 20px red;padding-top: 100px;}</style></head><body><div id="box1">Hello, my padding-top is 50px</div></body>
</html>

运行结果
在这里插入图片描述

4.2.2底边内边距 padding-bottom

检索或设置对象的下边内边距。
语法：

padding-right:length

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 200px;height: 200px;border: solid 20px red;padding-bottom: 100px;}</style></head><body><div id="box1">Hello, my padding-bottom is 100pxHello, my padding-bottom is 100pxHello, my padding-bottom is 100pxHello, my padding-bottom is 100pxHello, my padding-bottom is 100pxHello, my padding-bottom is 100px</div></body>
</html>

运行结果
在这里插入图片描述

4.2.3左边内边距 padding-left

4.2.4右边内边距 padding-right

左边内边距padding-left、右边内边距padding-right同上

五、盒子有外边距，用CSS写法为外边距（margin）

5.1margin的复合属性

检索或设置对象四边的外边距。
语法：

 margin:length

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 350px;height: 200px;border: solid 20px red;padding: 2px;margin: 50px;}</style></head><body><div id="box1">I didn't say anything. I just walked away.You're the light, you're the nightYou're the color of my bloodYou're the cure, you're the painYou're the only thing I wanna touchNever knew that it could mean so much, so muchYou're the fear, I don't care'Cause I've never been so highFollow me to the darkLet me take you past our satellites</div></body>
</html>

运行结果
在这里插入图片描述

外边距在不同浏览器的效果会有很大不同，建议尽量少用。

5.2单独控制上下左右边框

5.2.1上边外边距 margin-top

检索或设置对象的上边外边距。
语法：

margin-top :length

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 350px;height: 200px;border: solid 20px red;padding: 2px;margin-top: 50px;}</style></head><body><div id="box1">I didn't say anything. I just walked away.You're the light, you're the nightYou're the color of my bloodYou're the cure, you're the painYou're the only thing I wanna touchNever knew that it could mean so much, so muchYou're the fear, I don't care'Cause I've never been so highFollow me to the darkLet me take you past our satellites</div></body>
</html>

运行结果
在这里插入图片描述

5.2.2下边外边距 margin-bottom

检索或设置对象的下边外边距。
语法：

margin-bottom :length

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 350px;height: 200px;border: solid 20px red;padding: 2px;margin-bottom: 50px;}#box2{width: 350px;height: 200px;background-color: blue;}</style></head><body><div id="box1">I didn't say anything. I just walked away.You're the light, you're the nightYou're the color of my bloodYou're the cure, you're the painYou're the only thing I wanna touchNever knew that it could mean so much, so muchYou're the fear, I don't care'Cause I've never been so highFollow me to the darkLet me take you past our satellites</div><div id="box2"></div></body>
</html>

运行结果
在这里插入图片描述

5.2.3左边外边距 margin-left

5.2.4左边外边距 margin-left

左边外边距 margin-left、左边外边距 margin-left同上

六、盒子模型实例

要把页面布局好，需要注意：

页面由很多个盒子，从上往下堆积。外层的这些盒子是独立的。
我们布局的时候，外层的盒子最好不要设置浮动，也不要设置为绝对定位。
盒子一般不设置高度，它的高度一般由内容来撑高。
每个外层的盒子需要设置宽度（这个宽度叫版心），并且要将这些盒子在水平方向居中。
把每个模块外层的容器设置为相对定位。可以作为里面每个元素定位的参考。
把外层容器设置为相对定位之后，它也不会脱离标准流，不会影响布局。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.wrapper{background-color: green;width: 1200px;margin: 0 auto;margin-bottom: 4px;}#box1{width: 200px;height: 300px;border:solid 20px red;padding-left: 100px;}#box2{width:100px;height: 100px;background-color: seagreen;cursor: move;/* display: none; *//*元素隐藏后，不占位置*//*visibility: hidden;*/  /*这种隐藏也会占着位置*//*opacity: 0;*/   /*通过设置不透明度去隐藏一个元素，元素隐藏后，位置还占着*/}#box3{width:100px;height: 100px;background-color:darkgoldenrod;cursor: move;}</style></head><body><div  class="wrapper">1</div><div class="wrapper">2</div><div class="wrapper">3</div><div class="wrapper">4</div><div class="wrapper">5</div><div class="wrapper">6</div><div id="box1"><div id="box2"></div><div id="box3"></div></div></body>
</html>