【重识 HTML (2)，Java架构师面试宝典和答案

如何防止 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 是一个缩写属性：

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

4 个值的顺序是 top-left、top-right、bottom-right、bottom-left（顺时针方向）

• 如果 bottom-left 没设置，就跟随 top-right

• 如果 bottom-right 没设置，就跟随 top-left

• 如果 top-right 没设置，就跟随 top-left

注：border-radius 大于或等于 50% 时，就会变成一个圆：

示例代码：border-radius

CSS 属性 - outline

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

outline 表示元素的外轮廓

• 不占用空间

• 默认显示在 border 的外面

• 每个部位都是完整连接的，不会像 border 那样有可能会断开（比如行内级非替换元素的换行）

outline 相关属性：

• outline-width

• outline-style：取值跟 border 的样式一样，比如 solid、dotted 等

• outline-color

• outline：outline-width、outline-style、outline-color 的简写属性，跟 border 用法类似

• outline-offset：设置 outline 和 border 之间的间距

outline 应用实例：

• 去除 a 元素、input 元素的 focus 轮廓效果

示例代码：outline

CSS 属性 - box-shadow

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

box-shadow 属性可以设置一个或者多个阴影

• 每个阴影用 <shadow> 表示

• 多个阴影之间用逗号 , 隔开，从前到后叠加

• <shadow> 的常见格式如下：

• 第 1 个 <length>：水平方向的偏移，正数往右偏移

• 第 2 个 <length>：垂直方向的偏移，正数往下偏移

• 第 3 个 <length>：模糊半径 (blur radius)

• 第 4 个 <length>：延伸距离

• <color>：阴影的颜色，如果没有设置，就跟随 color 属性的颜色

• inset：外框阴影变成内框阴影

box-shadow 示例：

示例代码：box-shadow

---

练习：

代码：box-shadow 练习

CSS 属性 - text-shadow

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

text-shadow 用法类似于 box-shadow，用于给文字添加阴影效果

text-shadow 同样适用于 ::first-line、::first-letter

示例代码：text-shadow

CSS 属性 - box-sizing

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

box-sizing 用来设置盒子模型中宽高的行为

• content-box

  padding、border 都布置在 width、height 外边

  

  元素的实际占用宽度 = border + padding + width

  元素的实际占用高度 = border + padding + height

• border-box

  padding、border 都布置在 width、height 里边

  

  元素的实际占用宽度 = width

  元素的实际占用高度 = height

盒子模型历史遗留问题

示例代码：box-sizing

---

最后

为什么我不完全主张自学？
①平台上的大牛基本上都有很多年的工作经验了，你有没有想过之前行业的门槛是什么样的，现在行业门槛是什么样的？以前企业对于程序员能力要求没有这么高，甚至十多年前你只要会写个“Hello World”，你都可以入门这个行业，所以以前要入门是完全可以入门的。
②现在也有一些优秀的年轻大牛，他们或许也是自学成才，但是他们一定是具备优秀的学习能力，优秀的自我管理能力（时间管理，静心坚持等方面）以及善于发现问题并总结问题。
如果说你认为你的目标十分明确，能做到第②点所说的几个点，以目前的市场来看，你才真正的适合去自学。

除此之外，对于绝大部分人来说，报班一定是最好的一种快速成长的方式。但是有个问题，现在市场上的培训机构质量参差不齐，如果你没有找准一个好的培训班，完全是浪费精力，时间以及金钱，这个需要自己去甄别选择。

我个人建议线上比线下的性价比更高，线下培训价格基本上没2W是下不来的，线上教育现在比较成熟了，此次疫情期间，学生基本上都感受过线上的学习模式。相比线下而言，线上的优势以我的了解主要是以下几个方面：
①价格：线上的价格基本上是线下的一半；
②老师：相对而言线上教育的师资力量比线下更强大也更加丰富，资源更好协调；
③时间：学习时间相对而言更自由，不用裸辞学习，适合边学边工作，降低生活压力；
④课程：从课程内容来说，确实要比线下讲的更加深入。

应该学哪些技术才能达到企业的要求？（下图总结）

Java全套资料免费领取方式：戳这里

量参差不齐，如果你没有找准一个好的培训班，完全是浪费精力，时间以及金钱，这个需要自己去甄别选择。

我个人建议线上比线下的性价比更高，线下培训价格基本上没2W是下不来的，线上教育现在比较成熟了，此次疫情期间，学生基本上都感受过线上的学习模式。相比线下而言，线上的优势以我的了解主要是以下几个方面：
①价格：线上的价格基本上是线下的一半；
②老师：相对而言线上教育的师资力量比线下更强大也更加丰富，资源更好协调；
③时间：学习时间相对而言更自由，不用裸辞学习，适合边学边工作，降低生活压力；
④课程：从课程内容来说，确实要比线下讲的更加深入。

应该学哪些技术才能达到企业的要求？（下图总结）

Java全套资料免费领取方式：戳这里

[外链图片转存中…(img-lutGP3Xj-1628430104090)]

[外链图片转存中…(img-IvGWwPSI-1628430104092)]