前端学习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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值