CSS理解|豆包MarsCode AI刷题

层叠、优先级

1. 样式表来源

2. 选择器

   1. 选择器的类型

      1. 基础选择器
         #id -- ID选择器
         class -- 类选择器
         *-- 通用选择器 该选择器匹配所有元素

      2. 组合器
         子组合器(>) -- 匹配的目标元素是其他元素的直接后代。如 :. parent>.child。
         相邻兄弟组合器( + ) -- 匹配的目标元素紧跟在其他元素后面。如:p+h2。
         通用兄弟组合器( ~ ) -- 匹配所有跟随在指定元素之后的兄弟元素,如:li.active~li。

      3. 属性选择器 通过约束属性值,div[data-title="aaa”]

      4. 伪类选择器 选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如:first-child,:hover

      5. 伪元素选择器

         匹配在文档中没有直接对应HTML元素的特定部分,或插入内容。如 h2 :: first-letter,div :: before

      6. 逻辑选择器 较新的选择器:is():has():where():not()

   2. 选择器优先级

      内联>id>class=attribute=pseudo-class>type=pseudo-element

3. 源码位置

   在文档中引入靠下的元素可以覆盖靠上面的元素

盒模型

盒模型实现的一些展现形式

1. 实现三角形

2. 实现固定比例矩形

或者使用aspect-ratio：4/3；即可

3. margin auto实现水平居中、垂直居中

   1. 块元素水平居中：

      元素需要存在距离才可以使用auto，因此需要使用块级元素而非img这样的内联元素。

      设置宽度值（不设置的话默认为100%）后设置margin为auto即可水平居中

   2. 垂直居中：

      采用绝对定位position:absolute将盒子脱离块级元素，即存在上下边距

负外边距

padding、border、margin只有margin可以设置负值

布局

网格布局

作用于父元素：display：grid

用来生成显式的列和行：grid-template-colums/rows：数值/百分比/repeat()等

简写属性grid-template：

grid-template:  "a a a" 40px
                "b c c" 40px
                "b c c" 40px / 1fr 1fr 1fr;

规定区域area的分布：grid-template-areas：//网格数据对每一行的数据进行命名，不需要使用的块则设置为.

基于网格列的维度分组：grid-template-columns:60px 60px 60px

基于网格行的维度分组：grid-template-rows:60px 60px 60px

作用于子元素：

规定占用的行和列：grid-column

定位

sticky:元素相对他的滚动祖先（祖先的overflow是scroll/hidden/auto）的视口定位

fixed：相对于视口进行定位

层叠上下文

我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

响应式设计

媒体查询（Media queries）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器视窗宽度）来修改网站或应用程序时。

• 有条件的通过 [@media] 和 [@import] [at-rules]用[CSS] 装饰样式。

<link rel="stylesheet" src="styles.css" media="screen" />
<link rel="stylesheet" src="styles.css" media="print" />

许多媒体功能都是范围功能，这意味着可以在它们前面加上“最小”或“最大”来表示“最小条件”或“最大条件”约束。例如，仅当你的浏览器的[viewport]宽度等于或小于 12450px 时，此 CSS 才会应用样式：

@media (max-width: 12450px) { ... }