Day4 CSS的深入学习

本文针对老师讲授的内容也进行分篇（精简内容）

总结学习重点：

上篇主要是CSS的选择器特异度并引出继承，求值与布局的知识点

下篇主要是CSS盒模型的行级和块级布局详解

上篇

一，学习了CSS中的选择器和样式，以及如何决定在多个选择器匹配到同一个元素时，选择器的特异度如何决定最终采用的样式。 可以理解为特异度就是选择器它的特殊的程度，越特殊的选择器，它的优先级会越高。

二， 学习了一些属性的继承规则、不可继承的属性如何通过继承和使用关键字变成可继承的、生命值和层叠值的概念、优先级的决定方式等。

不可继承的话可以使用inherit这个关键字，让它变成一个可继承的方法就是通过星号即通配选择器。

三，学习讲解了初始值，计算值和使用值的区别，求值过程以及如何在页面中设置文字样式。

四，学习了盒子的概念和边框、外边距、间距的CSS属性及其使用技巧，帮助我们做文字排版时定义规则，让页面更美观。

总结：

1.特异度：特异度用于确定在多个规则应用于同一元素时，哪个规则将优先应用。特异度越高的规则将具有更高的优先级。

2.继承：继承是指子元素可以继承父元素的某些样式属性。但是并非所有属性都可以继承，要注意哪些属性会被继承。

3.求值：CSS提供了一些用于计算和操作值的功能。这些功能使得CSS更加灵活，可以根据需要去计算和调整样式。

4.布局：通过CSS可以控制页面元素的布局和排版。使用盒模型、float、绝对定位等技术，可以实现各种复杂的布局效果。

总体而言，CSS选择器特异度、继承、求值和布局是CSS的核心，它们相互配合，使得网页样式的控制更加灵活。但是在实际使用中也需要注意合理使用，避免选择器特异度过高、错误继承、计算错误以及布局出现问题等情况。

下篇

一，学习了CSS布局中关于行级和块级盒子的规则和区别，以及如何使用属性和编码来指定盒子的展示样式。

二，学习了盒子和元素的区别，以及在CSS中如何将元素转化成行级或会计级盒子。

盒子和元素其实还有一些区别，盒子是CSS里边的一个概念，但是元素是H3里面的概念。

三，学习了常规流里边的块级和行级盒子的处理方式，以及Flex Box布局方式和其特性。讲解了Flex容器的弹性和属性，包括flex-grow、flex-shrink、flex-basis等，以及flex布局中的一些细节属性。

四，学习了Grid的使用方法，包括使用编号、区域和属性来标识线和区域，使用display grade属性来设置网格线和绝对定位，以及使用float和绝对定位来实现图文混排的文字环绕效果。Grid是CSS布局领域最强大的武器，可以解决大部分布局问题。

了解到flex它是一个单一的一个方向的一个布局模式，Grid它是一个二维的布局模式

五，最后学习了浮动和绝对定位，这部分学习浮动相对简略，主要还是绝对定位

总结：

1.行级： 行级结构适用于文字、链接、行内图片等。行级元素可以在同一行内并排显示，不会自动换行，从而节省了空间。此外，行级结构可方便地与块级元素嵌套使用，以实现更复杂的布局效果。但行级结构的宽度和高度不易设置。行级元素不能包含块级元素，会导致一些布局限制。

2.块级： 块级结构适用于标题、段落、图像等。块级元素可以自动换行，并且可以设置宽度、高度、边距等属性。块级元素之间可以嵌套，形成更复杂的布局结构。但由于块级元素独占一行，可能会占据较多的空间。

总体而言，行级和块级结构在CSS布局中扮演了不同的重要角色：行级结构适用于简单的布局情况，可与块级元素嵌套使用；块级结构适用于独占一行的元素和需要更复杂布局的情况。正确灵活地使用行级和块级结构，可以满足不同的设计需求，并实现各种各样的网页布局效果。