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

理解CSS

一.CSS 是什么

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

二.CSS的组成

1.选择器-Selector

找出页面中的元素，以便于给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置

具体的有：

通配选择器
```
* {
 margin : 0;
}
```
标签选择器
```
h1 {
    color : orange;
}
```
id选择器
```
#logo {
    font-size : 60px;
}
```
类选择器
```
.done {
	color : gray;	
}
```

属性选择器

<label>用户名：</label>
<input value = "zhao" disabled />

<label>密码：</label>
<input value = "123456" type="password" />

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
<style>
    <!-- 注释1 -->
    [disabled] {
        background:#eee;
        color:#999;
    }
    <!-- 注释2 -->
    input[type="password"] {
        border-color : red;
        color : red;
    }
    <!-- 注释3 -->
    a[href^="#"] {
        color:#f54767;
        background:0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
        padding-left:1.1em;
    }
    <!-- 注释4 -->
 a[href$=".jpg"] {
        color:#f54767;
        background:0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
        padding-left:1.1em;
    }
</style>

注释1：对包含disabled属性的标签进行匹配

注释2：对input标签里包含type="password"属性的进行匹配

注释3：对a标签里href属性中的值以#开头的进行匹配

注释4：对a标签里href属性中的值以$结尾的进行匹配

伪类（paseudo-classes)

不基于标签和属性定位元素

几种伪类

状态伪类

某个元素处于某种状态下，才会触发

a:link {}  <!-- 默认状态下 -->
a:visited {} <!-- 访问过 -->
a:hover{} <!-- 鼠标移到该目标上 -->
a:active{} <!-- 鼠标点下该目标 -->

:focus {} <!-- 点击目标后,比如在输入框中输入内容 -->

结构性伪类

某个元素处于某个结构上，才会触发

li : {}
li:first-child {}   <!-- li的第一个元素 -->
li:last-child {}  <!-- li的最后一个元素 -->

组合使用

<label>
	用户名：
    <input class="error" value="aa">
</label>
<span class="error">
	最少三个字符
</span>

<style>
    .error {
        color:red;
    }
    input.error {
        border-color:red;
    }
</style>

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A > B	选中B，如果它是A的子元素	section > p
兄弟组合器	A ~ B	选中B，如果它在A后且和A同级	h2 ~ p
相邻组合	A + B	选中B，如果它紧跟在A的后面	h2 + p

选择器组

body,h1,h2,ul,ol,li{}
[type="checkbox"],[type="radio"]{}

2.属性及属性值

颜色
1. RGB
  - #000000
  - rgb(0~255,0~255,0~255)
2. HSL
  1. Hue 色相(H)是色彩的基本属性，如红色、黄色等；取值范围0-360.
  2. Saturation 饱和度(S)是指色彩的鲜艳程度；取值范围0-100%
  3. Lightness 亮度(L)指颜色的明亮程度；越高颜色越亮；取值范围0-100%
  hsl（00,0%,0%）;
3. 具体颜色名字
alpha 透明度
1. RGB
  
  #ff000078
  
  rgba(255,0,0,0.47)
2. HSL
  
  hsla(0,100%,100%,1)
font-family 字体
```
h1 {
    font-family:Optima,Georgia,serif;
}
body {
    font-family:Helvetica,sans-serif;
}
```
- 在设置完font-family后，记得最后加个通用的字体,指的是一类风格的字体，并不是某种特定的字体。
- 如：serif(衬线体)，sans-serif(无衬线体)，cursive(手写体)，fantasy，Monospace(等宽字体)
- 建议英文字体的顺序，放在中文字体之前
- 或者推荐使用 Web Fonts（即把字体放在服务器端，加载时进行下载），性能上有开销，需要渲染。加上中文的字体包较大，则可以使用裁剪工具，把用不上的字体裁剪。
font - size
- 关键字
  - small、medium、large
- 长度
  - px、em(相对父元素的大小，有点类似于百分比)
- 百分数
  - 相对于父元素字体大小
font - style
font - weight 某些字体可能没有这么多种自重
line - height
white-space 处理换行和空格

三.在页面中使用CSS

外链
```
<link rel="stylesheet" href="#">
```

嵌入

<style>
    * {
        margin:0;
    }
    li {
        list - style :none;
    }
</style>

内联

<p style="margin:lem 0">Cascading Style Sheets </p>

四.CSS是如何工作的

深入CSS

一.选择器的特异度/权重（Specificity）

二.继承

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

字体类基本上都可以继承，涉及到盒模型的则大部分继承不了

显式继承

*{
	box-sizeing:inherit;
}
html {
	box-sizeing:border-box;
}
.some-widget{
	box-sizeing:content-box;
}

初始值

css中，每个元素都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为0
可以使用 inital 关键字显示重置为初始值
- background-color：initial

三.CSS的求值过程

四.布局（Layout）

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

1.布局相关技术

常规流
- 行级
  - Block Level Box
  - 不和其它盒子并列摆放
  - 适用于所有的盒模型
  - span、em、strong、cite、code等
  - display:inline
- 块级
  - Inline Level Box
  - 和其它盒子一起放在一行或拆开成多行
  - 盒模型中的width、height不适应
  - body、article、div、main、section、h1-6、p、ul、li等
  - display:block
display 属性

block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none 排版时完全被忽略
- 表格布局
- FlexBox
- Grid 布局
浮动
绝对定位


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

盒模型：
width:

指定content box 宽度

取值为长度、百分数、auto

auto由浏览器根据其他属性确定

百分数相对于容器的 content box 宽度

height:

指定content box 高度

取值为长度、百分数、auto

auto由浏览器根据其他属性确定

百分数相对于容器的 content box 高度

容器有指定的高度时，百分数才生效

padding：

指定元素四个方向的内边距

百分数相对于容器宽度
border
指定容器边框样式、粗细和颜色

三种属性

border-width

border-style

border-color

四个方向

border-top

border-right

border-bottom

border-left
border: 1px solid #ccc
当四条边框颜色不同时：

制作三角形等（引用）
margin

指定元素四个方向的外边距

取值可以是长度、百分数、auto

百分数相对于容器宽度

使用margin:auto水平居中

盒模型外边距重叠:margin collapse

box-sizing

content-box（默认）

border-box

从box-sizing:border-box属性入手，来了解盒模型

overflow

控制盒子内容超出盒子

2.常规流 Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流
其它元素都在常规流之内（in-flow）
常规流中的盒子，在某种排版上下文中参与布局
1. 行级排版上下文
2. 块级排版上下文
3. Table 排版上下文
4. Flex 排版上下文
5. Grid 排版上下文

2.1行级排版上下文

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

2.2块级排版上下文

Block Formatting Context（BFC）
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是 visible 的块盒
- display : flow-root:
BFC内的排版规则
- 盒子从上到下摆放
- 垂直 margin 合并
- BFC 内盒子的 margin 不会与外面的合并
- BFC 不会和浮动元素重叠

2.3Flex 排版上下文

display:flex
一种新的排版上下文
它可以控制子级盒子的：
- 摆放顺序
- 摆放的流向
- 盒子的宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
主轴与侧轴
justify-content
align-items
align-self
order
Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
- flex-grow有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
flex - grow
flex-shrink

flex(简写属性)


`flex : 1`	`flex-grow : 1`
`flex : 100px`	`flex-basis : 100px`
`flex : 2 1`	`flex-grow : 2;flex-shrink:1`
`flex : 1 100px`	`flex-grow : 1;flex-basis : 100px`
`flex : 2 0 100px`	`flex-grow : 2;flex-shrink : 0;flex-basis : 100px`
`flex : auto`	`flex : 1 1 auto`
`flex : none`	`flex : 0 0 auto`

2.4Grid 布局

![image-20220726224203350](C:\Users\Ming comity\AppData\Roaming\Typora\typora-user-images\image-20220726224203350.png)

display：grid使元素生成一个块级的 Grid 容器
使用 grid-template相关属性将容器划分为网格
![image-20220726224441862](C:\Users\Ming comity\AppData\Roaming\Typora\typora-user-images\image-20220726224441862.png)
设置每个子项占哪些行/列

理解/深入CSS | 青训营笔记

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

理解CSS

一.CSS 是什么

二.CSS的组成

1.选择器-Selector

2.属性及属性值

三.在页面中使用CSS

四.CSS是如何工作的

深入CSS

一.选择器的特异度/权重（Specificity）

二.继承

三.CSS的求值过程

四.布局（Layout）

1.布局相关技术

从box-sizing:border-box属性入手，来了解盒模型

2.常规流 Normal Flow

2.1行级排版上下文

2.2块级排版上下文

2.3Flex 排版上下文

2.4Grid 布局

3.float

4.position

理解/深入CSS | 青训营笔记

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

理解CSS

一.CSS 是什么

二.CSS的组成

1.选择器-Selector

2.属性及属性值

三.在页面中使用CSS

四.CSS是如何工作的

深入CSS

一.选择器的特异度/权重（Specificity）

二.继承

三.CSS的求值过程

四.布局（Layout）

1.布局相关技术

从box-sizing:border-box属性入手，来了解盒模型

2.常规流 Normal Flow

2.1行级排版上下文

2.2块级排版上下文

2.3Flex 排版上下文

2.4Grid 布局

3.float

4.position

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