【青训营】- CSS基础-一一网

一、CSS介绍–基础规则

选择器：选择了一个或多个需要添加样式的元素
1. 元素选择器：p 选择<p>
2. ID选择器(每个ID只对应一个元素，一个元素只对应一个ID)：#my-id 选择<p id="my-id">
3. 类选择器：.my-class 选择<p class="my-class">
4. 属性选择器：img[src] 选择<img src="https://juejin.cn/post/myimage.png"> （选择拥有特定属性的元素）
5. 伪类选择器：a:hover 仅在鼠标指针悬停在链接上时选择<a>
声明：一个单独的规则，用来指定添加样式元素的属性
属性：指定要改变HTML元素样式
属性的值：从指定属性的众多外观中选择一个值
层叠与继承：
1. 层叠：
- 当选择器完全一致时，出现在最后的规则会生效，覆盖掉前面的规则
- 选择器优先级：一个选择器越具体越优先
  - 一个选择器不是很具体 –> 会选择页面上该类型的所有元素
  - 一个类选择器稍微具体点 –> 会选择该页面中有特定class属性值的元素，所以优先级要高一点
  - 所以下面的h1最后会显示红色

.main-heading {
   color: red;
}
h1 {
   color: blue;
}
<h1 class="main-heading">
   This is my heading.
</h1>
复制代码

继承：一些设置在父元素上的css属性是可以被子元素继承的，有些则不能

二、CSS常用规则

布局
1. 盒模型：在CSS中所有的元素都被一个个的“盒子”（块级盒子和内联盒子）包围着
- 块级盒子：
  - 组成上面的块级盒子需要：
    - Content box：这个区域用来显示内容，大小可通过设置width和height
    - Padding box：包围在内容区域外部的空白区域，大小通过padding相关属性设置
    - Border box：边框盒包裹内容和内边距，大小通过border相关属性设置
    - Margin box：这是最外面的区域，是盒子和其他元素之间的空白区域，大小通过margin相关属性设置
  - 被定义成块级盒子表现出的行为：
    - 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大多数情况下意味着盒子会和父容器一样宽（也就是撑满了）
    - 每个盒子都会换行
    - width和height属性可用发挥作用
    - 内边距(padding)，外边距(margin)和边框(border)会将其他元素从当前盒子周围”推开“
    - 除非特殊指定，标题和段落默认都是块级盒子
- 内联盒子：一个盒子对外显示inline，行为如下
  - 盒子不会产生换行
  - width和height属性将不起作用
  - 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于inline状态的盒子推开（即不会占据空间）
  - 水平方向的内边距、外边距以及边框会被应用且会把其他处于inline状态的盒子推开
  - 用作链接的<a>元素、<span>都是默认处于inline状态的
- 通过设置 box-sizing: border-box; 来实现修改浏览器这一默认行为 border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的
- 若想所有元素都使用替代模式，设置box-sizing在<html>元素上，然后设置所有元素继承该属性
- display: inline-block; 在内联和块之间提供了一个中间状态 –> 当不希望一个项切换到新行（即希望在行内），但希望可以设定宽度和高度时适用
- 正常文档流
  - 默认的，块级元素按照基于其父元素的书写顺序（默认值：horizontal-tb）的块流动方向放置
  - 每个块级元素会在上一个元素下面另起一行，它们会被设置好的margin分隔。块级元素是垂直组织的。
  - 内联元素：不会另起一行，只要在其父级块级元素的宽度内有足够空间，就与其他内联元素被安排在同一行；空间不够的话，溢出的文本或元素将移到新的一行
- 弹性布局
  - 在容器上加display: flex; 属性 ==> 得到一个横排的布局，容器类似于块级元素，宽度默认由子元素决定；子元素可设宽高且不换行
- 定位(position)
  - 静态定位：position: static; 默认给到每个元素
  - 相对定位：position: relative; 在文档流中仍然占据位置，可以用top，left，bottom，right属性相对于原来所占的位置做一些偏移操作
  - 绝对定位：position: absolute; 绝对定位的元素完全脱离文档流和弹性盒子。可自己指定绝对定位的盒子的定位和大小。==> 此时top、left是相对于一个非static定位的父元素容器
  - position: fixed; 其top、left等属性是相对于浏览器窗口
  - 非static值的position属性让元素之间可以相互覆盖，css提供了z-index属性来控制哪个元素覆盖在最上层（值越小，越排在最底层）
装饰相关
1. 文字
1. 背景
1. 边框
1. 阴影
内阴影可以想象是：border偏高，然后向下投影，阴影打到下面 ==> 例如上面第四种，横向偏移5em，纵向偏移1em，金色颜色；
最后一个是两个阴影：-1em相当于光线从右边打过来，阴影往左边投
文字阴影
1. 交互相关
cursor属性可改变鼠标在一些元素上时的样式是怎么样的
1. 动画

.tran {
    transition: width 300ms ease-in;
    animation: spin 5s ease-in-out infinite;/*应用animation属性来使用刚才定义的spin动画，持续5s，然后是慢慢开始，快速到达百分之八九十状态再慢慢结束，infinite就是无限进行下去*/
}
@keyframes spin {/*keyframes动画的关键字*/
    from {
        transform: rotate(0deg);/*旋转0度*/
    }
    to {
        transform: rotate(360deg);/*转360度*/
    }
}
复制代码