前端初识|豆包MarsCode AI刷题
基础知识
层叠三大规则：
- 样式表来源
- 选择器优先级
- 源码位置
!important>内联>id>class>type
ps：选择器尽量少用id、尽量不要用!improtant、自己的样式加载在引用库样式的后面
css的值和单位：
分为选择器、属性、值
选择器：主要为标签选择器、id选择器、类选择器、后代选择器、子代选择器、伪类选择器等等
属性：控制样式的名称
值：主要有文字类（如initial、颜色、位置等等）、数值类（z-index：1这种）和函数生成类（比如calc()、min()等等）
布局：
BFC
区块格式化上下文（Block Formatting Context，简称BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
产生情况：
- 浮动元素(元素的float不是none)
- 绝对定位元素（元素的position为absolute 或 fixed)
- display为inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
- overflow值不为visible的块元素
- contain 值为layout、content 或 paint的元素
- 多列容器（元素的column-count或 column-width 不为auto，包括 column-count为1)
应用场景：
- 解决margin塌陷问题
- 避免margin重叠
- 清除浮动
- 阻止元素被浮动元素覆盖
弹性盒子布局
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。任何一个容器都可以指定为 Flex 布局。
容器样式常用属性：
| 属性 | 作用 |
|---|---|
| flex-direction | 决定主轴的方向 |
| flex-wrap | 如果一条轴线排不下，如何换行。 |
| flex-flow | flex-direction 属性和 flex-wrap 属性的简写属性。 |
| justify-content | 定义项目在主轴上的对齐方式。 |
| align-items | 定义项目在交叉轴上如何对齐。 |
| align-content | 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 |
网格布局
CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。Grid 布局又称网格布局，是W3C提出的一个二维布局系统，它与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但它们也存在重大区别
网格布局通过设置display属性的值为grid或inline-grid
一般使用grid-template-columns，grid-template-rows属性来自定义样式
.css{
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:1fr 1fr;
}
这样就简单的设置了一个3行2列的网格容器
