前端学习HTML&CSS

HTML&CSS

表格：

table：表格容器

​ -border：表格边框
​ -cellspacing：单元格之间的距离
​ -cellpadding：单元格内容与边框的距离

tr：设置行（table row）

th：设置表格头部，列

td：设置单元格内容，列

​ -rowspan：行合并属性
​ -colspan：列合并属性
​ caption：表格标题
​ thead
​ tbody

表单：收集数据

form：

​ -action：提交地址
​ -method：提交方式（GET,POST）

input：输入框

​ type：属性输入框的类型
​ -text：文本输入框
​ -password：密码输入框
​ -radio：单选按钮，通过name进行分组
​ -checkbox：复选框，通过name进行分组
​ -file：文件上传
​ -button
​ -submit:提交按钮
​ value
label：创建文本和输入框的联系
select，option
textarea
button

css语法：
选择器{
声明
}
引用方式
-行内样式
-内部样式，一般处于head标签内部
-外部样式，link引入或者在css中使用@inport
选择器：
-基本选择器：
-标签选择器
-类选择器：标签的class属性，.className获取
-ID选择器：标签的ID属性，#ID获取
-通配符：*，选择所有的标签
-属性选择器：通过标签的属性选择元素
-[name=content]
-伪类选择器：
-:[name]
-复合选择器（选择符）：描述两个选择器之间的关系
-空格：后代选择器
->：子代选择器
-+：相邻兄弟选择器
-~：兄弟选择器
-，：并集选择器

​ - ：交集选择啊
​ -伪元素选择器
​ -::[name]
​ -::before
​ -::after
选择器权重：
<标签，伪元素<类,伪类<ID<行内样式
-行内样式：1，0，0，0
-id：0，1，0，0
-类，伪类，属性：0，0，1，0
-标签，伪元素：0，0，0，1
-，复合：0，0，0，0
问题：使用link引入样式和@import引入样式的区别？

		-    #	0909

##	基础样式

###	字体

- font-size：字体大小
- font-weight：字体粗细
  - 100~900的整百数
  - 关键字：lighter，normal，bold，bolder
- font-family：设置字体
- font-style：字体样式，italic：斜体

###	文本 

- color
- text-align:left,right,center,start,end
- text-indent:文本缩进（em）
- line-height:行高
- text-decoration：文本修饰
  - line-through
  - underline
  - none
- text-transform:文字变化（用于英语）
  - capitalize
  - uppercase
  - lowercase
- letter-spacing
- word-spacing

### 背景

- background-color
- background-image：url（）；
- background-repeat：背景平铺
  - no-repeat
  - repeat-y/x
  - repeat
- background-position
- background-size
  - cover:图片不变形；图片不变形；图片可能被裁减
  - contain：不一定填满盒子；图片不变形；图片不被裁减
- background-attachment：背景固定

## 元素分类

### html

- 块级元素：p，h1~h6，div，ul，li，ol，dl
- 行内标签（内联标签):span,a,img,b,em

### css

- 块级元素（block）：独占一行，可以设置所有样式

- 行内块级元素（inline-block）：同排显示，可以设置所有样式

- 行内标签（inline）：同排显示，不能设置宽高等样式

​
​

通过display来控制元素的类型

#### inline-block的空格问题

- 设置父级的font-size为0，子集重新设置字体大小

#### inline-block元素的垂直对齐

- vertical-align

## 盒模型

### 构成方式

- content：内容区域
- padding：内边距（内容和边框之间的距离）
- border：边框
- margin：外边距（元素间的距离）

### 更改计算方式

box-sizing：设置width的计算方式

- content-box：标准盒模型，width=content-width，默认值
- border-box：IE盒模型（怪异盒模型） width=content-width+padding-width+border+width

​
​

### Margin的问题

#### margin叠压

- 在垂直方向上，两元素的外边距会进行叠压，其具体值为较大者，无解决方法，自己注意

#### margin塌陷(父子级)

- 产生条件：父子级都是块级元素，第一个子集元素设置margin-top时，父级会产生塌陷
- 解决方法：
  - 子集不设置margin-top，在父级设置padding-top
  - 设置子集或者父级不为块级元素

0909

基础样式

字体

• font-size：字体大小
• font-weight：字体粗细
  • 100~900的整百数
  • 关键字：lighter，normal，bold，bolder
• font-family：设置字体
• font-style：字体样式，italic：斜体

文本

• color
• text-align:left,right,center,start,end
• text-indent:文本缩进（em）
• line-height:行高
• text-decoration：文本修饰
  • line-through
  • underline
  • none
• text-transform:文字变化（用于英语）
  • capitalize
  • uppercase
  • lowercase
• letter-spacing
• word-spacing

背景

• background-color
• background-image：url（）；
• background-repeat：背景平铺
  • no-repeat
  • repeat-y/x
  • repeat
• background-position
• background-size
  • cover:图片不变形；图片不变形；图片可能被裁减
  • contain：不一定填满盒子；图片不变形；图片不被裁减
• background-attachment：背景固定

元素分类

html

• 块级元素：p，h1~h6，div，ul，li，ol，dl
• 行内标签（内联标签):span,a,img,b,em

css

• 块级元素（block）：独占一行，可以设置所有样式

• 行内块级元素（inline-block）：同排显示，可以设置所有样式

• 行内标签（inline）：同排显示，不能设置宽高等样式

通过display来控制元素的类型

inline-block的空格问题

• 设置父级的font-size为0，子集重新设置字体大小

inline-block元素的垂直对齐

• vertical-align

盒模型

构成方式

• content：内容区域
• padding：内边距（内容和边框之间的距离）
• border：边框
• margin：外边距（元素间的距离）

更改计算方式

box-sizing：设置width的计算方式

• content-box：标准盒模型，width=content-width，默认值
• border-box：IE盒模型（怪异盒模型） width=content-width+padding-width+border+width

Margin的问题

margin叠压

• 在垂直方向上，两元素的外边距会进行叠压，其具体值为较大者，无解决方法，自己注意

margin塌陷(父子级)

• 产生条件：父子级都是块级元素，第一个子集元素设置margin-top时，父级会产生塌陷
• 解决方法：
  • 子集不设置margin-top，在父级设置padding-top
  • 设置子集或者父级不为块级元素

定位

定位

定位分类

• static：静态定位（默认值）
• relative：相对定位
• fixed：固定定位
• absolute：绝对定位
• sticky：粘性定位

定位要素

• position
• 偏移度
  • top
  • bottom
  • left
  • right
• 层级

relative

• 特性
  • 相对自身原来位置进行偏移
  • 不改变元素本身特性
  • 保留元素原本的位置
• 应用
  • 一般不单独使用，经常配合绝对定位使用

fixed

• 特性
  • 完全脱离文档流，不保留元素原来位置
  • 基于视口定位（浏览器可视窗口）
  • 将元素特性改变为拥有行块特性的块级元素
• 应用：需要固定在页面的东西
  • 固定导航
  • 返回顶部
  • 。。。。

absolute

• 特性
  • 基于最近的定位了的父级元素，如果没有基于body
  • 将元素特性改变为拥有行内块级元素
  • 完全脱离文档流，不保留元素原来的位置

定位层级

• z-index

元素隐藏

• 元素透明度
  • opacity:0；
• 元素不可见性：visibility:hidden
• overflow:hidden;

• 一周笔记汇总

表格：

table：表格容器

​ -border：表格边框
​ -cellspacing：单元格之间的距离
​ -cellpadding：单元格内容与边框的距离

tr：设置行（table row）

th：设置表格头部，列

td：设置单元格内容，列

​ -rowspan：行合并属性
​ -colspan：列合并属性
​ caption：表格标题
​ thead
​ tbody

表单：收集数据

form：

​ -action：提交地址
​ -method：提交方式（GET,POST）

input：输入框

​ type：属性输入框的类型
​ -text：文本输入框
​ -password：密码输入框
​ -radio：单选按钮，通过name进行分组
​ -checkbox：复选框，通过name进行分组
​ -file：文件上传
​ -button
​ -submit:提交按钮
​ value
label：创建文本和输入框的联系
select，option
textarea
button

css语法：
选择器{
声明
}
引用方式
-行内样式
-内部样式，一般处于head标签内部
-外部样式，link引入或者在css中使用@inport
选择器：
-基本选择器：
-标签选择器
-类选择器：标签的class属性，.className获取
-ID选择器：标签的ID属性，#ID获取
-通配符：*，选择所有的标签
-属性选择器：通过标签的属性选择元素
-[name=content]
-伪类选择器：
-:[name]
-复合选择器（选择符）：描述两个选择器之间的关系
-空格：后代选择器
->：子代选择器
-+：相邻兄弟选择器
-~：兄弟选择器
-，：并集选择器

​ - ：交集选择啊
​ -伪元素选择器
​ -::[name]
​ -::before
​ -::after
选择器权重：
<标签，伪元素<类,伪类<ID<行内样式
-行内样式：1，0，0，0
-id：0，1，0，0
-类，伪类，属性：0，0，1，0
-标签，伪元素：0，0，0，1
-，复合：0，0，0，0
问题：使用link引入样式和@import引入样式的区别？

		-    #	0909

##	基础样式

###	字体

- font-size：字体大小
- font-weight：字体粗细
  - 100~900的整百数
  - 关键字：lighter，normal，bold，bolder
- font-family：设置字体
- font-style：字体样式，italic：斜体

###	文本 

- color
- text-align:left,right,center,start,end
- text-indent:文本缩进（em）
- line-height:行高
- text-decoration：文本修饰
  - line-through
  - underline
  - none
- text-transform:文字变化（用于英语）
  - capitalize
  - uppercase
  - lowercase
- letter-spacing
- word-spacing

### 背景

- background-color
- background-image：url（）；
- background-repeat：背景平铺
  - no-repeat
  - repeat-y/x
  - repeat
- background-position
- background-size
  - cover:图片不变形；图片不变形；图片可能被裁减
  - contain：不一定填满盒子；图片不变形；图片不被裁减
- background-attachment：背景固定

## 元素分类

### html

- 块级元素：p，h1~h6，div，ul，li，ol，dl
- 行内标签（内联标签):span,a,img,b,em

### css

- 块级元素（block）：独占一行，可以设置所有样式

- 行内块级元素（inline-block）：同排显示，可以设置所有样式

- 行内标签（inline）：同排显示，不能设置宽高等样式

​
​

通过display来控制元素的类型

#### inline-block的空格问题

- 设置父级的font-size为0，子集重新设置字体大小

#### inline-block元素的垂直对齐

- vertical-align

## 盒模型

### 构成方式

- content：内容区域
- padding：内边距（内容和边框之间的距离）
- border：边框
- margin：外边距（元素间的距离）

### 更改计算方式

box-sizing：设置width的计算方式

- content-box：标准盒模型，width=content-width，默认值
- border-box：IE盒模型（怪异盒模型） width=content-width+padding-width+border+width

​
​

### Margin的问题

#### margin叠压

- 在垂直方向上，两元素的外边距会进行叠压，其具体值为较大者，无解决方法，自己注意

#### margin塌陷(父子级)

- 产生条件：父子级都是块级元素，第一个子集元素设置margin-top时，父级会产生塌陷
- 解决方法：
  - 子集不设置margin-top，在父级设置padding-top
  - 设置子集或者父级不为块级元素

0909

基础样式

字体

• font-size：字体大小
• font-weight：字体粗细
  • 100~900的整百数
  • 关键字：lighter，normal，bold，bolder
• font-family：设置字体
• font-style：字体样式，italic：斜体

文本

• color
• text-align:left,right,center,start,end
• text-indent:文本缩进（em）
• line-height:行高
• text-decoration：文本修饰
  • line-through
  • underline
  • none
• text-transform:文字变化（用于英语）
  • capitalize
  • uppercase
  • lowercase
• letter-spacing
• word-spacing

背景

• background-color
• background-image：url（）；
• background-repeat：背景平铺
  • no-repeat
  • repeat-y/x
  • repeat
• background-position
• background-size
  • cover:图片不变形；图片不变形；图片可能被裁减
  • contain：不一定填满盒子；图片不变形；图片不被裁减
• background-attachment：背景固定

元素分类

html

• 块级元素：p，h1~h6，div，ul，li，ol，dl
• 行内标签（内联标签):span,a,img,b,em

css

• 块级元素（block）：独占一行，可以设置所有样式

• 行内块级元素（inline-block）：同排显示，可以设置所有样式

• 行内标签（inline）：同排显示，不能设置宽高等样式

通过display来控制元素的类型

inline-block的空格问题

• 设置父级的font-size为0，子集重新设置字体大小

inline-block元素的垂直对齐

• vertical-align

盒模型

构成方式

• content：内容区域
• padding：内边距（内容和边框之间的距离）
• border：边框
• margin：外边距（元素间的距离）

更改计算方式

box-sizing：设置width的计算方式

• content-box：标准盒模型，width=content-width，默认值
• border-box：IE盒模型（怪异盒模型） width=content-width+padding-width+border+width

Margin的问题

margin叠压

• 在垂直方向上，两元素的外边距会进行叠压，其具体值为较大者，无解决方法，自己注意

margin塌陷(父子级)

• 产生条件：父子级都是块级元素，第一个子集元素设置margin-top时，父级会产生塌陷
• 解决方法：
  • 子集不设置margin-top，在父级设置padding-top
  • 设置子集或者父级不为块级元素

定位

定位

定位分类

• static：静态定位（默认值）
• relative：相对定位
• fixed：固定定位
• absolute：绝对定位
• sticky：粘性定位

定位要素

• position
• 偏移度
  • top
  • bottom
  • left
  • right
• 层级

relative

• 特性
  • 相对自身原来位置进行偏移
  • 不改变元素本身特性
  • 保留元素原本的位置
• 应用
  • 一般不单独使用，经常配合绝对定位使用

fixed

• 特性
  • 完全脱离文档流，不保留元素原来位置
  • 基于视口定位（浏览器可视窗口）
  • 将元素特性改变为拥有行块特性的块级元素
• 应用：需要固定在页面的东西
  • 固定导航
  • 返回顶部
  • 。。。。

absolute

• 特性
  • 基于最近的定位了的父级元素，如果没有基于body
  • 将元素特性改变为拥有行内块级元素
  • 完全脱离文档流，不保留元素原来的位置

定位层级

• z-index

元素隐藏

• 元素透明度
  • opacity:0；
• 元素不可见性：visibility:hidden
• overflow:hidden;

• 一周笔记汇总

表格：

table：表格容器

​ -border：表格边框
​ -cellspacing：单元格之间的距离
​ -cellpadding：单元格内容与边框的距离

tr：设置行（table row）

th：设置表格头部，列

td：设置单元格内容，列

​ -rowspan：行合并属性
​ -colspan：列合并属性
​ caption：表格标题
​ thead
​ tbody

表单：收集数据

form：

​ -action：提交地址
​ -method：提交方式（GET,POST）

input：输入框

​ type：属性输入框的类型
​ -text：文本输入框
​ -password：密码输入框
​ -radio：单选按钮，通过name进行分组
​ -checkbox：复选框，通过name进行分组
​ -file：文件上传
​ -button
​ -submit:提交按钮
​ value
label：创建文本和输入框的联系
select，option
textarea
button

css语法：
选择器{
声明
}
引用方式
-行内样式
-内部样式，一般处于head标签内部
-外部样式，link引入或者在css中使用@inport
选择器：
-基本选择器：
-标签选择器
-类选择器：标签的class属性，.className获取
-ID选择器：标签的ID属性，#ID获取
-通配符：*，选择所有的标签
-属性选择器：通过标签的属性选择元素
-[name=content]
-伪类选择器：
-:[name]
-复合选择器（选择符）：描述两个选择器之间的关系
-空格：后代选择器
->：子代选择器
-+：相邻兄弟选择器
-~：兄弟选择器
-，：并集选择器

​ - ：交集选择啊
​ -伪元素选择器
​ -::[name]
​ -::before
​ -::after
选择器权重：
<标签，伪元素<类,伪类<ID<行内样式
-行内样式：1，0，0，0
-id：0，1，0，0
-类，伪类，属性：0，0，1，0
-标签，伪元素：0，0，0，1
-，复合：0，0，0，0
问题：使用link引入样式和@import引入样式的区别？

		-    #	0909

##	基础样式

###	字体

- font-size：字体大小
- font-weight：字体粗细
  - 100~900的整百数
  - 关键字：lighter，normal，bold，bolder
- font-family：设置字体
- font-style：字体样式，italic：斜体

###	文本 

- color
- text-align:left,right,center,start,end
- text-indent:文本缩进（em）
- line-height:行高
- text-decoration：文本修饰
  - line-through
  - underline
  - none
- text-transform:文字变化（用于英语）
  - capitalize
  - uppercase
  - lowercase
- letter-spacing
- word-spacing

### 背景

- background-color
- background-image：url（）；
- background-repeat：背景平铺
  - no-repeat
  - repeat-y/x
  - repeat
- background-position
- background-size
  - cover:图片不变形；图片不变形；图片可能被裁减
  - contain：不一定填满盒子；图片不变形；图片不被裁减
- background-attachment：背景固定

## 元素分类

### html

- 块级元素：p，h1~h6，div，ul，li，ol，dl
- 行内标签（内联标签):span,a,img,b,em

### css

- 块级元素（block）：独占一行，可以设置所有样式

- 行内块级元素（inline-block）：同排显示，可以设置所有样式

- 行内标签（inline）：同排显示，不能设置宽高等样式

​
​

通过display来控制元素的类型

#### inline-block的空格问题

- 设置父级的font-size为0，子集重新设置字体大小

#### inline-block元素的垂直对齐

- vertical-align

## 盒模型

### 构成方式

- content：内容区域
- padding：内边距（内容和边框之间的距离）
- border：边框
- margin：外边距（元素间的距离）

### 更改计算方式

box-sizing：设置width的计算方式

- content-box：标准盒模型，width=content-width，默认值
- border-box：IE盒模型（怪异盒模型） width=content-width+padding-width+border+width

​
​

### Margin的问题

#### margin叠压

- 在垂直方向上，两元素的外边距会进行叠压，其具体值为较大者，无解决方法，自己注意

#### margin塌陷(父子级)

- 产生条件：父子级都是块级元素，第一个子集元素设置margin-top时，父级会产生塌陷
- 解决方法：
  - 子集不设置margin-top，在父级设置padding-top
  - 设置子集或者父级不为块级元素

0909

基础样式

字体

• font-size：字体大小
• font-weight：字体粗细
  • 100~900的整百数
  • 关键字：lighter，normal，bold，bolder
• font-family：设置字体
• font-style：字体样式，italic：斜体

文本

• color
• text-align:left,right,center,start,end
• text-indent:文本缩进（em）
• line-height:行高
• text-decoration：文本修饰
  • line-through
  • underline
  • none
• text-transform:文字变化（用于英语）
  • capitalize
  • uppercase
  • lowercase
• letter-spacing
• word-spacing

背景

• background-color
• background-image：url（）；
• background-repeat：背景平铺
  • no-repeat
  • repeat-y/x
  • repeat
• background-position
• background-size
  • cover:图片不变形；图片不变形；图片可能被裁减
  • contain：不一定填满盒子；图片不变形；图片不被裁减
• background-attachment：背景固定

元素分类

html

• 块级元素：p，h1~h6，div，ul，li，ol，dl
• 行内标签（内联标签):span,a,img,b,em

css

• 块级元素（block）：独占一行，可以设置所有样式

• 行内块级元素（inline-block）：同排显示，可以设置所有样式

• 行内标签（inline）：同排显示，不能设置宽高等样式

通过display来控制元素的类型

inline-block的空格问题

• 设置父级的font-size为0，子集重新设置字体大小

inline-block元素的垂直对齐

• vertical-align

盒模型

构成方式

• content：内容区域
• padding：内边距（内容和边框之间的距离）
• border：边框
• margin：外边距（元素间的距离）

更改计算方式

box-sizing：设置width的计算方式

• content-box：标准盒模型，width=content-width，默认值
• border-box：IE盒模型（怪异盒模型） width=content-width+padding-width+border+width

Margin的问题

margin叠压

• 在垂直方向上，两元素的外边距会进行叠压，其具体值为较大者，无解决方法，自己注意

margin塌陷(父子级)

• 产生条件：父子级都是块级元素，第一个子集元素设置margin-top时，父级会产生塌陷
• 解决方法：
  • 子集不设置margin-top，在父级设置padding-top
  • 设置子集或者父级不为块级元素

定位

定位

定位分类

• static：静态定位（默认值）
• relative：相对定位
• fixed：固定定位
• absolute：绝对定位
• sticky：粘性定位

定位要素

• position
• 偏移度
  • top
  • bottom
  • left
  • right
• 层级

relative

• 特性
  • 相对自身原来位置进行偏移
  • 不改变元素本身特性
  • 保留元素原本的位置
• 应用
  • 一般不单独使用，经常配合绝对定位使用

fixed

• 特性
  • 完全脱离文档流，不保留元素原来位置
  • 基于视口定位（浏览器可视窗口）
  • 将元素特性改变为拥有行块特性的块级元素
• 应用：需要固定在页面的东西
  • 固定导航
  • 返回顶部
  • 。。。。

absolute

• 特性
  • 基于最近的定位了的父级元素，如果没有基于body
  • 将元素特性改变为拥有行内块级元素
  • 完全脱离文档流，不保留元素原来的位置

定位层级

• z-index

元素隐藏

• 元素透明度
  • opacity:0；
• 元素不可见性：visibility:hidden
• overflow:hidden;

• 动效

transition过渡

• 执行过渡属性transition-property：；
  • all
  • background-color
• 持续时间transition-duration:;
  • s
  • ms
• 时间函数（速度曲线）transition-timing-function:;
  • ease
  • linear：匀速运动
  • cubic-bezier:贝塞尔曲线
  • step
• 延迟transition-delay:1s；

transform变换

• 平移transform:translate(0,0);

• 旋转transform:rotate(360deg)

• 缩放transform:scale()

• 倾斜transform:skew(45deg)

  注意：行内元素无法使用transform

• 变换相关属性

  • 设置旋转基点transform-origin
  • 启动浏览器3d渲染transform-style:presever-3d;注意：写在父级之上
  • backface-visibility:hidden;

animation动画

• animation: name time 运动状态 延迟 循环次数（infinite:无限循环）normal ;
  • @keyframes name{}
• animation-direction:
  • alternate奇数正向、偶数反向执行；
  • alternate-reverse奇数反向、偶数正向执行
• 动画结束后停留状态：forwards(停留在动画结束位置)animation-fill-mode：forwards;
• 进行animation-play-state：running
• 暂停animation-play-state:paused;

• 弹性布局

注意：设为Flex布局以后，子元素的float、clear和vertical-align将失效

• display:flex
• display:inline-flex

基本概念

• 容器：设置flex的元素
• 项目：容器的直接子元素

容器属性

• flex-wrap项目是否能够换行

  • nowrap;默认值不换行
  • wrap；换行
  • wrap-reverse;换行后内容出现在上面

• flex-direction;设置主轴的方向

  • row;行（水平方向；左-右）
  • column;列（垂直方向 上-下）
  • row-reverse;（水平方向，右-左）
  • column-reverse;(垂直方向，下-上)

• flex-flow:column nowrap:简写方式flex-direction 和flex-wrap的合并简写

• justify-content;主轴方向上的内容排列方式

  • center；居中

  • flex-start;左边排列

  • flex-end;右边排列

    ​ 两端对齐

  • space-between;两边对齐

  • space-around;围绕

  • space-evenly;间距两边平分

• align-items:单行内容在交叉轴的排列方式

  • stretch；
  • center;
  • flex-start;
  • flex-end;

• align-content:多行内容在交叉轴的排列方式

  • flex-start;
  • center;
  • flex-end;
  • space-between;
  • space-around;

项目属性

• order：控制元素在弹性布局中的排列位置(默认为0)
• align-self：控制元素自身在交叉轴的排列方式
  • flex-end
  • flex-start
  • center
  • baseline
• flex-grow:剩余空间的分配比例奇数（默认0）
• flex-shrink；当空间不足需要压缩时，压缩的基数（默认1）
• flex-basis:在产生空间分配时元素所占初始大小
• flex: grow shrinl basis

网格布局

弹性布局

注意：设为Flex布局以后，子元素的float、clear和vertical-align将失效

• display:flex
• display:inline-flex

基本概念

• 容器：设置flex的元素
• 项目：容器的直接子元素

容器属性

• flex-wrap项目是否能够换行

  • nowrap;默认值不换行
  • wrap；换行
  • wrap-reverse;换行后内容出现在上面

• flex-direction;设置主轴的方向

  • row;行（水平方向；左-右）
  • column;列（垂直方向 上-下）
  • row-reverse;（水平方向，右-左）
  • column-reverse;(垂直方向，下-上)

• flex-flow:column nowrap:简写方式flex-direction 和flex-wrap的合并简写

• justify-content;主轴方向上的内容排列方式

  • center；居中

  • flex-start;左边排列

  • flex-end;右边排列

    ​ 两端对齐

  • space-between;两边对齐

  • space-around;围绕

  • space-evenly;间距两边平分

• align-items:单行内容在交叉轴的排列方式

  • stretch；
  • center;
  • flex-start;
  • flex-end;

• align-content:多行内容在交叉轴的排列方式

  • flex-start;
  • center;
  • flex-end;
  • space-between;
  • space-around;

项目属性

• order：控制元素在弹性布局中的排列位置(默认为0)
• align-self：控制元素自身在交叉轴的排列方式
  • flex-end
  • flex-start
  • center
  • baseline
• flex-grow:剩余空间的分配比例奇数（默认0）
• flex-shrink；当空间不足需要压缩时，压缩的基数（默认1）
• flex-basis:在产生空间分配时元素所占初始大小
• flex: grow shrinl basis

移动端适配

相关概念

• 屏幕尺寸：屏幕对角线的长度，计量单位为英寸
• 像素：像素是硬件和软件所能控制的最小单位，画面上表现出来的最小单位，大小不能固定
• 分辨率:指纵横向上的像素点数，单位是px
• 设备像素：也称设备物理分辨率
• 设备独立像素：逻辑分辨率，将多个像素合并成一个像素使用
• 设备像素比：dpr，即物理像素和设备独立像素的比值

viewport

• rem:根标签的字体大小倍数

  • rem方案
    • 10rem=网页宽度

• vw,vh,vmax,vmin(宽度不可控，不建议使用)

  • 1vw：1/100网页宽度
  • 1vh：1/100网页高度
  • vmin：vw于vh较小值
  • vmax：vw于vh较大值

• rem flexible方案

  • 10rem=网页宽度
  • vw方案(宽度不可控，不建议使用)
  • vw+rem
  • px,vw,flex

• 移动适配问题

  • 边框
    • css判断设备的dpr用@media(-webkit-min-device-pixel-ratio:2)

  • 图片

1. List item