Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距

前言

持续总结输出中，今天分享的是Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距

1、盒子模型的介绍

盒子的概念

1. 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
2. 浏览器在渲染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子

盒子模型

CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成，这就是盒子模型

2、内容区域的宽度和高度

利用 width 和 height 属性默认设置是盒子 内容区域 的大小

3、边框( border )

边框的作用是设置边框粗细、边框样式、边框颜色效果

属性名	作用	属性值
border-width	边框粗细	数字+px
border-style	边框样式	点线dotted、虚线dashed、实线solid
border-color	边框颜色	颜色取值

边框(border)的连写形式

单个取值的连写，取值之间以空格隔开

如:border : 10px solid red;

快捷键: bd + tab

盒子实际大小初级计算公式

假如：盒子尺寸 600*600，背景绿色，边框10px 实线 黑色，如何完成?

• 注意点:

1、设置width和height是内容的宽高!
2、设置border会撑大盒子!

盒子实际大小初级计算公式:

• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框

当盒子被border撑大后，如何满足需求?

• 解决:计算多余大小，手动在内容中减去(手动内减)

4、内边距( 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

记忆规则: 从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的!!!

盒子实际大小终极计算公式

假如盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成?

• 注意点:

1、设置width和height是内容的宽高!
2、设置border会撑大盒子
3、设置padding会撑大盒子

盒子实际大小终极计算公式:
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

当盒子被border和padding撑大后，如何满足需求?

• 自己计算多余大小，手动在内容中减去(手动内减)

不会撑大盒子的特殊情况(块级元素)

1. 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
2. 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

CSS3盒模型(自动内减)

假如盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成?

• 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大?

解决方法

1、手动内减
• 操作:自己计算多余大小，手动在内容中减去
• 缺点:项目中计算量太大，很麻烦

2、自动内减

• 操作:给盒子设置属性 box-sizing : border-box ; 即可
• 优点:浏览器会自动计算多余大小，自动在内容中减去

5、外边距(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-left	水平方向，让当前盒子往右移动
margin-right	水平方向，让右边盒子往右移动
margin-top	垂直方向，让当前盒子往下移动
margin-bottom	垂直方向，让下面的盒子往下移动

清除默认内外边距

假如浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的 margin和padding，后续自己设置

• 比如:body标签默认有margin:8px
• 比如:p标签默认有上下的margin
• 比如:ul标签默认由上下的margin和padding-left • …

解决方法:

总结

十分感谢你可以耐心看完，最后分享一句话：

不管东西有多贵，有多稀有，能够按照自己是否需要来判断的人才够强大。能够放开执念，人才能更有自信。《断舍离》
——「日」山下英子

本次的分享就到这里了！！！如果觉得还不错，请不要忘记点赞✌，收藏✌，加关注✌哦 ❤️ ❤️ ❤️