前言
持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框、内边距、外边距
1、盒子模型的介绍
盒子的概念
- 页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局
- 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为盒子
盒子模型
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撑大后,如何满足需求?
• 自己计算多余大小,手动在内容中减去(手动内减)
不会撑大盒子的特殊情况(块级元素)
- 如果子盒子没有设置宽度,此时宽度默认是父盒子的宽度
- 此时给子盒子设置左右的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 • …
解决方法:
总结
十分感谢你可以耐心看完,最后分享一句话:
不管东西有多贵,有多稀有,能够按照自己是否需要来判断的人才够强大。能够放开执念,人才能更有自信。《断舍离》
——「日」山下英子
本次的分享就到这里了!!!如果觉得还不错,请不要忘记点赞✌,收藏✌,加关注✌哦 ❤️ ❤️ ❤️