这是我参与「第五届青训营」伴学笔记创作活动的第2天

一、CSS基础知识

1.什么是CSS？

Cascading Style Sheets
用来定义页面元素的样式
- 设置字体和原色
- 设置位置和大小
- 添加动画效果

2.CSS基本语法

选择器Selector+属性Property+属性值Value+声明Declaration

选择器{
      属性名: 属性值;
      属性名: 属性值;
      声明
}

3.在页面中的使用方法

外链（一般用的最多）

<link rel="stylesheet" href="/assets/style.css">

嵌入
内联

4.CSS是如何工作的？

5.选择器Selector

基础选择器
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
伪类选择器
- 伪类：不基于标签和属性定位元素
  - 状态伪类
  - 结构性伪类
组合选择器

选择器组

6.选择器优先级

!important会覆盖页面内任何位置的元素样式，优先级NO.1
内联样式>ID选择器>类选择器、伪类选择器、属性选择器>标签选择器

7.颜色

<!DOCTYPE html>
<html>
<head>
    <title>CSS颜色</title>
    <style>
    p {
        font-size: 16px;
        font-weight: bold;
    }
    #rgb {
        color: rgb(255, 0, 0);
    }

    #rgba {
        color: rgba(255, 0, 0, 0.5);
    }

    #hex {
        color: #EE82EE;
    }

    #short {
        color: #E8E;
    }

    #hsl {
        color: hsl(0, 50%, 50%);
    }

    #hsla {
        color: hsla(0, 50%, 50%, 0.5);
    }

    #built {
        color: green;
    }
    </style>
</head>
<body>
    <p id="rgb">
        color: rgb(255, 0, 0);
    </p>
    <p id="rgba">
        color: rgba(255, 0, 0, 0.5);
    </p>
    <p id="hex">
        color: #EE82EE;
    </p>
    <p id="short">
        color: #E8E;
    </p>
    <p id="hsl">
        color: hsl(0, 50%, 50%);
    </p>
    <p id="hsla">
        color: hsla(0, 50%, 50%, 0.5);
    </p>
    <p id="built">
        color: green;
    </p>
</body>
</html>

8.字体

font-family：设置字体
font-style：设置字体的风格，例如倾斜、斜体等
font-weight：设置字体粗细
font-size：设置字体尺寸
font-variant：将小写字母转换为小型大写字母
font-stretch：对字体进行伸缩变形（使用较少，并且主流浏览器都不支持）
font：字体属性的缩写，可以在一个声明中设置多个字体属性

二、深入CSS

1.选择器的特异度

2.继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。

3.初始值

CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
可以使用initial关键字显式重置为初始值
- background-color：initial

4.CSS 求值过程

5.布局（Layout）

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

6.盒子

（1）width

指定content box宽度
取值为长度、百分数、auto
auto由浏览器根据其它属性确定
百分数相对于容器的content box宽度

（2）height

指定content box高度
取值为长度、百分数、auto
auto取值由内容计算得来
百分数相对于容器的content box高度
容器有指定的高度时，百分数才生效

（3）padding

指定元素四个方向的内边距
百分数相对于容器宽度

（4）border

指定容器边框样式、粗细和颜色
- 三种属性
  - border-width
  - border-style
  - border-color
- 四个方向
  - border-top
  - boder-right
  - border-bottom
  - border-left

（5）margin

指定元素四个方向的外边距
取值可以是长度、百分比、auto
百分数相对于容器宽度
使用margin：auto水平居中
外边距折叠：margin collapse

7.盒模型布局规则

8.display属性

display属性
block	块级盒子
inline	行级盒子
inline-block	本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行
none	排版时完全被忽略

9.行级排版上下文

Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则
- 盒子在一-行内水平摆放
- 一行放不下时，换行显示
- text-align决定-行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*

10.块级排版上下文

Bock Formatting Context (BFC)
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display: flow-root;

11.BFC内的排版规则

盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

12.Flex Box是什么？

一种新的排版上下文
它可以控制子级盒子的:
- 摆放的流向(→ ← ↑ ↓)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

13.Flexibility

可以设置子项的弹性:当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
flex-grow有剩余空间时的伸展能力
flex-shrink容器空间不足时收缩的能力
flex-basis没有伸展或收缩时的基础长度

14.Grid布局

Grid布局对比Flex Box

display：grid

划分网格

grid line网格线

15.position属性

position属性
static	默认值，非定位元素
relative	相对自身原本位置偏移，不脱离文档流
absolute	绝对定位，相对非static祖先元素定位
fixed	相对于视口绝对定位

（1）position:relative

在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top、left、 bottom、 right 设置偏移长度
流内其它元素当它没有偏移一样布局

（2）position:absolute

脱离常规流
相对于最近的非static祖先定位
不会对流内元素布局造成影响

三、学习CSS的几点建议

充分利用MDN和W3C CSS规范
保持好奇心，善用览器的开发者工具
持续学习，CSS新特性还在不断出现

四、引用参考

1.对于CSS颜色部分，引用了网页c.biancheng.net/css3/color.… 的表格。
2.CSS字体样式部分，引用了网页c.biancheng.net/css3/font.h… 的表格

五、课后总结

本章学习了CSS的相关知识，掌握了CSS的基本概念以及基本语法等，结合课程中提到的例子，对CSS的各知识点掌握更加透彻，深化了自身对于CSS的学习和掌握程度，不过由于课程较短，涉及的部分知识点较为宽泛，比如各类选择器的具体使用方法、CSS中的浮动等知识点，同时这些也是较难掌握的知识垫，仍需自身在课后多加自学掌握。

CSS｜青训营笔记