今日讲解重点
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
CSS 选择器的特异度 CSS选择器的特异度是指用于确定给定样式应用于元素的优先级的量值。特异度值越高，优先级越高。
特异度是通过分配不同类型选择器的数量来计算的。以下是选择器的优先级，按降序排列：
内联样式（style属性）：特异度值为1000。
ID选择器：特异度值为100。
类选择器、属性选择器和伪类选择器：特异度值为10。
元素选择器和伪元素选择器：特异度值为1。
CSS 继承
CSS继承是一种样式应用机制，通过将属性从父元素传递到子元素来简化样式表。如果子元素没有定义该属性，那么它会继承自其父元素。但是，如果子元素定义了该属性，那么它将覆盖父元素的值。
继承的属性包括字体、文本颜色、行高、文本对齐方式等。而不继承的属性包括背景、边框、外边距和内边距等。
显示继承
- CSS 求值过程解析 CSS的求值过程涉及解析样式表，计算元素的样式，并将其应用到文档中的元素。以下是CSS求值过程的大致顺序：
解析样式表：浏览器将样式表解析为CSS对象模型（CSSOM）。 匹配元素：浏览器将CSSOM与文档对象模型（DOM）结合起来，确定哪些规则适用于哪些元素。 计算样式：对于每个元素，浏览器计算应用于该元素的样式，并创建一个“计算样式”对象。 布局：浏览器根据计算样式和元素的大小和位置来计算布局。 绘制：浏览器使用计算样式和布局信息来绘制元素。
- CSS 布局方式及相关技术
CSS布局是指在网页中定位和排列HTML元素的过程。以下是一些CSS布局技术： 浮动（float）：将元素从正常文档流中移动，使其向左或向右浮动。可以用于实现多列布局，或者将图像与文本对齐。 定位（positioning）：通过设置元素的位置属性（如top、left、right、bottom）来将其定位到页面上的特定位置。可以用于实现层叠效果、固定头部或侧边栏等。 弹性盒子（flexbox）：一种用于在一维或二维布局中方便地排列元素的布局模型。可以用于实现响应式设计、垂直居中等。 网格布局（grid）：一种用于在二维布局中方便地排列元素的布局模型。可以用于实现复杂的布局，如网格、响应式设计等。 多列布局（multicolumn）：将文本分成多列，可以用于实现报纸或杂志风格的页面布局。 响应式设计（responsive design）：一种通过使用CSS媒体查询和流动布局等技术，以适应不同设备和屏幕大小的设计方法。可以用于提高用户体验和SEO
