理解 CSS | 青训营笔记

CSS

碎碎念：之前在上一次的笔记里记录学习了一些入门基础的CSS语法，这次的笔记主要记录一些学习CSS选择器，以及一些简单的装饰排版方法

CSS 特性

1. 继承性

   1.   继承内容：文字控制属性（color, font, text, line...）
   2.   不用特殊写，通过代码嵌套编译器自动解析，同样具有重写的（自己有属性，不能通过父级来自动继承）

2. 层叠性

选择器优先级相同时：后覆盖前

3. 优先级

通过继承 < 通配符 < 标签 < 类 < id < 行内 < ！important（能将除继承外其他的权重直接提到最高，慎用）

div{color: green !important;}

更精准的选择器优先级更高

叠加计算

用于判断复合选择器

(行内样式选择器的个数，id选择器的个数，类选择器的个数，标签选择器的个数) 从左到右优先级降低，有限考虑左边的，个数大的优先级高，左侧相同再一级一级向后比较。

盒子模型

1. 组成部分：内容区域，内边距区域，边框区域，外边距

padding: 上右下左的四个距离（可以取1个值：全部是一样；2个值：上下，左右；3：上，左右，下）

Margin 与 padding 相似

padding: 20px, 10px, 15px, 5px;

border 和 padding 会撑大盒子，自减 ：

box-sizing: border-box;

2. 例子：

div{
        width: 300px;
        height: 100px;
        background-color: aquamarine;
        border: 1px (solid 实线 dashed虚线 dotted点线) #000;
        border-方向：单独控制某一方向
        padding: 20px;
        margin: 50px;
}

3. 其他功能：清除原格式，版心居中（margin: 0 auto）

其他选择器

1. 结构伪类

E(元素的名称): first/last/nth/nth-last-child（公式，可以省略）{}

功能：该元素实现选中某一确定的标签

2. 伪元素选择器

• 使用 CSS 创建标签，用于美化装饰性的小图
• 必须有content

::before 在父元素的前面加

::after 在父元素后面加

.father::after{
    content:"内容，必须有";
    还可以加很多其他属性
}

浮动

作用：图文环绕(图片选择器)，版面(两个标签选择器，同时float，能够让块标签紧贴并排，或者产生嵌入效果)

设置浮动后会浮在没有浮动的元素上面，浮动找浮动（符合行内块标准）

选择器{float:方向;}

定位

解决盒子与盒子之间的层叠问题

1. 相对定位

相对于自己原本的位置进行定位，且其他元素完全不变

position: relevant;
方向：;
方向：;

2. 绝对定位

先找已经定位的父级，如果有则按照父级进行定位，如果没有则根据body来更改位置

position: absolute;
方向：;
方向：;

特殊装饰

1. 光标类型 cursor

2. 圆角 border-radius: 圆角的半径;（可以有四个值：左上顺时针转）

常见场景：正圆，胶囊按钮

3. 溢出部分显示 overflow

visible	溢出部分可见
hidden	隐藏
scroll	无论是否溢出都显示滚轮
auto	检测溢出显示滚轮

4. opacity 透明度

元素显示隐藏

visibility: hidden(不常用，占位隐藏)

display:nonne（不占位隐藏）

鼠标悬停显示：

选择器: hover 元素{display: block;}