深入理解CSS | 青训营

lostsalt
72 阅读5分钟

今天上课《深入理解 CSS》，以下是关于本次课程的重点和笔记。

一、 CSS 选择器的特异度

image.png

在CSS中，遇到对同一标签的某一属性被多次赋值时，会通过特异度来进行决定选择器的优先级。

在图示第一个的选择器中：id选择器有 1 个：#nav；（伪）类有 2 个：.list 、:link；标签有 2 个： li、a，所以特异度是 1 2 2。

在图示第二个的选择器中：没有id选择器；（伪）类有 2 个： .hd、.links ；标签有 2 个：ul、a，所以特异度是 0 2 2。

根据特异度越大，优先级越高的定理，所以图示第二个选择器的优先级更高。

二、 CSS 继承

  • 某些属性会自动继承其父元素的计算值，除非显示指定的一个值；
  • color属性可以继承。在CSS中一般和文字相关的都可以继承，盒模型相关的都不可以继承；
  • 某些属性本身不可继承，如果想要继承他的父值，那么可以利用 * {...} 通配选择器和inherit关键字（表示显示继承）来设置样式都从父类继承；

image.png

三、 CSS 求值过程解析

1. 初始值：
  • 如果一个元素不可继承，但是该属性被使用，那么则会用到初始值来定义属性；
  • 如果元素可以继承，但是经过一层一层都没有继承到父类的值，那么则使用初始值；

image.png

2. 求值过程：

image.png

image.png

image.png

四、 CSS 布局方式及相关技术

1. 布局相关技术：

image.png

2. 盒模型：

image.png

3. 常用属性：
  • margin：外边距；
  • border：边框；
  • padding：内边距;
  • content：含width和height（content-box）;
3.1 margin：
  • 指定元素四个方向的外边框；
  • 取值可以是长度、宽度、auto；
  • 百分数相当于容器宽度；
  1. margin：auto ：水平居中；
  2. margin collapse ：当两个margin冲突时，会自动选择较大的margin，不会重叠两个margin；
3.2 border：
  • 指定边框的样式(style)，粗细(width)和颜色(color)
  • 指定边框的四个方向：left、top、right、bottom；
  • 当四条边框颜色不同时斜对角切；
3.3 padding：
  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度
3.4 height：
  • 指定content box 高度；
  • 取值为长度、百分数、auto；
  • auto取值由内容计算得来;
  • 百分数相对容器的content box高度;
  • 容器有指定高度时，百分数才生效；
3.5 width：
  • 指定content box 宽度;
  • 取值为长度、百分数、auto；
  • auto由浏览器根据其他属性确定;
  • 百分数相对容器的content box宽度;
3.6 over-flow：
  • 控制溢出内容展示；
  • visible：无视broder直接显示；
  • hidden：隐藏溢出部分；
  • scroll：在border中滚动；
  • auto：根据内容是否溢出自动切换；
3.7 box-sizing：border-box：
  • 系统默认为contect-box；
  • border-box的width、height为整个border的宽高；

五、 CSS 盒模型 - 行级、块级

1. 块级 VS 行级：

image.png

2. 块级元素 、 行级元素：

image.png

3. display属性：

image.png

4. 常规流Normal Flow：

image.png

5. Flex Box：

image.png

5.1 justify-content 主轴布局：

image.png

5.1 align-items 侧轴布局：

image.png

6. Position属性：

image.png

image.png

image.png

六、 个人思考和总结

本次课程我收获颇多，关于CSS也有了新的理解和感悟。以下是一些我的个人思考和总结：

  1. 选择器特异度和优先级：理解选择器的特异度是掌握CSS样式优先级的基础。通过合理选择不同类型的选择器，我们可以确保样式正确应用到目标元素，避免样式冲突和优先级混乱。

  2. 继承与初始值：了解哪些属性可以继承，哪些属性不可以继承对于编写可维护的CSS样式很重要。利用继承特性可以减少代码量，但也要注意一些属性不合适继承，可能导致不符合预期的效果。

  3. CSS的求值过程：了解CSS的求值过程有助于理解样式是如何被解析和应用到文档中的，这对于调试和优化样式非常有帮助。

  4. 常规流与布局技术：熟悉常规流和不同布局技术（如浮动、绝对定位、Flexbox、Grid布局）可以帮助我们选择合适的布局方式来实现特定的页面布局要求。

  5. 盒模型：深入理解盒模型中的margin、border、padding和content部分，可以更好地控制元素的尺寸和间距，以及解决一些布局中的问题。

  6. 行级和块级元素：理解块级和行级元素的特点及其在文档流中的布局规则，可以更好地组织内容和控制元素的呈现方式。

  7. Flexbox与Grid布局：Flexbox和Grid布局是现代CSS布局技术，可以用来创建复杂的自适应和响应式布局。熟练掌握这些技术可以简化布局代码并提高开发效率。

  8. 定位属性：了解position属性的不同取值和其对元素布局的影响，可以实现一些特殊的定位效果，如图片文字环绕。

  9. 理解BFC和IFC：深入理解块级格式化上下文（BFC）和行内格式化上下文（IFC）对于掌握一些特殊的布局技巧和解决一些排版问题很有帮助。

  10. 不断实践和调试：最终深入理解CSS是需要不断实践和调试的过程。通过在项目中应用所学知识，并积累实际经验，可以更好地掌握CSS的奥妙。

CSS是一个灵活而强大的样式语言，深入理解它的基本概念和布局技术，可以让我们更加高效地开发出美观、可维护的网页。持续学习和实践将使我们成为更优秀的前端开发者。

avatar
文章
阅读
粉丝