理解 CSS | 青训营笔记

47 阅读2分钟

CSS 代码构成 CSS 是一种样式表语言,用来描述 HTML 和 XML 文档的呈现方式。一个 CSS 文件由三个部分组成:选择器、属性和值。 选择器用来选取需要添加样式的 HTML 元素。可以使用标签名、类名、ID 等选择器。 属性是 CSS 样式的名称,如 color、font-size 等。 值是属性的具体数值,如 red、12px 等。

CSS 流程之选择器组、文本渲染 在渲染一个 HTML 页面时,浏览器会先加载 HTML 文档,然后解析 CSS 文件,最后渲染文档。 选择器组是将多个选择器组合在一起的方式,来给多个元素添加相同的样式。 文本渲染是指浏览器在渲染 HTML 文档时,会根据 CSS 样式来渲染文本的大小、颜色、字体等。

调试 CSS 调试 CSS 是指在网页开发过程中,使用工具(如浏览器)来检测和修复 CSS 代码中的问题。

CSS 选择器的特异度 特异度是指 CSS 选择器在 HTML 文档中的权重。当同时为一个元素添加多个样式时,浏览器会根据特异度来确定哪个样式会被应用。

CSS 继承 继承是指在 CSS 中,子元素会继承父元素的某些样式。只有部分样式会被继承,如字体、颜色等。 某些属性会自动继承其父元素的计算值,除非显示指定一个值。

CSS 求值过程解析 求值过程是指浏览器在渲染 HTML 文档时,会根据 CSS 样式来计算出每个元素的最终样式。这个过程包括了解析选择器、计算特异度、继承父元素样式等。

CSS 布局方式及相关技术 CSS 布局方式有很多种,如流动布局、绝对定位布局、网格布局、弹性布局等。

CSS 盒模型 - 行级元素是指在 HTML 文档中,会自动换行的元素,CSS 盒模型 - 块级元素是指在 HTML 文档中,会自动独占一行的元素。CSS 盒模型的 display 属性可以控制元素的类型,是行级元素还是块级元素。overflow 属性可以控制元素内容超出容器时的显示方式。行级排版上下文和块级排版上下文是不同的排版方式,前者是按照行来排版,后者是按照块来排版。BFC(块级格式化上下文)是一种布局方式,它能够解决浮动和绝对定位的问题。Flexbox 是一种弹性布局方式,它能够轻松地实现响应式和移动设备优先的布局。