CSS必会基础知识
CSS样式
行内样式
内部样式
外部样式
权重
- 样式引入优先级：行内样式
>内部样式=外部样式- 内部样式与外部样式优先级相同，取决于谁最后加载。
- 同一个样式表中，优先级与编写顺序有关，后覆盖前面的样式。
选择器
优先级
-
行内样式
>ID选择器>类选择器>元素选择器>通配选择器。注意⚠️：只针对不同选择器对相同元素的相同样式名的不同值的优先级。
计算：
盒子模型
CSS会把所有的HTML元素都看成一个盒子。
| 属性 | 名称 | 描述 |
|---|---|---|
| margin | 外边距 | 盒子与外界的距离 |
| border | 边框 | 盒子的边框 |
| padding | 内边距 | 紧贴内容的补白区域 |
| content | 内容 | 元素中的文本或后代元素都是它的内容。 |
- 盒子大小=
content+左右padding+左右border（即怪异盒子模型算法）
⚠️注意：外边距
margin不会印象盒子的大小，但是会影响盒子的位置。
- 标准盒模型：盒子大小=content
宽高
width：设置宽height：设置高min-{width｜heigth}：设置最小宽高max-{width|height}：设置最大宽高
⚠️注意：width和height不与min或max同时使用。
定位
- 键名：
position - 只要元素开启定位，该元素层级就比其他元素高。
- 若多个元素都开启定位，则后写的元素覆盖前面的元素
| 值 | 特点 | 场景 |
|---|---|---|
| relative（相对定位） | 1. 相对元素原来的位置定位 2. 并没有脱离原来的文本流 3. 可以超出父元素 | 1. 用于元素样式微调 |
| （绝对定位） | ||
选择器
作用：选择页面上的某一个或者某一类元素
id
- 可以为特定id的HTML元素指定特定的样式
- 以 "#" 来定义。
- ==必须保证全局唯一==，也就是说无法重复使用，否则报错
格式：
#name{
/*元素样式，以 键:值; 的格式*/
}
html调用样式
<p id="name">段落内容</p>
class
- 该选择器可以单独使用，也可以与其他元素结合使用。
- 可多个标签归类，可复用
格式：
.name{
/*元素样式，以 键:值; 的格式*/
}
html调用样式
<p class="name">段落内容</p>