这是我参加「第四届青训营」笔记创作活动的第二天

什么是CSS？

设置页面样式（设置字体和颜色，位置和大小，添加动画），Cascading Style Sheets的缩写

基础CSS代码

h1{
    color:white;
    font-size:14px;
}

选择器Selector：h1,给页面中所有h1标签定义样式
属性：color
属性值：white

使用CSS

外链

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

嵌入

<style>
    li { margin: 0 ; list-style:none; }
    p {margin:1em 0;}
</style>

内联

<p style="margin: 1em 0"> Example Content</p>

CSS工作原理？

加载HTML->解析HTML->创建DOM树->加载CSS->解析CSS->创建DOM树->展示页面

选择元素的方法

标签名、类名、id
属性
DOM树中的位置

选择器

通配选择器*
标签选择器（p，h1）
id选择器（唯一）
类选择器（.xxx）
属性选择器([],可用正则表达式匹配)

<input value='123' disabled>
<style>
    [disabled]{
        color:white;
    }
</style>

伪类选择器（:）

//状态伪类
<style>
    a:{
        color:white;
    }
    :focus{
        outline:2px solid oreange；
    }
</style>
//结构伪类
<style>
//第一个
    li:first-child{
        color:white;
    }
    :focus{
        outline:2px solid oreange；
    }
</style>

选择器组合

直接组合：AB (input:focus)
后代组合:A B
亲子组合:A>B
兄弟选择器:A~B（同级）
相邻选择器:A+B（紧跟）

颜色表示

RGB(143,172,135)
#8fac87
HSL(18,80%,60%)//色相（H）饱和度（S）亮度（L）
red/yellow/blue...
rgba(255,0,0,1)//a为透明度，1为不透明

CSS属性

font-family(字体样式)

因为可能会运用到不同浏览器，因此可写多个，从前到后匹配
font-family: Optima, Georgia, serif;
通用字体族：
    Serif衬线体
    Sans-Serif无衬线体
    Cursive手写体
    Fantasy（比较夸张）
    Monospace等宽字体
使用自定义字体
@font-face{
    font-famil：'fir';//字体名
    arc:url()//位置
}

font-size（字体大小）
line-height（行高属性）

更多属性：www.w3school.com.cn/css/index.a…

调试CSS

右键点击页面，选择检查
Ctrl + Shift+ I(Windows )
Cmd+Opt+I(Mac)

CSS优先级

行内样式（1000）>ID选择器（100）>类选择器（10）> 标签选择器(1)>通用选择器(0)

权重值越高，优先级越高,属性值会继承

CSS计算值

布局

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

布局方式

常规流：行级、块级、表格布局、FlexBox、Grid布局浮动绝对定位

盒模型

padding内边距
margin 外边距（margin：auto水平居中）
border 边框注意
content-box：默认值，标准盒子模型，width和height只包含内容的width和height，
border-box：width和height属性包括内容、内边距和边框。

盒模型最典型的布局规则

行级：一行多个，盒模型中的width、height不适用（div\ul\li\p\h1-6)
块级：独占一行，使用所有盒模型属性(span)

行级排版

text- align决定一行内盒子的水平对齐

vertical- align决定一个盒子在行内的垂直对齐

块级排版

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

Flex Box

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

使用： display: flex;

属性：

flex-direction（方向） justify-content（对齐方式） align-items（用于垂直对齐flex项目） flex-gorw（剩余空间按比例分配）

详细用法：www.w3school.com.cn/css/css3_fl…

Grid布局

使用： display: grid;

float浮动

position绝对定位

relative相对定位

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

absolute绝对定位

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

总结

CSS的属性有很多，可以让我们让页面更加美观，在前期不熟练的情况下编写页面需要查阅文档了解用法，在后期熟练后会发现其实很简单。难点在于页面布局，需要根据不同的属性去计算

理解CSS | 青训营笔记