理解CSS | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第2天前端的发展、更新迭代是很快的，虽然入门容易

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

前端的发展、更新迭代是很快的，虽然入门容易，但是要一直走下去，就需要持续不断的学习。

1. CSS概念

1. 定义

Cascading Style Sheets --- 层叠样式表

用来定义页面元素的样式

设置字体和颜色
设置位置和大小
添加动画效果

2. 代码结构

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

3. 使用方式

外链

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

嵌入

<style>
    *{
        margin:0;
        padding:0;
    }
    p{
        margin: 1em 0;
    }
</style>

内联

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

4. 工作方式

简单描述：在HTML加载后，解析是加载CSS并解析CSS，加样式添加在DOM树中，最后在页面中渲染出来

2. 选择器 Selector

找出页面中的元素，给他们设置样式

通配符选择器 *
标签选择器 p、li
id选择器 #id_name
类选择器 .class_name
属性选择器 [disabled] input[type="password"]
- 可以匹配 a[href^="#"] ，匹配标签a的属性href的属性值以#开头
- a[href$=".jpg"], 匹配标签a的属性href的属性值以.jpg结尾
伪类选择器
1. 状态伪类选择器
  
  元素出于某种状态下
  
  关于链接：
  
  a:link 默认状态
  
  a:visited 被访问过
  
  a:hover 鼠标移动到链接时
  
  a:active 鼠标按下
  
  关于输入框：
  
  input:focus 输入框聚焦
2. 结构伪类选择器
  
  根据dom节点在dom树出现的位置来选择元素，如first-child、last-child、nth-child(n)、first-of-type、last-of-type、nth-of-type(n)
伪元素选择器

帮助我们利用css创建新标签元素，而不需要HTML标签，从而简化HTML结构,如 ::before、::after
组合（关系）选择器
选择器组

不同的元素要使用相同的样式时，可以写在一起然后用逗号分隔开

3. 颜色

1. 使用RGB

Red， Green， Blue --- 取值 0-255

rgb(R，G，B)

#RGB(使用16进制)

2. 使用HSL

Hue --- 色相，取值0-360

Saturation --- 饱和度, 取值0-100%

Lightness --- 亮度，取值0-100%

hsl(H, S, L)

3. 指定颜色值

4. 透明度

alpha 取值0-1

#rgba, raba(r,g,b,a), hsla(h,s,l,a)

4. 字体

1. 使用`font-family`设置

h1{
    font-family: Optima, Georgia, serif;
}

它的前面是指定的字体，最后面是通用字体族

一般font-family会有不止一个字体，因为网页会被不同的设备访问，不同的设备拥有的字体是有限，所以指定多个字体设备可以从前到后使用能用的字体。

通用字体族：Serif 衬线体；Sans-Serif 无衬线体；Cursive 手写体；Fantasy (夸张些的字体)；Monospace 等宽字体

2. 使用 Web Fonts

就是将字体文件放在服务器上,会造成一些性能的开销

@font-face{
    font-family: "Megrim";
    src:url(https://fonts.gstatic.com/s/mergrim/v11/46kulbz5WjvLqZVam_hVUdI1w.woff2)format('woff2');
}
h1{
    font-family:Megrim, Cursive;
}

适用于需要严格按照设计稿字体来制作网页时

下面开始是对css的深入了解

5. css的继承

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

一般来说，和文字相关的会继承，和盒模型相关的不会

显示继承

通过inherit让不可继承的属性变成继承，比如想让box-sizing变成可继承的，那么可以

*{
    box-sizing: inherit;
}
/*此时想让类名为some-widget和它里面的所有元素都用border-box,只需要如下操作*/
.some-widget{
    box-sizing: border-box;
}

初始值

可以使用initial关键字显示重置为初始值

background-color: initial

6. 布局相关技术

常规流

行级

和其他行级并排，不能指定宽高（宽高由内容决定）

如：span, em, strong, cite, code

行级排版上下文IFC

Inline Formatting Context

只包含行级盒子的容器会创建一个IFC

排版规则

盒子在一行内水平摆放
一行放不下，换行显示
text-align 决定一行内盒子的水平对齐
vertical-align 决定一个盒子在行内的垂直对齐
避开浮动（float）元素

块级

独占一行，不和其它元素并排

如：body, article, div, main, section, h1-6, p, ul, li

块级排版上下文BFC

Block Formatting Context

某些容器会创建一个BFC, 如下

根元素

浮动、绝对定位，inline-block

Flex子项和 Grid 子项

overflow 值不为 visible 的块盒

display: flow-root

排版规则

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

表格布局

FlexBox

弹性布局，一种新的排版上下文

可以控制子级盒子的

摆放的流向，上下左右
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐

主轴对齐 justify-content

侧轴对齐 align-items
是否允许换行

子级盒子的设置

Flex,可以设置子项的弹性，当容器有剩余空间时，会伸展；容器空间不够时，会收缩，里面包含三个属性

flex-grow: 有剩余空间时的伸展能力

flex-shrink: 容器空间不足时收缩的能力

flex-basis: 没有伸缩时的基础长度

一些缩写

Grid 布局

相对于一维的flex来说，Grid就是二维的

使用display: grid 使元素生成一个块级的 Grid 容器

使用 grid-template 相关属性容器划分为网格，可以设置每一个子项占哪些行/列

举例：

设置三列两行，第一二列宽100px, 第三列200px，第一二行100px

{
    grid-template-columns:100px 100px 200px;
    grid-template-rows:100px 100px;
}

设置三列两行，第一列宽100px, 第二三列占了剩余的，第一行100px

{
    grid-template-columns:100px 1fr 1fr;
    grid-template-rows:100px 1fr;
}

grid line 网格线

设置子项占的区域

{
    .a{
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: 3;
        grid-column-end: 3;
    }
    /*以下是上面的简写方式，实现效果相同*/
    .a{
        grid-area: 1/1/3/3;
    }
}

基本上所有的布局都能通过 Grid 实现

浮动

float

主要用于实现文字环绕图片的效果

绝对定位

position

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

7. 学习css的几点建议

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

理解CSS | 青训营笔记