===================================================================================
HTML中的每一个元素都可以看做是一个盒子,如下图所示,具备这 4 个属性:
- 内容 (content)
盒子里面装的东西
- 内边距 (padding)
怕盒子里装的东西损坏而添加的泡沫或者其它抗震的辅料
- 边框 (border)
就是盒子的边框,比如木盒子四周的木板
- 外边距 (margin)
为了方便取出,盒子之间保留一定的空隙
默认的盒子模型如下图所示:
浏览器开发者工具中看到的盒子模型:
一个元素的实际占用宽度 = border-left + padding-left + width + padding-right + border-right
一个元素的实际占用高度 = border-top + padding-top + height + padding-bottom + border-bottom
一个元素的空间宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
一个元素的空间高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
示例代码:盒子模型
================================================================================================
width
:宽度
min-width
:最小宽度,无论内容多少,宽度都大于或等于 min-width
max-width
:最大宽度,无论内容多少,宽度都小于或等于 max-width
height
:高度
min-height
:最小高度,无论内容多少,高度都大于或等于 min-height
max-height
:最大高度,无论内容多少,高度都小于或等于 max-height
=========================================================================================
padding-left
:左内边距
padding-right
:右内边距
padding-top
:上内边距
padding-bottom
:下内边距
padding
:是 padding-top、padding-right、padding-bottom、padding-left 的简写属性
padding 的取值规律:顺时针方向设值 top、right、bottom、left
-
如果缺少 left,那么 left 就使用 right 的值
-
如果缺少 bottom,那么 bottom 就使用 top 的
========================================================================================
margin-left
:左外边距
margin-right
:右外边距
margin-top
:上外边距
margin-bottom
:下外边距
margin
:是 margin-top、margin-right、margin-bottom、margin-left 的简写属性
margin 的取值规律与 padding 相同
示例代码:margin
margin-top 传递:
- 如果块级元素的顶部线和块级父元素的顶部线重叠,那么这个块级元素的 margin-top 值会传递给父元素
margin-bottom 传递:
- 如果块级元素的底部线和块级父元素的底部线重叠,并且父元素的高度是 auto,那么这个块级元素的 margin-bottom 值会传递给父元素
注:水平方向上的 margin 永远不会发生传递现象
如何防止出现传递问题?
-
给父元素设置
padding-top\padding-bottom
-
给父元素设置
border
-
给父元素或者子元素设置
display: inline-block
-
以后理解得更深入,还会学到其他解决方法
建议:使用相应的属性去做对应的事情
-
margin 一般是用来设置兄弟元素之间的间距
-
padding 一般是用来设置父子元素之间的间距
代码:上下margin传递_01、上下margin传递_02
垂直方向上相邻的 2 个 margin (margin-top
、margin-bottom
) 有可能会合并为 1 个 margin,这种现象叫做collapse(折叠)
水平方向上的 margin (margin-left
、margin-right
) 永远不会 collapse
折叠后最终值的计算规则:
-
如果都是正数,最终值是:绝对值最大的那个正数值
-
如果都是负数,最终值是:绝对值最大的那个负数值
-
如果正数、负数都有,最终值是:最大正数和最小负数相加
如何防止 margin collapse?
-
只设置其中一个元素的 margin
-
条件允许的话,使用 padding 取代 margin
-
以后理解得更深入,还会学到其他解决方法
两个兄弟块级元素之间上下 margin 的折叠:
无内容块级元素内部 margin 的折叠:
无内容块级元素之间 margin 的折叠(折叠是可以连续的):
块级元素折叠问题看似有点莫名其妙,实际上还是有实用之处的
- 比如连续段落之间的 margin,恰好需要这种折叠效果
============================================================================
边框很常见:
CSS属性 - border-width、border-color、border-style
边框宽度:border-*-width
-
border-top-width
、border-right-width
、border-bottom-width
、border-left-width
-
border-width
是上面 4 个属性的简写属性
边框颜色:border-*-color
-
border-top-color
、border-right-color
、border-bottom-color
、border-left-color
-
border-color
是上面 4 个属性的简写属性
边框样式:border-*-style
-
border-top-style
、border-right-style
、border-bottom-style
、border-left-style
-
border-style
是上面 4 个属性的简写属性 -
边框样式的取值:
none:没有边框,边框颜色、边框宽度会被忽略
hidden:与 “none” 类似,多用在表格上,用于解决边框冲突
dotted:边框是一系列的点
dashed:边框是一条虚线
solid:边框是一条实线
double:边框有两条实线。两条线宽和其中的空白的宽度之和等于 border-width 的值
groove:边框看上去好象是雕刻在画布之内
ridge:和 grove 相反,边框看上去好象是从画布中凸出来
inset:该边框使整个框看上去好象是嵌在画布中
outset:和 inset 相反,该边框使整个框看上去好象是从画布中凸出来
示例代码:边框
CSS 属性 - border-top、border-right、border-bottom、border-left、border
border-top
、border-right
、border-bottom
、border-left
:分别设置 4 个方向的边框
边框颜色、宽度、样式的编写顺序任意
border
:统一设置 4 个方向的边框
边框的形状可能是:矩形、梯形、三角形 等形状
实现三角形:
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
学习分享,共勉
题外话,毕竟我工作多年,深知技术改革和创新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
w68-1710708061833)]
[外链图片转存中…(img-qMVzF5mj-1710708061833)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
[外链图片转存中…(img-D2TDz0Dq-1710708061834)]
学习分享,共勉
题外话,毕竟我工作多年,深知技术改革和创新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】