盒模型

盒子模型

一种思维方式（万物皆盒子）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aJUcjg7d-1603776532934)(mdImg/t1.png)]

盒子模型的组成

盒子模型的四个组成部分

• 内容：content 即盒子里面的文字或者标签
• 内边距：padding 即盒子边框到内容之间的距离
• 边框：border 即盒子的边框
• 外边距：margin 即盒子与盒子之间的距离

边框（border）

border相关属性

• border-width：边框的宽度
• border-style：边框的样式
  • solid：实线 （用的最多）
  • dashed：虚线
  • dotted：点线
• border-color：边框的颜色

border的连写

代码： border:1px solid #000;

书写顺序 ：

border: 边框宽度 边框样式 边框颜色;

单方向设置border

单独设置盒子的一条边框

代码： border-left:1px solid #000;

border-方位名词：边框粗细 边框样式 边框颜色；

border-left 左边框
border-right 右边框
border-top 上边框
border-bottom 下边框

边框合并（border-collapse）

也叫做细线表格

之前使用表格属性设置表格的样式，其实不推荐使用样式属性，那我们使用css改写之前的效果

代码： border-collapse:collapse；

效果：

让表格的边框变成真正的一条边框

盒子大小的初级计算公式

学完border之后，可以学习盒子大小的初级计算公式

需求：

<!-- 需求 : 
	盒子尺寸 400*400 , 背景绿色, 边框: 10px 实线 黑色 
-->

• 设置的width和height其实是内容的宽高
• 设置border会撑大盒子

使用开发者工具查看盒子模型

谷歌浏览器会帮构建出一个盒子模型

并且鼠标移入某部分的时候，页面中的对应的盒子的部分会高亮

盒子大小的初级计算公式：

盒子的宽度 = 左边框 + 内容的宽度 + 右边框

高度同理

**问题：**现在设置完border之后盒子会撑大，怎么样才能满足需求呢？

解决： 手动内减

手动计算多余的值，然后在内容中减去即可

结果就是：

• 盒子内容：380*380。即width和height都是380px

-----------------------------

内边距（padding）

盒子边框与内容之间的距离（可以控制内容与边框之间的距离）

padding的取值

• 一个值： padding：10px;
  • 上右下左都设置为10px
• 两个值： padding：10px 20px;
  • 上下设置为10px
  • 左右设置为20px
• 三个值： padding：10px 20px 30px;
  • 上设置为10px
  • 左右设置为20px
  • 下设置为30px
• 四个值： padding：10px 20px 30px 40px;
  • 上设置为10px
  • 右设置为20px
  • 下设置为30px
  • 左设置为40px

记忆规则： 从上开始顺时针赋值，如果没有赋值的，看对面的

单方向设置padding

单独设置盒子的一边padding

代码： padding-left:10px;

padding-方位名词：边框粗细 边框样式 边框颜色；

padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

盒子大小的终极计算公式

学完padding之后，可以学习盒子大小的终极计算公式了

需求：

<!-- 需求 : 
	盒子尺寸 300*300 , 背景粉色, 上下左右20px的padding , 边框: 10px 实线 黑色 
-->

• width和height设置的是内容的宽高
• border会撑大盒子
• padding也会撑大盒子

盒子大小的终极计算公式：

盒子的宽度 = 左border+ 左padding + 内容的宽度 + 右padding + 右border

高度同理

问题： 现在设置完border和padding之后盒子会撑大，怎样才能满足需求呢？

同样也是手动计算多余的值，然后在内容中减去即可

结果就是：

• 盒子内容：240*240。即width和height都是380px

---

不会撑大盒子的特殊情况

两个互相嵌套的块级元素，如果子盒子没有设置宽度，此时子盒子的宽度默认就是父盒子的宽度。当给子盒子设置以下属性时，子盒子的宽度不会被撑大。

• padding-left
• padding-right
• border-left
• border-right

CSS3盒模型（自动内减→box-sizing）

在实际项目中会大量的用到盒子模型，如果每个盒子都去手动内减，就和不方便，此时我们可以让浏览器帮咱们自动内减

CSS3的新属性：box-sizing可以完成自动内减的效果

需求：

<!-- 需求 : 
	盒子尺寸 400*400 , 背景绿色, 边框: 10px 实线 黑色  padding:20px
-->

• 手动内减

  项目中计算量太大，很麻烦

• 自动内减

  给盒子设置 box-sizing:border-box 属性。此时设置的width和height就是盒子的实际宽度

------------------------------

外边距（margin）

盒子与盒子之间的距离（可以控制盒子的位置）

margin的取值

• 一个值： margin：10px;
  • 上右下左都设置为10px
• 两个值： margin：10px 20px;
  • 上下设置为10px
  • 左右设置为20px
• 三个值： margin：10px 20px 30px;
  • 上设置为10px
  • 左右设置为20px
  • 下设置为30px
• 四个值： margin：10px 20px 30px 40px;
  • 上设置为10px
  • 右设置为20px
  • 下设置为30px
  • 左设置为40px

记忆规则： 从上开始顺时针赋值，如果没有赋值的，看对面的

单方向设置margin

单独设置盒子的一边margin

代码： margin-left:10px;

margin-方位名词：边框粗细 边框样式 边框颜色；

margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距

---

marign单方向的应用

• 上下应用

  • margin-top：能让盒子下移
  • margin-bottom：能让下面的盒子往下移

• 左右应用（先转换成行内块）

  • margin-left：能让盒子右移
  • margin-right：能让右边的盒子往右移动

---

清除默认内外边距

浏览器会默认给一些标签设置margin和padding，在项目开始之前需要清除这些标签默认的margin和padding，留给自己设置。

比如：

body 标签: 自带 margin: 8px; 的属性
p 标签: 默认带有 margin: font-size 的值
ul标签: ul 标签默认带有上下的 margin, 和 padding-left
...

因为要清除所有标签默认的内外边距，此时可以使用通配符完成

* { 
	padding: 0;
	margin: 0;
}

------------------------------

margin的特殊现象

marign的合并现象

正常情况下：比如当两个盒子水平布局时，左右的margin会叠加；

但是当两个盒子垂直布局时，会出现合并现象（两者之间的距离取最大值）

正常现象：

比如：当两个盒子水平布局时，左右的margin会叠加，盒子之间的距离为margin的和。

合并现象：

当两个盒子垂直布局时，上下的margin会合并，盒子之间的距离为margin的最大值

------------------------------

合并现象解决方案： 避免就好了

上下盒子的margin距离，只给其中一个设置即可

margin的塌陷现象（重要）

互相嵌套的块级元素，垂直外边距会塌陷

塌陷现象：

互相嵌套的块级元素，如果给子元素设置margin-top，此时父元素会一起往下移动！！！

------------------------------

塌陷现象解决方案：

• 给父盒子加一个边框
  相当于给老父亲添加一块钢板
• 给父盒子加 padding-top
  相当于给老父亲添加一层泡沫
• 给父盒子设置属性 overflow: hidden
• 给父盒子设置浮动
• 给父盒子设置为行内块