【重识 HTML CSS(7)，web开发难点

如果缺少 left，那么 left 就使用 right 的值
如果缺少 bottom，那么 bottom 就使用 top 的

在这里插入图片描述

示例代码：padding，简写属性

外边距相关 CSS 属性 - margin

========================================================================================

margin-left：左外边距

margin-right：右外边距

margin-top：上外边距

margin-bottom：下外边距

margin：是 margin-top、margin-right、margin-bottom、margin-left 的简写属性

margin 的取值规律与 padding 相同

示例代码：margin

【常见问题】上下 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

【常见问题】上下 margin 折叠

垂直方向上相邻的 2 个 margin (margin-top、margin-bottom) 有可能会合并为 1 个 margin，这种现象叫做collapse（折叠）

水平方向上的 margin (margin-left、margin-right) 永远不会 collapse

折叠后最终值的计算规则：

如果都是正数，最终值是：绝对值最大的那个正数值
如果都是负数，最终值是：绝对值最大的那个负数值
如果正数、负数都有，最终值是：最大正数和最小负数相加

如何防止 margin collapse？

只设置其中一个元素的 margin
条件允许的话，使用 padding 取代 margin
以后理解得更深入，还会学到其他解决方法

两个兄弟块级元素之间上下 margin 的折叠：

在这里插入图片描述

无内容块级元素内部 margin 的折叠：

在这里插入图片描述

无内容块级元素之间 margin 的折叠（折叠是可以连续的）：

在这里插入图片描述

块级元素折叠问题看似有点莫名其妙，实际上还是有实用之处的

比如连续段落之间的 margin，恰好需要这种折叠效果

在这里插入图片描述

border 边框

============================================================================

边框很常见：

在这里插入图片描述

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 个方向的边框

在这里插入图片描述

边框的形状 - 三角形、双色平分

边框的形状可能是：矩形、梯形、三角形 等形状

在这里插入图片描述

实现三角形：

在这里插入图片描述

实现双色平分：

在这里插入图片描述

示例代码：形状-三角、形状-太极

行内级非替换元素的注意点

以下属性对行内级非替换元素不起作用：

width、height、margin-top、margin-bottom

以下属性对行内级非替换元素的效果比较特殊：

padding-top、padding-bottom、border-top、border-bottom

示例代码：行内级元素注意点_1、行内级元素注意点_2

CSS 属性 - border-radius 圆角

圆角的应用十分广泛：

在这里插入图片描述

圆角半径相关的属性：border-*-*-radius

border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角

border-*-*-radius 定义的是四分之一椭圆的半径：

可以设置 2 个值，分别是水平半径和垂直半径（不设置，就跟随水平半径的值）

在这里插入图片描述

border-top-left-radius: 55pt 25pt 效果如下：

还可以设置百分比

在这里插入图片描述

参考的是 border-box 的宽度和高度（即元素实际占用尺寸 border + padding + width\height）

border-radius 是一个缩写属性：

在这里插入图片描述

斜线 / 前面是水平半径，后面是垂直半径

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。