层叠、优先级
优先级排序
简单排序： !important>行内>id>class>元素>通配>继承的样式****
顺序
1.对于@import的样式，根据@import的顺序
2.对于link和style标签的样式，根据在document中的顺序决定
CSS中，每个属性都有一个初始值
background-color 的初始值为 transparent
margin-left 的初始值为0
可以使用 initial 关键字显式重置为初始值
background-color: initial
由层叠概念引申出的css代码good practice
1. 选择器尽量少用id
2. 尽量不要用！important
3. 自己的样式加载在引用库样式的后面
CSS盒模型
CSS盒模型指的是HTML元素所占据的矩形区域，由内容区域、内边距、边框和外边距组成。
1. 内容区域：指元素的实际内容，如文字、图片等。
2. 内边距：指内容区域和边框之间的空白区域，可以设置背景色、边框等。
3. 边框：指包围内容和内边距的线条。
4. 外边距：指元素和其他元素之间的空白区域，可以设置背景色、边框等。
内边距（padding）： 不可为负
外边距（margin）： 可为负或auto
o 提供4个数据：将依次作用于上，右，下，左。（顺时针）
o 提供3个数据：将依次作用于上，左右，下
o 提供2个数据：将依次作用于上下，左右
o 提供1个数据：将作用于上下左右
浮动 float
主要属性值为：left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动）。
浮动元素不止会影响自己(脱离文档流)，它也会影响周围元素对其(左|右)进行环绕。 文字环绕效果是 float 典型的应用。
CSS布局
行级
块级
表格布局
FlexBox(弹性布局)
CSS布局指的是如何将HTML元素放置在网页中，实现网页的设计和排版。
1. 盒模型布局：使用CSS盒模型设置元素的宽度、高度、内边距、边框和外边距，实现元素的位置和大小。
2. 浮动布局：使用CSS的float属性实现元素的左右浮动，使得多个元素可以并排排列。
3. 定位布局：使用CSS的position属性和top、bottom
CSS生态布局
语言增强：预处理器、后处理器
工程架构：CSS模块化、CSS-In-Js、Atomic CSS
总结
css层叠样式表能让页面更美观
Grid布局
