前端网页web
标题
小标题
注意
问题/代码、示例
代码中常用或重点加粗，补充加括号
VS code
快捷键与基础知识
打开网页插件 open in browser
缩放字号： ctrl + ctrl -
网页文件后缀名 .html
折叠侧边栏 ctrl + b
跳转到某行代码 ctrl+g 再输入行号
在默认浏览器打开网页文件 Alt +b
保存 ctrl +s
自动生成骨架 html后缀文件下，英文!+Enter/Tab(在有蓝色框的时候再按 后面的)
自动生成<>和尾部标签 输入标签名后回车（Enter）(有蓝色框时)
添加删除注释 ctrl+/（添加时，任意位置，一行文本都变成注释
删除时，只删除注释标签，内容变为文本或代码）
对多行的相同位置进行操作 鼠标点击起始位置，按住alt+shift，再点击终点位置（点击 任意位置可取消选中）
. 相对路径下HTML文件所在的本文件夹
.. 相对路径下HTML文件所在的文件夹的上一级文件夹
/ 进入该文件夹，通用（Windows默认\）
H5里，属性名和属性值一致，可简写为一个单词
文字中间添加标签，先空格，再写标签，可以产生代码提示（删空格）
多属性标签换属性时，删掉引号再输入双引号会生成代码提示
vs code 不选中，crtl+c 、ctrl+x和ctrl+v 复制剪切粘贴整行（鼠标相对位置不变）
选中多行（或单行） Tab 向后缩进
Tab+shift 向前缩进
Emmet写法：代码简写法式
- HTML：类选择器： 标签名.类名
例：div.abc <div class="abc"></div>
（div可省略标签名）
id选择器： 标签名#id
例：div#abc <div id="abc"></div>
（div可省略标签名）
（可用加法将简写后的标签连起来简写）
例：div.ab+span.abc <div class="ab"></div>
<span class="abc"></span>
同级标签 标签名+标签名（+为加号）
例：div+p <div></div>
<p></p>
父子级标签 父级标签>子级标签
例：div>p <div>
<p></p>
</div>
多个相同标签 标签名*数字
例：p*3 <p></p>
<p></p>
<p></p>
有内容的标签 标签名{内容} （可与上面所有写法结合）
例：div{你好} <div>你好</div>
有规律内容的标签
标签名{$}*数字 （$可与其他字符结合，内容只在$位置变化）
例：div{$}*3 <div>1</div>
<div>2</div>
<div>3</div>
div{3$}*3 <div>31</div>
<div>32</div>
<div>33</div>
- CSS 大多数简写方式为属性单词的首字母
例：
w width: ;
h height: ;
w500 width:500px;
bgc background-color: #fff;
w500+h200+bgc width:500px;
height:200px ;
background-color: #fff;
HTML
常用标签
父子标签 换行+缩进（Tab）
兄弟标签 换行
字符实体
（空格）：
< ：<
> ：>
& ：& （可用来在网页展示字符实体的写法，如可以在网页显 示< 而不是<）
loremN N个单词的随机文字
<!DOCTYPE html> 文档声明，告诉浏览器是网页版本是H5
<html lang="en"> 定义网页语言
<meta charset="UTF-8"> 网页的解码方式
<meta name="viewport" content="width=device-width, initial-scale=1.0">
移动端
<!-- --> 注释
<html><html> 整个网页
<head></head> 网页头部(给网页看，内含css、title等)
<title></title> 网页标题
<body></body> 网页主体（给用户看）
<hr/> 或<hr> 水平线
<br/>或<br> 换行（可以叠加）
<strong></strong> 加粗（<b></b>）
<em></em> 倾斜（<i></i>）
<ins></ins> 下划线（<u></u>）
<del></del> 删除线（<s></s>）
<h1></h1>~<h6></h6> 标题（独占一行，加粗）
<p></p> 段落（独占一行，段落之间存在间隙）
<img src=” ”> 图像（不换行）（地址也可以是图片链接，从网页复制图片链接）
alt=”” 替换文本（图片不显示时）
title=”” 提示文本（鼠标悬停时，图片不显示时也有）
width 宽（浏览器默认高等比缩放）
height 高（浏览器默认宽等比缩放）
<a href=""></a> 超链接（链接可以是其他文件也可以是链接）（绝对、相对都行）
（默认在当前窗口跳转）
href=”#” 空连接（可跳转到页面顶部）
target="_blank" 新窗口跳转页面
href=”#锚点id” 跳转锚点（#前加其他页面地址可跳转到其他页面的 锚点）
例:<a href="#md" >跳转锚点</a>
<div id="md"></div>
<a name="md"></a>
平滑跳转：给html选择器添加属性 scroll-behavior: smooth;
<audio src=""></audio> 音频（MP3、 Ogg、Wav）
controls 显示音频控制面板
loop 循环播放
autoplay 自动播放（浏览器一般禁用）
<video src=""></video> 视频（MP4、webM、Ogg）
controls 显示音频控制面板
loop 循环播放
muted 静音播放
autoplay 自动播放（静音状态下生效）
<ul></ul> 无序列表（只能包裹li标签）
<li></li> 列表条目（能包裹任意内容）（独占一行）
<ol></ol> 有序列表（只能包裹li标签）
<dl></dl> 定义列表（只能包裹dt标签、dd标签）
<dt></dt> 定义列表标题（能包裹任意内容）（独占一行）
<dd></dd> 定义列表描述/详情（能包裹任意内容）（独占一行）（向后缩进）
<table></table> 表格（默认无边框线）（随格内内容大小变化而变化）
border=” ” 边框宽度
<tr></tr> 行（包裹th、td标签）
<th></th> 表头单元格（加粗、居中）
<td></td> 内容单元格
rowspan="" 跨行合并（保留最上单元格）
colspan=" " 跨列合并（保留最左单元格）
<caption>123</caption> 表格标题（默认居中）
<thead></thead> 表格头部（表格头部内容）（表格第一行）
<tbody></tbody> 表格主体（主要内容区域）
<tfoot></tfoot> 表格底部（汇总信息区域）（如果需要，表格最后一行）
<input type=” ”> 表单（不换行）（有默认宽度）
text 文本框（单行文本）（输入即显示）
password 密码框（显示…）
placeholder=” ” 提示信息（文本框、密码框）
radio 单选框
checkbook 多选框
name=”” 控件分组（单选：同组只能选中一个）
checked 默认选中（单选、多选）
file 上传文件
multiple 文件多选
hidden 隐藏域
value 表单控件的初始值（适用于所有类型）
<select></select> 下拉菜单整体
<option></option> 下拉菜单选项
selected 默认选中
<textarea ></textarea> 文本域（多行文本）（标签中间文本为提示文本）（右下角有拖拽功 能，一般禁用，一般用css设计尺寸）
<label for=” ”> </label> 说明文本（用于某个标签）
可增大点击范围（点击文本也可选中选项）：
- label只包裹内容，不包裹表单控件（for属性值与表单控件 的 id属性值相同）
- label包裹文字和表单控件，不含属性（删for）
<button type="" > </button> 按钮(代码不在同一行，按钮间有间距)
submit 提交（默认）
reset 重置（将控件恢复默认值）（结合 form）
button 普通（默认无功能，结合JavaScript）
<form action=""></form> 表单区域
target="_blank" 新窗口跳转页面
表单区域里各控件均有属性
disabled 禁用
<iframe src="" frameborder="0"></iframe> 框架（在网页嵌入其他文件、网站等）
name 名字（与a、form的target配合使用， 可通过对a等的操作来使iframe展 示相关内容）
frameborder 内边距宽度
<div> </div> 布局标签（大盒子）（独占一行）
<span> </span> 布局标签（小盒子）（不换行）
显示模式
- 块级元素：独占一行
宽度默认是父级的100%
添加宽高属性生效
如：div
- 行内元素：一行可以共存多个，尺寸由内容撑开：加宽高不生效
如：span
- 行内块元素：一行可以共存多个，默认尺寸由内容撑开，加宽高生效
如：img
CSS
CSS引入方法
- 内部样式表：写在head标签里面，title标签下方，<style> </style>里面(选择器{})
例：(一般选择器后+空格)
p {
color：red;
}
- 外部样式表：css代码放在单独的css文件中（.css）
HTML使用link标签引入
例：
<link rel="stylesheet" href="style.css"> （title标签下面）
- 行内样式：配合JavaScript使用
写在标签的style属性值里
例：
<div style="color: red; font-size: 20px;">标签css</div>
优先级：行内>内部=外部（内部外部后写的优先级高）
属性名和属性值成对存在->键值对
浏览器页面右键->检查:调试工具（F12）：
css部分黄色表示出错（会显示对于标签位置）
点击属性，可选择暂时使用该属性（勾选）
点击属性值，可以方向键上下键暂时调整数值
选择器类型
选择器：
- 标签选择器（以标签名作为选择器，如 p,h1,div,a）
- 类选择器（1.定义：.类名 2.使用：标签添加class=”类名”）
（多个类名：class=”类名 类名”）
- id选择器（一般配合JavaScript，很少用于css）
（1.定义： #id名 2.使用：标签加id=”id名”）
（规则：同一个id选择器，在一个页面只能使用一次）
- 通配符选择器（* 页面所有标签样式）
复合选择器：
- 后代选择器：父选择器 子选择器 {}（例：div span {}）（包括所有相关后代）
- 子代选择器：父选择器 > 子选择器{}（例：div > span {} ）（仅子代）
- 并集选择器：选择器1,选择器2,…… {}（一般两个选择器之间换行）
例：div,
p,
span {
}
- 交集选择器：选择器1选择器2 { }（选择器之间连写，不空格）
例：(box为类选择器)p.box{
}
伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式
- 鼠标悬停状态：选择器:hover{} （各种选择器都可以）（鼠标到哪个选择 器范围变化，就在哪个选择器后 加:hover）（本身不变化就结合后/ 子代选择器，如.banner:hover .prev） （结合伪元素选择器.a:hover::after）
- 点击时： 选择器：active{} （用于超链接）
- 访问前： 选择器：link{} （用于超链接）
- 访问后： 选择器：visited{} （用于超链接）
如果要给超链接设置以上四个状态，需要按LVHA顺序书写。
结构伪类选择器：根据元素的结构关系查找元素
E:first-child 查找第一个E元素（E为选择器名）
E:last-child 查找最后一个E元素
E:nth-child(N) 查找第N个E元素（第一个元素N值为1）
E:nth-child(公式) 根据元素结构关系查找多个元素
2n 偶数标签
2n+1/2n-1 奇数标签
5n 找到5的倍数的标签（5可为N）
n+5 找到第5个以后的标签（包括5）（5可为N）
-n-5 找到第5个以前的标签（包括5）（5可为N）
:first-of-type 所有同类型元素中的第一个
:last-of-type 所有同类型元素中的最后一个
:nth-of-type(N) 所有同类型元素中的第N个
E:nth-last-child(N) 查找倒数第N个E元素（倒数第一个元素N值为1）
E:empty 选中的是没有内容的E元素
div>E:nth-child(N)选中的是div子代中E元素，且是所有兄弟元素的第一个，即如果第一个子元素不是E，则没有元素生效该样式
而div>E:nth-of-type(N)选中的是div子代中所有相同兄弟元素的第N个，无论所有兄弟元素的第N个是否是E元素
否定伪类选择器
E:not() 否定伪类（排除满足括号里条件的元素）
例：table tr:not( :first-child): hover {}//除第第一个tr其他的 tr的样式
UI伪类选择器：
:checked 被选中的复选框或单选按钮（选中后存在，取消后消失的样 式）
:disabled 不可用的表单元素（有disabled属性）
目标伪类
:target 选中锚点指向的元素
伪元素选择器：元素中的特殊位置
创建虚拟元素（伪元素），用来摆放装饰性的内容
E::before 在E元素里面最前面添加一个伪元素（E为选择器名）
E::after 在E元素里面最后面添加一个伪元素（可:，一般都::）
必须设置content:” ”属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式（加宽高不生效）
权重和标签选择器相同
before用来避免外边距塌陷问题，after清除浮动影响
E::first-letter E元素的第一个文字
E::first-line E元素的第一行文字
E::selection E元素中被鼠标选择的文字（只有一小部分 CSS 属性可以用 于::selection 选择器）
E::placeholder 修饰输入框占位符文本（如input的placeholder内容）
属性选择器：匹配那些具有特定属性或属性值的元素
a[attr] 表示带有以 attr 命名的属性的元素
例
a[title] {
color: purple; /* 存在 title 属性的 <a> 元素 */
}
[attr=value] 表示带有以 attr 命名的属性，且属性值为 value 的元素。
[attr^=value] 表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
[attr$=value] 表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
上述value的值，如某些情况需要加引号，如值为地址等等
有些标签的属性加引号在选择器里也可以不加（可能是为了好看）
选择器性质
- 继承性：子级默认继承父级的文字控制属性（大小-颜色）（一般文字控制属性写在body） （如果子级标签有自己默认样式，则不继承其有样式的属性，其余继承）
- 层叠性（两个相同的选择器）：
相同的属性会覆盖：后面的的css属性覆盖前面的css属性
不同的属性会叠加：不同的属性都生效
- 优先级（权重）：当一个标签使用了多种选择器时，基于不同种类的选择器的匹配机制
选择器优先级高的样式生效
继承的样式<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
（选中标签的范围越大，优先级越低）
权重叠加：（vscode有提示）
公式（不进位）（并集选择器分开算）：
行内样式，id选择器个数，类选择器个数，标签选择器个数
规则：从左向右比较：同一级个数多的优先级高，如果个数相同，则向后比较
（!important权重最高）（继承权重最低）（先看继承，再看!important）
!important >
行内样式 >
id选择器个数 >
类、伪类、属性选择器个数 >
元素、伪元素选择器个数
定位属性
浮动、flex
- 盒子模型属性（内外边距、边框）
- 宽高背景
- 文字样式
- 圆角、阴影等修饰属性
!important 提权功能（慎用）（属性值后，;前）
例： * { color：red !important ;
}
内容属性
宽高
width： 宽度
height： 高度
min-width/height： 最小宽度/高度
max-width/height： 最大宽度/高度
文字控制属性
font-size: 字体大小（谷歌默认16px）
font-weight: 字体粗细（有几种粗细看字体设计的精细程度）
normal/400 正常（纯数字不带px）
bold/700px 加粗
关键字/数字+px
font-style: 字体样式（是否倾斜）（可用来清除文字的默认的倾斜效果）
normal 正常
italic 倾斜
line-height: 行高（设置多行文本的间距）（行高=文本高度+上下间距
=文字上到下一行文字上距离）
数字+px
数字（当前font-size属性值的倍数）
垂直居中技巧：行高属性值等于盒子高度属性值（单行文字）
font-family:””,”” 字体族（字体，如：楷体）
字体名（可书写多个字体名，用逗号隔开，从左向右执行查找）
（属性最后设置一个字体族名，一般无衬线字体sans-serif）
font: font复合属性（设置网页文字公共样式）（按顺序，空格隔开）
是否倾斜 是否加粗 字号/行高 字体（字号和字体必须书写）
（例:italic 700 30px/2 楷体）
text-indent: 文本缩进
数字+px
数字+em（建议，1em=当前标签的字号大小）
text-align: 文本对齐方式（水平方向）（居中的是文字/图片内容）
left 左对齐（默认）
center 居中对齐
right 右对齐
text-decoration: 文本修饰线（可以设置颜色、虚实线、线条大小）
none 无
underline 下划线
line-through 删除线
overline 上划线
dotte 虚线
wavy 波浪线
color: 文字颜色
颜色英文单词（red、blue）
rgb(r,g,b) 取值0-255（例：rgb(0,255,0)）
rgba(r,g,b,a) a为透明度（0-1）（实现透明色）（常用）
十六进制#RRGGBB 例：#ffcc00（简写#fc0）（常用）
背景属性
background-color： 背景色
transparent 透明
background-image: url() 背景图（bgi）（默认平铺（复制）效果）
background-repeat: 背景图平铺方式（bgr）（可与背景色同时存在）
no-repeat 不平铺
repeat 平铺（默认）
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
background-position: 背景图位置（bgp）
属性值：水平方位位置 垂直方位位置（默认0 0）
关键字：left right
center
top bottom
（关键字取值可以颠倒位置）
坐标：（数字+px，正负都可以）
（关键字和坐标可以混合使用）
（可只写一个关键字，另一个方向默认居中）（数字只写一个值表示水平方向，垂直方向为居中）
background-size: 背景图大小（bgz）
cover 等比例缩放背景图以完全覆盖背景区
（可能部分背景图片看不到）
contain 等比缩放背景图片以完全装入背景区
（可能背景区部分空白）
百分比 根据盒子尺寸计算图片大小
（100%时图宽与盒宽一致，图高按图片 比例缩放）（按宽算比例）
数字+单位（如：px）
background-attachment: 背景图固定（bga）（是否随元素内容滚动）
fixed 不随元素内容滚动
background: 背景复合属性(bg)（空格隔开，不分顺序）
背景色 背景图 背景平铺方式 背景图位置/背景图缩放 背景图固定
盒子属性
盒子属性
display: 转换显示模式
block 块级(转换后无法右对齐)
inline-block 行内块（需要右对齐用行内块）
inline 行内
none 隐藏（不占位）
flex 弹性布局
盒子尺寸=内容尺寸+border尺寸+内边距尺寸
- 手动做减法：width、height剪掉border/padding尺寸
- 内减模式：box-sizing:border-box
padding: 内边距（内容与盒子边缘之间）
padding-方位名词: 单内边距
内边距多值写法：（空格隔开）
一个值：四方位
四个值：上右下左
三个值：上 左右 下
两个值：上下 左右
margin: 外边距（不撑大盒子）
margin-方位名词: 单外边距
auto 自动（盒子有宽度时设左右为auto可版心居中）
外边距多值写法：（空格隔开）
一个值：四方位
四个值：上右下左
三个值：上 左右 下
两个值：上下 左右
margin-top=-1 向上移动
border: 边框线
（边框线粗细 线条样式 颜色）（不区分顺序）
solid 实线（不能省略）
dashed 虚线
dotted 点线
border-方位名词: 单方向边框线（bd+方位首字母，如bdl）
（边框线粗细 线条样式 颜色）（不区分顺序）
（样式必须有）
border-collapse 是否合并边框
separate 默认（不合并）
collapse 合并
overflow : 元素溢出（控制溢出元素的内容的显示方式）
hidden 溢出隐藏（常用）
scroll 溢出滚动（无论是否溢出，
都显示滚动条位置）
auto 溢出滚动（溢出才显示滚动条位置）
1.合并现象：（可用来简写代码）
场景：垂直排列的兄弟元素，上下margin会合并
现象：取两个margin中的较大值生效
2.塌陷问题：
1.场景：父子级的标签，第一个子级标签添加上外边距，会产生塌陷问题
现象：导致父级一起向下移动
解决：1. 取消子级margin，父级设置padding(避免撑大盒子，加内减属性)
2. 父级设置overflow：hidden
3. 父级设置border-top
4.父级设置 ::before {
content: " ";
display: table;
}
2.场景：父子级的标签，父级没有指定高度，最后一个子级标签添加下外边距， 会产生塌陷问题
现象：最后一个子级标签设置的下边距成为父级的下外边距（而本身下外边距 未生效）
解决：1. 取消子级margin，父级设置padding(避免撑大盒子，加内减属性)
2. 父级设置overflow：hidden
3. 父级设置border-bottom
4. 父级设置::after {
content: " ";
display: table;
}
场景：行内元素添加margin和padding，无法改变元素垂直问题（垂直方向无变化）
解决方法：给行内元素添加line-height可以改变垂直问题
修饰属性
border-radius: 圆角（设置元素的外边框为圆角）
数字+px/百分比 （属性值是圆角半径）（最大50%）
圆角多值写法：（空格隔开）
一个值：四个圆角
四个值：左上 右上 右下 左下（从左上开始顺时针）
三个值：左上 右上+右下 左下
两个值：左上+右下 右上+左下
- 正圆形
给正方形盒子设置圆角属性为宽高的一半/50%
- 胶囊形
给长方形盒子设置圆角属性为盒子高度的一半
box-shadow: 阴影
X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
（X轴偏移量、Y轴偏移量必须书写）
（默认外阴影，内阴影需添加inset）
* { margin:0;
padding:0;
box-sizing:border-box
}
list-style: 列表复合属性（符号、符号位置、自定义列表符号等）
none 去掉列表的项目符号（ul、ol等）
浮动与弹性等布局属性
浮动float
float: 浮动（让块元素水平排列）（顶对齐、具备行内块显示 特点）（浮动的盒子会脱离标准流）
left 左对齐
right 右对齐
元素浮动后的特点：
- 脱离标准文档流。
- 不管浮动前是什么元素，浮动后:默认宽与高都是被内容撑开（尽可能小)，而且可以设置宽高。
- 不会独占一行，可以与其他元素共用一行。
- 不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding 。5.不会像行内块一样被当做文本处理(没有行内块的空白问题)。
细节：父级的宽度不够，浮动的盒子会换行
场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级的高度（可能导致页面布局 错乱）（父级高度小也会让子级元素超出父级范围）
解决方法：清除浮动
方法一：额外标签法
在父元素内容的最后添加一个块级元素，设置CSS属性clear:both（清除左右浮动影响）
（一般选择器名为clearfix）
方法二：单伪元素法
.clear::after {
content: "";
display: block;
clear: both;
}
（把该类名放到父级标签的类名后面，用空格隔开）
方法三：双伪元素法（推荐）
.clear::before,
.clear::after {
content: "";
display: table;
}
.clear::after {
clear: both;
}
（before加clear属性不能清除浮动影响）
（解决外边距塌陷，清除浮动影响）
方法四：overflow
父元素添加CSS属性 overflow:hidden
弹性布局flex
推荐 不会脱标
设置方式：给父元素设置display:flex，子元素可以自动挤压或拉伸
（挤压：子级过多，默认挤压子级到同一行/列）
（拉伸，子级没有侧轴方向尺寸属性，会默认自动拉伸至父级大小）
组成部分：
- 弹性容器（父级）
- 弹性盒子（子级）：沿着主轴方向排列
- 主轴：默认在水平方向
- 侧轴/交叉轴
justify-content: 主轴对齐方式
flex-start 默认值，弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
space-between
弹性盒子沿主轴均匀排列，空白间距均匀分布在弹性盒 子之间
（父级剩余的尺寸分配成空白间距）
space-around
弹性盒子沿主轴均匀排列，空白间距均匀分布在弹性盒 子两侧
（视觉效果：盒子之间的空白间距是两端间距的2倍）
space-evenly
弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相 等
align-items: 侧轴对齐方式（所有盒子，给弹性容器设置）
align-self: 侧轴对齐方式（单个盒子，给弹性盒子设置）
stretch
沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴 方向尺寸则默认拉伸）（有尺寸加属性也不拉伸）
center 弹性盒子沿侧轴居中排列
flex-start 弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
flex-direction: 修改主轴方向
row 水平方向，从左向右（默认）
column 垂直方向，从上向下
row-reverse 水平方向，从右向左
column-reverse 垂直方向，从下向上
flex 弹性伸缩比（控制弹性盒子的主轴方向的尺寸）
整数数字 表示占用父级剩余尺寸的分数
默认情况下，主轴方向尺寸靠内容撑开，侧轴默认拉伸
例子
div:nth-child(1){
width: 200px;
}
div:nth-child(2){
flex:1;
}
div:nth-child(3){
flex:2;
}
（主轴为水平方向）此时，第一个盒子宽度为200px,第二个盒子的宽度为父级容器宽度减去200px后值的1/3，第三个为2/3.（1+2=3）
flex-wrap: 弹性盒子换行
wrap 换行
nowrap 不换行（默认）
align-content: 行对齐方式（属性值和主轴对齐一样）（换行时，该属 性值影响侧轴对齐方式）（前三个属性值不保留空白）
flex-start 默认值，弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
space-between
弹性盒子沿主轴均匀排列，空白间距均匀分布在弹性盒 子之间
space-around
弹性盒子沿主轴均匀排列，空白间距均匀分布在弹性盒 子两侧
space-evenly
弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相 等
行对齐属性对单行盒子不生效
定位
定位
作用：灵活改变盒子在网页中的位置
实现：
- 定位模式：position
- 边偏移：（设置盒子的位置）
left
right
top
bottom
例： div {
position:absolute;
left: 200px;
}
相对定位
position: relative
- 改变位置的参照物是自己原来的位置
- 不脱标，占位
- 标签显示模式特点不变
- （同时设置left、right或top、bottom属性，依据left、top属性值改变位置，无论left、top是否在前）
绝对定位
position: absolute
使用场景：子级绝对定位，父级相对定位（子绝父相）（给父子级分别设置属性）
- 脱标，不占位（设置绝对位置属性的子元素）
- 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，则参照浏览器可视区域改位置
- 显示模式特点改变：宽高生效（具备行内块的特点）
- （在子级未设置宽度值时，同时设置合适的left、right属性值，即未超过父级的宽度时，可改变子级宽度；设置宽度值时，同时设置合适的left、right属性值，只依据left属性值改变位置，无论先后顺序）（left等属性值是基于边框内侧而变，不基于外边框，也不考虑内边距）
- （在子级未设置高度值时，同时设置合适的top、bottom属性值，即未超过父级的宽度时，可改变子级宽度；设置宽度值时，同时设置合适的top、bottom属性值，只依据top属性值改变位置，无论先后顺序）
实现步骤：
- 绝对定位
- 水平、垂直边偏移为50%
- 子级向左、上移动自身尺寸的一半
- 左、上的外边距为 -尺寸的一半
- transform: translate(-50%,-50%)
固定定位
position: fixed
场景：元素的位置在网页滚动时不会改变
- 脱标，不占位置（滑动时会盖住经过位置的标准流）
- 参照物：浏览器窗口
- 显示模式特点：具备行内块特点
z-index: 堆叠层级（默认：按照标签书写顺序，后来者居上）
作用：设置定位元素的层级顺序，改变元素的显示顺序
数字 取值为整数，默认为0，取值越大越靠上
css精灵、字体图标
css精灵
实现步骤：
- 创建盒子，盒子尺寸与小图尺寸相同
- 设置盒子背景图为精灵图
- 添加background-position属性，改变背景图位置
- 使用软件（pxcook）测量小图片左上角坐标
- 取负数坐标为background-position属性值（向左上移动图片位置）
字体图标
字体图标：展示的时图标，本质是字体
作用：在网页中添加简单的，颜色单一的小图标
优点：
- 灵活性：灵活地修改样式，例如：尺寸、颜色等
- 轻量级：体积小、渲染快、降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
- 使用方便：先下载再使用
下载字体图标
iconfont图标库：iconfont-阿里巴巴矢量图标库
下载字体：登录 素材库 官方图标库 进入图标库 选图标，加入购物车 购物车，添加至项目，确定 下载至本地
文件：
iconfont（将原来的文件夹名称改为iconfont，原来名称如：font_4226719_r7819qgkbq）
demo_index.html （示例文件，类名从该文件Font class中找）
（具体类名为icon开头的，如icon-adjust）（不加第一行和第二行的.）
iconfont.css （字体图标css样式表，需要link引入）
（字体名默认iconfont，由font-family指出，一般不变）
iconfont.ttf、iconfont.woff、iconfont.woff2 （字体文件，不可删除）
如果要调整大小，一般用iconfont类选择器添加字体大小属性，
注意 选择器的优先级要高于 iconfont类
颜色单一的小图：字体图标；颜色复杂的小图：CSS精灵
追加：可以选择把新加的字体放到原有项目再下载一遍
上传图标
项目特有的图标上传到iconfont图标库，生成字体
格式：.svg
可以一次上传多个
（一般去除颜色并提交）
平面与空间转换
平面转换
transform: 平面转换（2D转换）（为元素添加动态效果）（一般与过渡配合）
层叠性：一个盒子使用两个transform（通常出现在给相同兄弟元素设置新的属性如:nth-child()）时，第一个transform属性值将失效。如第一个设置了平移，第二个设置了旋转，则最终只生效旋转，若需要平移则在第二个再加入平移属性值
translate(X轴移动距离，Y轴移动距离) 平移
（取值正负均可）
像素单位数值
百分比（参照盒子自身尺寸）
（只写一个值，表示沿着X轴移动）
translateX() X轴平移
translateY() Y轴平移
（平移不会影响其他盒子位置）
用translate可以实现定位居中
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
（会影响其他盒子位置）
rotate(旋转角度) 旋转
deg （取值正负均可）
（取值为正，顺时针旋转）
（取值为负，逆时针旋转）
scale(缩放倍数) 缩放（不会影响其 他盒子）
scale(X轴缩放倍数,Y轴缩放倍数)
一般设置一个值，表示X轴、Y轴等比例缩放
取值大于1表示放大，取值小于1表示缩小
skew(倾斜角度) 倾斜
deg（取整数向左倾斜，取负数向右倾斜）
多重转换
transform: translate( ) rotate( )
先平移，后旋转（换位置会改变表现形式）：
- 旋转会改变坐标轴向
- 多重转换，以第一种转换形态的坐标轴为准
transform-origin:水平点位置 垂直原点位置 旋转原点（默认盒子中心）
方位名词（left、top等等）
像素单位数值
百分比
空间转换
transform:
translate3d( X,Y,Z) 平移（默认Z轴移动不可见， 需要给父级加视距属性）
（X,Y,Z属性值缺一不可）
translateX( )
translateY( )
translateZ( )
取值正负均可，Z轴不可取百分比：
像素单位数值
百分比（参照盒子自身尺寸计算结果）
Z轴移动正数，类似于放大，移动负数类似于缩小
Z轴移动的正数距离不能大于视距，否则元素会变为不可见
平移不会影响其他盒子
rotateZ(旋转角度) 绕Z轴旋转（和平 面旋转 表现效果一致）
rotateX(旋转角度) 绕X轴旋转
（加上视距可以看清旋转方向）
rotateY(旋转角度) 绕Y轴旋转
（加上视距可以看清旋转方向）
左手法则：根据旋转方向确定取值正负
左手握住旋转轴，拇指指向正值方向（Y轴正方向向下），其他四个手指弯曲方向为旋转正值方向
rotate3d(x,y,z,旋转角度) 绕自定义旋转轴旋转
x,y,z取值为0-1的数值
scale3d(X,Y,Z) 缩放（Z轴方向的方向针对 立体盒子）
scaleX( )
scaleY( )
scaleZ( )
perspective: 视距（给元素添加透视效果，近大远小，近实远虚）
（一般取值800px-1200px）（添加给父级元素）
呈现立体图形
- 父元素添加transform-style: preserve-3d；
- 子级定位；（所有子级绝对定位left：0、top:0，父级相对定位）
- 调整盒子位置（位移或旋转）（先旋转后位移则要注意坐标轴变化）
渐变
线性渐变（一般用于盒子背景）
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
……,
颜色n 终点位置
)
渐变方向：可选（默认垂直向下）
to 方位名词
角度度数deg（0deg为由下向上，增加度数则顺时针旋转（左下到右上->左到右），如果为负数则方向相反）
终点位置：可选
百分比
径向渐变（给按钮添加高光效果）
background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置,
……,
颜色n 终点位置
)
半径：
半径可以是两条，则为椭圆（两个半径不可互换）
圆心：
像素单位数值/百分比/方位名词
默认水平方向、垂直方向均为中心
单个像素单位数值/百分比为水平方向，垂直方向默认中心
可设置单个方位名词，另一个方向默认中心
半径 at 圆心位置：
可选
一个像素单位数值为半径，其他情况导致属性失效
高光：外围颜色设为transparent
动画
- 定义动画
@keyframes 动画名称 {
from{CSS样式1 }
to{CSS样式2 }
}
@keyframes 动画名称 {
0% {CSS样式1 }
10%{CSS样式2 }
……
100%{CSS样式n }
}
优化：当动画的开始状态样式和盒子默认样式相同，可以省略开始状态的代码
- 实现动画
animation: 动画名称 动画花费时间; （将该属性加到对应元素的CSS样式里）
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
动画名称和动画时长必须赋值
取值不分先后
如果有两个时间值，第一个表示动画时长，第二个表示延迟时间
- 速度曲线
linear 匀速
steps(数字) 分步动画（配合精灵图实现精灵 动画）
- 重复次数
数字
infinite 无限循环
- 动画方向
alternate 往返（需要重复次数>1，且反向 过程也算重复次数）
- 执行完毕状态（无限循环状态下不生效）
backwards 开始状态（默认）（元素本身样 式，非动画内样式）
forwards 结束状态（动画最后的一个样式）
animation-name: 动画名称
animation-duration: 动画时长
animation-delay: 延迟时间
animation-fill-mode: 动画执行完毕时状态
backwards 开始状态（默认）（元素本 身样式，非动画内样式）
forwards 动画最后一帧
animation-timing-function: 速度曲线
数字
linear 匀速
steps(数字) 分步动画（配合精灵图实现 精灵动画）
animation-iteration-count: 重复次数
数字
infinite 无限循环
animation-direction: 动画执行方向
alternate 往返（需要重复次数>1，且 反向过程也算重复次数）
animation-play-state: 暂停动画
paused 暂停（通常配合:hover使用）
running 开始（通常配合:hover使用）
无缝动画原理：复制开头图片到结尾位置（图片累加宽度=区域宽度）
比如外部盒子是三个图片大小那就在内部的结尾在加三个开始的图片
制作步骤：
- 准备显示区域
盒子尺寸与一张精灵小图尺寸相同
- 定义动画
移动背景图（移动距离=精灵图宽度）
- 使用动画
step(N)，N与精灵小图个数相同
多组动画
animation:
动画1,
动画2,
……,
动画n;
其它
其它属性
vertical-align: 垂直对齐方式（给高度大的元素加该属性）（块级元素 不生效）（可以调整表格内容的垂直对齐方式）
baseline 基线对齐（默认）（图片下方会 有小空白）
top 顶对齐（最高内容的顶部）
middle 居中对齐
bottom 底对齐（最高内容的底部）
因为浏览器将行内块、行内标签当作文字处理，默认按基线对齐，所以图片下方有小空白
去除图片下方小空白的其他方法：将图片转为块级
transition: 过渡（复合属性）（可以为一个元素在不同状态之间切 换的时候添加过度属性）
过度的属性 花费的时间（s）
提示：
- 过渡的属性可以是具体的css属性
- 过渡的属性也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
- transition设置给元素本身
例：
img {
vertical-align: text-bottom;
width: 200px;
height: 200px;
transition: all 1s;
}
img:hover {
width: 500px;
height: 500px;
vertical-align: top;
}
元素本身未设置定位，而过渡后的元素设置了定位，则过渡属性不能正常使用
opacity: 透明度（整个元素的透明度，包含背景和内容）
0-1
- 完全透明（元素不可见）
1 不透明
0-1之间小数 半透明
default 默认值，通常是箭头
pointer 小手效果，提示用户可以点击
text 工字形，提示用户可以选择文字
move 十字光标，提示用户可以移动
url(" "),pointer 自定义图标
object-fit: 指定应如何调整 <img> 或 <video> 的大小以适 合其容器
cover 图片比例和父级盒子不同时，避免图片挤 压变形
其它问题与方法
- visibility
show 默认显示
hidden 隐藏（仍然占位）
- display none 隐藏且不占位
布局技巧
- 行内元素、行内块元素，可以被父元素当做文本处理。
即：可以像处理文本对齐一样，去处理:行内、行内块在父元素中的对齐。例如: text-align . line-height . text-indent等。
- 让子元素在父级元素中水平居中:
- 块元素：自身设置:margin : 0 auto ;
- 行内、行内块元素：给父元素加上:text-align:center （自身也可以）
- 让子元素在父级元素中垂直居中
- 块元素：给子元素加上: margin-top，值为:(父元素content-子元素盒子总高) /2。（注意 塌陷问题）
- 行内、行内块元素：（单行时）让父元素的height = line-height，每个子元素都加上: vertical-align:middle;（若想绝对垂直居中，父元素font-size设置为0，子元素如果有文字，再重新设置字体大小）
产生原因：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符
方法：
- 去掉换行和空格
- 给父元素设置font-size:0，再给需要显示文字的元素，单独设置字体大小
现象：父级元素未设置高度时，行内块下方留有空白
产生原因:行内块元素与文本的基线对齐。而文本的基线与义本最底端之间是有一定距离的。
解决方案:
- 给行行内块设置vertical，值不为 baseline即可，设置为 middel、 bottom、 top 均可。
- 若父元素中只有一张图片，设置图片为 display : block（不推荐）
- 给父元素设置font-size: 0，如果该行内块内部还有文本，则需单独设置font-size 。
给字体图标的盒子添加属性：
display: inline-block;
vertical-align: top;
给图片的父级元素添加宽高，给图片的宽高设置为100%，并添加object-fit:cover
项目流程
项目目录
网站根目录是存放网站第一层文件夹，内部包含当前网站的所有素材，包含HTML、CSS、图片、JavaScript等等
study（根目录，和网站项目内容有关）
images文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
uploads文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的 图片
iconfont文件夹：字体图标素材
CSS文件夹：存放CSS文件（link标签引入）（先清除再设置）
base.css：基础公共样式，例如：清除默认样式、设置网页基本样式
common.css：各个网页相同模块的重复样式，例如：头部、底部
index.css：首页CSS样式
index.html：首页HTML文件
favicon.ico：网页图标，出现在浏览器标题栏
网页制作思路
- 布局思路：先整体再局部，从外到内，从上到下，从左到右
- CSS实现思路
- 画盒子，调整盒子范围（宽高背景色）
- 调整盒子位置（flex布局、内外边距）
- 控制图片、文字内容样式
版心：主体如果居中
先定义一个类
.wrapper {
margin: 0 auto;
width: 1200px; （具体宽度值看具体项目）
}
SEO三大标签
SEO：搜索引擎优化，提升网站百度搜索排名
提升SEO的常见方法：
- 竞价排名（广告）
- 将网页制作成HTML后缀
- 标签语义化（在合适的地方使用合适的标签）
- ……
网页头部SEO标签：
- title：网页标题标签
- description：网页描述
<meta name="description" content=" ">
- keywords：网页关键词
<meta name="keywords" content=" ">
Favicon图标
Favicon图标：网页图标，出现在浏览器标题栏，增加网站辨识度
图标：favicon.ico，一般存放到网站的根目录里面
快捷提示：link:favicon
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
右对齐：
display: flex;
justify-content: flex-end;
例子
- header区域
通栏：宽度与浏览器窗口相同的盒子
标签结构：通栏>版心>logo+导航+搜索+用户（看具体项目）
logo
logo功能：单击跳转到首页
搜索引擎优化：提升网站百度搜索排名
实现方法：
标签结构：h1 > a > 网站名称（搜索关键字）
CSS样式：
.logo a {
display: block;
width: 195px;
height: 41px;
background-image: url(../images/logo.png);
font-size: 0; （隐藏文字）
}
导航（nav）
导航功能
单击跳转页面
实现方法：
标签结构：ul>li*3>a （li个数看具体情况）
优势，避免堆砌a标签，网站搜索排名降级
搜索
实现方法：
标签结构：.search > input +a/button
用户
实现方法：
标签结构：.user > a > img +span
- banner区域
具体到小盒子时：字号、行高、margin
让文字垂直居中：
- 单行盒子用等于高的行高
- 多行盒子用padding
因为ul只包含li，所以复合选择器中li前的ul可以省略
结构：通栏banner > 版心 > .left > .right
当flex属性盒子复合出现时，容易出现一些问题
如：两个外层盒子带flex属性，如果这两个盒子的没有设置宽度值，内部的标签想均匀排列，得在两个外层盒子中间加上一层带宽度属性的盒子
或者这两个外层盒子加宽度属性，或者最外层的去掉flex
一层flex可以没有宽度 , 子代能均匀排列；两层flex得有一个有宽度，或者中间出现宽度，不然子代就不能均匀排列了
移动端
系统设置的缩放比会影响移动端模拟器的逻辑分辨率（如125%会使375变成375.2）
适配
- 宽度适配：宽度自适应（高度固定）（PC端）
- 百分比适配
- flex布局
- 等比适配：宽高等比缩放（移动端）
- rem
- vw
less
less
less是一个css预处理器，less文件后缀名是.less,扩充了css语言
浏览器不识别less代码，目前阶段，网页要引入对应的css文件
VS code插件：Easy LESS,保存less文件后自动生成对应的css文件（每次保存less,css自动更新）（有时候less文件有错误，保存不更新css）
less注释
单行注释（不生成css，即less生成的css文件中不会出现单行注释）
语法： //注释内容
快捷键： ctrl+/
块注释（生成css）
语法： /*注释内容*/
快捷键： shift+alt+a（如果与电脑其他快捷键冲突，则在设置换一下改快捷键）
less运算
less运算（如果表达式有多个单位，最终以第一个单位为准）（一般单位写最后）
加、减、乘直接书写计算表达式
除法
- 添加小括号 例：( 375 / 37.5rem)
- 除号前加. 例：375./ 37.5rem （会出现红色波浪线，一般不用）
less嵌套
作用：快速生成后代选择器
.父级选择器{
父级样式
.子级选择器{
子级样式
}
}
例：
less:
.father {
width: 20px;
.son {
color: #000;
}
}
css:
.father {
width: 20px;
}
.father .son {
color: #000;
}
&表示的是当前选择器，代码写到谁的{ }里就表示谁->不会生成后代选择器
应用：配合hover等伪类或nth-child等结构伪类使用
less变量
概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：
定义变量：@变量名:数据;
使用变量：CSS属性:@变量名;
例：
//定义变量
@myColor:pink;
//使用变量
div {
color:@myColor;
}
p {
color:@myColor;
}
less导入
作用：导入less公共样式文件（将多个less文件导入到一个less文件）
语法：@import url(文件路径);
@import '文件路径';
提示：如果是less文件可以省略后缀
例：
@import url(./base.less);
@import './base.less';
@import './base';
less导出（默认在当前文件夹，与less名称相同）
写法：在less文件的第一行添加 //out:存储url （不是注释）
提示：文件夹名称后添加/
例：
//out:./index.css 导出时，改css文件名称
//out:./css/index.css 导出时，导入到css文件夹,并改css文件名称
//out:./css/ 导出时，导入到css文件夹，名称不变
less禁止导出（如base、common等less需要导入到页面less，不需要自己生成css）
写法：在less文件的第一行添加 //out:false
rem、vw适配
rem
rem单位，是相对单位
rem单位是相对于HTML标签的字号计算结果
1rem=1HTML字号大小
目前rem布局方案中，将网页等分为10份，HTML标签的字号为视口宽度的1/10（375->37.5）
媒体查询（可以检测视口宽度，然后编写差异化CSS样式）
@media (媒体特性) {
选择器{
CSS属性
}
}
例：
@media (width:375x){
html {
font-size: 37.5px;
}
}
rem-flexible.js（不需要再手写媒体查询）
flexible.js是一个用来适配移动端的js库
核心原理是根据不同视口宽度给网页中html根节点设置不同的font-size
<body>
<script src="./js/flexible.js"></script>
</body>
（放到<body>尾部）
rem单位尺寸计算
- 确定基准根字号
查看设计稿宽度—确定参考设备宽度（视口宽度）—确定基准根字号（1/10视口宽度）
- rem单位的尺寸
rem单位的尺寸=px单位数值/基准根字号
（保留两三位小数）
vw
相对于视口的尺寸计算结果
vw：viewpor width
1 vw=1/100视口宽度
vh：viewpor heigh
1 vh=1/100 视口高度
vw布局
- 确定设计稿对应的vw尺寸（1/100视口宽度）
查看设计稿宽度 确定参考设备宽度（视口宽度） 确定vw尺寸（1/100视口宽度）
- vw单位的尺寸=px单位数值/（1/100视口宽度）
开发中不能vw和vh混用
vh是1/100视口高度，全面凭视口高度尺寸大，混用可能导致盒子变形
一般用vwnew Date().getTime()+'photo.png'
响应式开发
媒体查询
@media (媒体特性) {
选择器{
CSS属性
}
}
媒体特性：
max-width:最大宽度（小于等于）
min-width:最小宽度（大于等于）
媒体查询-书写顺序：（不能打乱）
min-width （从小到大）
max-width （从大到小）
（后写的媒体样式会层叠前面的，同时符合条件的宽度和高度特性，优先后写的）
媒体查询-完整写法（即使只有一个媒体特性，括号也不能省）
@media 关键词 媒体类型 and (媒体特性)
关键词（逻辑操作符）
and
only
not
媒体类型
screen 屏幕（带屏幕的设备，手机、电脑、平板）
print 打印预览
speech 阅读器（屏幕阅读模式）
all 不区分类型（默认，包含以上三种情形）
媒体特性
width 宽
height 高
max-width 最大宽
max-height 最大高
min-width 最小宽
min-height 最小高
orientation 屏幕方向
portrait 竖屏
landscape 横屏
媒体查询-外部CSS（媒体特性的括号不能省）
<link rel="stylesheet" media="逻辑符 媒体类型 (媒体特性)" href="xxx.css">
（满足规定条件下，引入外部CSS样式）
注意：
- 可以用关键词连接两个媒体特性
- 媒体类型只能写一个，只能写在媒体特性前面，并且用关键词连接
- 某些情况下，关键词可以结合使用，如 and not
- 使用not时
- only 接媒体类型，且只能出现一次
Bootstrap
Bootstrap
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定
HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网: Bootstrap中文网
下载：
Bootstrap v5中文文档 进入中文文档 下载 下载 Bootstrap 生产文件
使用：
- 引用
例：<link rel="stylesheet" href="./bootstrap.css">
带min的是压缩过的文件，不带的是正常的
- 调用类名
container 响应式版心类（需记住）
栅格系统
栅格化是指将整个网页的宽度分成12份，每份盒子占用对应的份数
例：一行排4个盒子，则每个盒子占3份即可（12/4=3）
（如果栅格系统中需要间距，用padding属性）
V5版本：
常见布局类：
col-*-* 列 （例：col-xxl-3,在网页宽度为xxl的范围内时，该元素占3份）
row 行 可以让内容在一行排（ũex布局）
插件（类名提示）
IntelliSense for CSS class names in HTML
全局样式（可以从官方文档查看）
button类
btn 默认样式（用后续类的前提，先调用）
btn-success 成功
btn-warning 警告
……
btn-lg/ btn-sm 按钮尺寸
表格类
table 默认样式（用后续类的前提，先调用）
table-striped 隔行变色
table-success 表格颜色（其中一个）
……
组件
- 引入样式表
- 引入js文件（看是否有动态功能）
- 复制结构，修改内容
字体图标
下载：
导航/Extend：图标库 安装 下载安装包 bootstrap-icons-1.x.x.zip
使用：
- 复制
- 网页引入bootstrap-icons.cs 文件
- 调用css类名（图标对应的类名）
例： <span class="bi-android2"></span>
常见问题
缩放网页导致父子级出现间隙，可选择适当加大子级宽度，并给父级加 overflow: hidden;
当flex属性盒子复合出现时，容易出现一些问题
如：两个外层盒子带flex属性，如果这两个盒子的没有设置宽度值，内部的标签想均匀排列，得在两个外层盒子中间加上一层带宽度属性的盒子
或者这两个外层盒子加宽度属性，或者最外层的去掉flex
一层flex可以没有宽度 , 子代能均匀排列；两层flex得有一个有宽度，或者中间出现宽度，不然子代就不能均匀排列了
扫一扫
1544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
