文章目录
HTML+CSS
W3C查阅文档
http://www.w3school.com.cn/
<!DOCTYPE html>
当前页面采取的是 HTML5 版本来显示网页
Lang语言种类
<html lang=“en”>
告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.
字符集
<meta charset=" UTF-8" />
在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码
必须写. 采取 UTF-8来保存文字. 如果不写就会乱码.
标题标签
标题标签是双标签
默认有加粗的效果，且为块级元素
| 标签名 | 描述 |
|---|---|
| h1 | 一级标题 |
| ~ | ~ |
| h6 | 六级标题 |
文字
| 标签名（双标签） | 描述 |
|---|---|
| strong | 加粗 |
| b | |
| em | 倾斜 |
| i | |
| ins | 下划线 |
| u | |
| del | 删除线 |
| s | |
| p | 分段 |
| br （br是单标签） | 换行 |
图像标签
单标签
<img src="" />
| 属性 | 作用 |
|---|---|
| src | 必写，图片的路径地址 |
| alt | 选择，文字信息（图片崩掉所显示的提示信息） |
| title | 选择，文字信息（鼠标悬停在图片上提示的信息） |
超链接标签
<a href=""></a>
| 属性 | 作用 |
|---|---|
| href | 必写，链接所要跳转的地址 |
| target | _self 为默认方式 |
| _blank 则会在新窗口打开 |
锚点链接
在链接文本的 href 属性中，设置属性值为 #名字 的形式
如：<a href="#two"> </a>
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字
如：<h3 id="two"></h3
去掉下划线
这是css样式
a{text-decoration:none}
特殊字符
其实后面是 ( &；) 格式的,Markdown将其转换为了html格式，我也很无奈，使用时后面别忘了还有（ ；）就行
| 描述 | 字符的代码 | |
|---|---|---|
| 空格符 |   | |
| 小于号 | < | < |
| 大于号 | > | > |
| 和号 | & | & |
| 人民币 | ¥ | ¥ |
| 版权 | © | © |
| 注册商标 | ® | ® |
| 摄氏度 | ° | ° |
| 正负号 | ± | ± |
| 乘号 | × | × |
| 除号 | ÷ | ÷ |
| 平方（上标2） | ² | ² |
| 立方（上标3） | ³ | ³ |
表格
注意：表格是用来展示数据的,不是用来布局页面的
| 标签（双标签） | 描述 |
|---|---|
| table | 最外层 |
| th | 表头，具有居中效果 |
| tr | 行 |
| td | 列 |
| 属性 | 作用 |
|---|---|
| colspan | 横跨(列) |
| rowspan | 纵跨(行) |
| cellpadding | 表格内间距（过时用法） |
| cellspacing | 边框与单元格的距离 |
列表
无序列表
<ul>
<li></li>
</ul>
去掉小圆点：
list-style="none";
有序列表
<ol>
<li></li>
</ol>
自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
表单
<form action="提交地址" method="提交方式"> <!--提交方式为post或get，一般为post-->
</form>
| type类型 | 描述 |
|---|---|
| text | 文本框(默认20个字符) |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 复选框 |
| button | 按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| image | 图像形式的提交按钮 |
| file | 文件上传 |
| hidden | 页面不可见，提交时自动提交 |
| 限制输入格式必须为 Email 类型 | |
| url | 限制输入格式必须为 url 类型 |
| date | 限制输入格式必须为 日期 类型 |
| time | 限制输入格式必须为 时间 类型 |
| month | 限制输入格式必须为 月 类型 |
| week | 限制输入格式必须为 周 类型 |
| number | 限制输入格式必须为 数字 类型 |
| tel | 手机号码 |
| serch | 搜索框 |
| color | 生成一个颜色选择表单 |
| 属性 | 作用 |
|---|---|
| checked | 优先选择（只能用于单选框和复选框） |
| maxlength | 输入字符的最大长度 |
| placeholder | 输入框提示文字（可通过input::placeholder修改提示的字体颜色） |
| required=“required” | 表示该内容不能为空，必填 |
| autofocus=“autofocus” | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete=“off / on” | 基于之前键入过的值进行提示（必须同时加上name属性） |
| multiple=“multiple” | 可以多选文件提交 |
| disabled | 禁用(一般用于配合JS使用，在js中赋值false解除禁用) |
下拉菜单:
<select>
<option></option>
<option selected="selected"></option> 默认选中项
</select>
文本输入框:
<textarea></textarea>
属性:
cols="每行中的字符数"
rows="显示的行数"
绑定控件:
<label for="名称"></label>
点击将自动聚焦或选择对应的表单元素
input框轮廓线
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
input {outline: none; }
防止拖拽文本域
textarea{ resize: none;}
结构标签
H5 新增的
| 标签（双标签） | 描述 |
|---|---|
| header | 头部标签 |
| nav | 导航标签 |
| article | 内容标签 |
| section | 定义文档某个区域 |
| aside | 侧边栏标签 |
| footer | 尾部标签 |
这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在 IE9 中，需要把这些元素转换为块级元素
多媒体标签
视频
（建议为MP4格式，兼容性高）
<video src="文件地址" controls="controls"></video>
| 属性 | 值 | 作用 |
|---|---|---|
| src | 视频地址 | 文件地址 |
| autoplay | autoplay | 视频就绪自动播放（谷歌需要添加muted解决自动播放问题） |
| controls | controls | 显示播放控件 |
| loop | loop | 循环播放 |
| preload | auto（预先加载）none（不应加载） | 是否预加载视频（如果有了autoplay，就忽略该属性） |
| poster | 图片地址 | 加载时等待的画面图片 |
| muted | muted | 静音播放 |
音频
（建议为MP3格式，兼容性高）
<audio src="文件地址" controls="controls"></audio>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 音频就绪后马上播放 |
| controls | controls | 显示播放控件 |
| loop | loop | 循环播放 |
| src | 地址 | 文件地址 |
CSS引入方式
外部样式
<link rel="stylesheet" href="css文件路径">
css选择器
基础选择器
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签,比如p | 不能差异化选择 | 较多 | p{color:red;} |
| 类选择器 | 可以选出1个或多个标签 | 可以根据需求选择 | 非常多 | .nav{} |
| id选择器 | 一次只能选择一个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和JS搭配 | #nav |
| 通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 特殊情况使用 | *{} |
复合选择器
后代选择器
又称为包含选择器，可以选择父元素里面子元素
元素1 元素2 {
样式声明
}
子元素选择器
只能选择作为某元素的最近一级子元素（简单理解就是选亲儿子元素）
元素1>元素2 {
样式声明
}
并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式
元素1,元素2 {
样式声明
}
属性选择器
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器
| 选择符 | 描述 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att=“val”] | 选择具有att属性且属性值等于val的E元素 |
| E[att^=“val”] | 选择具有att属性且属性以val开头的E元素 |
| E[att$=“val”] | 选择具有att属性且值以val结尾的E元素 |
| E[att*=“val”] | 选择具有att属性且值中含有val的E元素 |
结构伪类选择器
| 选择符 | 描述 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素E（可以为公式） n 是从 0 开始计算的 |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type | 指定类型E的第n个（可以为公式） n 是从 0 开始计算的 |
区别：
- nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
伪类
:link{} 访问前
:visited{} 访问后
:hover{} 悬停
:active{} 点击不松手
:focus 伪类选择器用于选取获得焦点的表单元素。
例：
input:focus {
background-color:yellow;
}
伪元素选择器
before 和 after 必须有 content 属性
| 选择符 | 描述 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法： element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
CSS字体属性
字体
font-family:"";
| 常用字体 | |
|---|---|
| 宋体 | SimSun |
| 仿宋 | FangSong |
| 黑体 | SimHei |
| 微软雅黑 | MicrosoftYaHei-bold,MicrosoftYaHei |
| 楷体 | KaiTi |
| 细明体 | MingLiU |
字体大小
font-size: 16px;
谷歌浏览器默认的文字大小为16px
字体粗细
font-weight:bold;
| 属性值 | 描述 |
|---|---|
| normal | 默认值(不加粗的) |
| bold | 定义粗体(加粗) |
| 100~900 | 400等同于normal,700等同于bold（注意这个数字后面不跟单位） |
字体倾斜
font-style:normal;
| 属性值 | 作用 |
|---|---|
| normal | 默认值 |
| italic | 倾斜 |
CSS文本属性
文本颜色
color:red;
| 表示样式 | 属性值 |
|---|---|
| 预定义的颜色值 | red,green,blue |
| 十六进制 | #FF0000，#FF6600 |
| RGB代码 | rgb(255,0,0) 或 rgb(100%,0%,0%) |
对齐文本
text-align:center;
| 属性值 | 作用 |
|---|---|
| left | 左对齐(默认值) |
| right | 右对齐 |
| center | 居中对齐 |
装饰文本
text-decoration:underline;
| 属性值 | 描述 |
|---|---|
| none | 默认，没有装饰线 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
文本缩进
text-indent: 10px;
text-indent: 2em;
行高
line-height:10px;
行高等于边框高度实现文字上下居中
CSS背景
综合写法
background: url('图片路径') ;
背景颜色
background-color:颜色值;
一般情况下元素背景颜色默认值是 transparent（透明）
颜色半透明
background: rgba(0, 0, 0, 0.3);
最后一个参数是 alpha 透明度，取值范围在 0~1之间
我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
背景图片
background-image : none 或 url ();
注意：背景图片后面的地址,千万不要忘记加 URL,同时里面的路径不要加引号。
| 参数值 | 作用 |
|---|---|
| none | 无背景图（默认） |
| url | 使用绝对或相对地址指定背景图像 |
背景图片位置
background-position: x y;
x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位
| 参数值 | 说明 |
|---|---|
| length | 百分数 | 由浮点数字和单位表示符组成的长度值 |
| position | top | center | bottom | left | center | right |
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
背景图片大小
| 值 | 描述 |
|---|---|
| length | 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为auto(自动) |
| percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" |
| cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
| contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
背景平铺
background-repeat:repeat | no-repeat | repeat-x | repeat-y;
| 参数值 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向上平铺 |
背景图像固定(背景附着)
background-attachment : scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像随对象内容滚动 |
| fixed | 背景图像固定 |
边框
border: 1px solid #666;
| 属性 | 含义 |
|---|---|
| solid | 实线 |
| dotted | 点线 |
| dashed | 虚线 |
| double | 双线 |
边框图片
把四个角切出去(九宫格)，中间部分可以铺排、拉伸或者环绕
按照 上右下左 顺序切割
| 属性 | 描述 |
|---|---|
| border-image-source | 用在边框的图片的路径 |
| border-image-slice | 图片边框向内偏移 |
| border-image-width | 图片边框的宽度(需要加单位)(默认是15px) 不是边框的宽度，是边框图片的宽度 |
| border-image-repeat | 图片边框是否应平铺(repeat)、铺满(round)、或拉伸(stretch) 默认拉伸 |
border-image-source: url();
border-image-slice: 30 30 30 30;
border-image-width: 30px;
border-image-repeat: ;
圆角边框
border-radius:10px
从左上角开始顺时针对应
border-radius: 50px 0px 20px 100px;
第一组值表示水平半径，第二组值表示垂直半径
border-radius:60px/50px;
四个属性值采用如下方法：
border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;
定位
position:static;
| 属性 | 作用 |
|---|---|
| static | 默认 |
| relative | 相对定位（不丢失原位） |
| absolute | 绝对定位（丢失自己原本位置，以父系为定位） |
| fixed | 固定定位（跟随） |
| sticky | 粘性定位（当间距达到设置的值时变为固定定位） |
定位叠放顺序
选择器{ z-index:1;}
/*
只有定位的盒子才可以有该属性
*/
元素的显示与隐藏
-
display 属性
display: none ；隐藏对象
display：block ；除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置。
-
visibility 可见性
元素可视 visibility：visible ; 元素隐藏 visibility： hidden ; visibility 隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置， 就用 visibility：hidden
如果隐藏元素不想要原来位置， 就用 display：none
-
overflow 溢出（一般用于文字的显示）
overdlow: visible ;属性 作用 visible 默认，不剪切内容也不添加滚动条 hidden 超出部分不显示 scroll 不管是否超出都显示滚动条 auto 如果超出就显示滚动条,相反则否
阴影
盒子阴影
box-hadow:h-shadow v-shadow blur spread color insert;
| 属性 | 作用 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影(outset)改为内部阴影 |
文字阴影
text-shadow:h-shadow v-shadow blur color;
| 属性 | 作用 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊的距离 |
| color | 可选，阴影的颜色 |
浮动
选择器 { float: 属性值; }
| 属性 | 作用 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
消除浮动
清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响 下面的标准流了
/*:after 伪元素法*/
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
鼠标样式
cursor: pointer;
| 属性 | 作用 |
|---|---|
| default | 小白光标 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
对齐方式
用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
vertical-align : baseline | top | middle | bottom
| 属性 | 作用 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上 | 基线 |
| top | 把元素的顶端与行种最高元素的顶端对齐 | 顶线 |
| middle | 把此元素防止在父元素的中部 | 中线 |
| bottom | 把元素的顶端与行种最低的元素的顶端对齐 | 底线 |
图片底部默认空白缝隙
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
- 给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
- 把图片转换为块级元素 display: block;
溢出隐藏
overflow
| 属性 | |
|---|---|
| hidden | 溢出隐藏 |
| scroll | 滚动条 |
| auto | 自适应，只有上下滚动条 |
文字溢出
单行
单行文本溢出显示省略号–必须满足三个条件
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
多行
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内 核）
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
过渡
transition：width 1s linear 0s;
什么属性过渡 动画时长 变化素的曲线 延迟时间
一般来说常写
transition:all 动画时长;
平移
transform: translate(水平移动距离,垂直移动距离);
1.translate()如果只给出一个值, 表示x轴方向移动距离
2.单独设置某个方向的移动距离：translateX() & translateY()
3d效果
transform-style: preserve-3d;
transform: translate3d(100px 200px 300px);
x轴 y轴 z轴
或
transform: translateX(100px) translateY(200px) translateZ(300px);
因为电脑屏幕是一个平面，无法观察到z轴变化，可以给父级添加透视
perspective: 透视距离;
值在800px ~ 1200px之间为最佳
旋转
transform: rotate(360deg);
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转
转换旋转原点（ 默认圆点是盒子中心点）
transform-origin: 原点水平位置 原点垂直位置;
1.方位名词（left、top、right、bottom、center）
2. 像素单位数值
3. 百分比（参照盒子自身尺寸计算）
（平移+旋转）复合写法
transform: translate(800px) rotate(100deg);
注意:旋转会改变平移的方向,所以必须写在后面
空间旋转
围绕X轴旋转
transform: rotateX(90deg);
围绕Y轴旋转
transform: rotateY(90deg);
围绕Z轴旋转
transform: rotateZ(90deg);
缩放
transform: scale(x轴缩放倍数, y轴缩放倍数);
注意：一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
渐变
渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
background:linear-gradient(
颜色1,
颜色2
);
或
background-image:linear-gradient(
颜色1,
颜色2
);
动画
定义动画
只有两种画面的话适合
@keyframes 动画名称{
from{}
to{}
}
或
@keyframes 动画名称{
0%{}
10%{}
15%{}
100%{}
}
使用动画
animation:动画名称 动画花费时长; 必写
复合写法
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态;
注意：1.动画名称和动画时长必须赋值
2.取值不分先后顺序
3.如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
动画属性
| 属性 | 作用 | 取值 |
|---|---|---|
| animation-name | 动画名称 | |
| animatio-duration | 动画时长 | |
| animation-delay | 延迟时间 | |
| animation-fill-mode | 动画执行完毕时状态 | forwards 结束状态保持不动 | backwards 执行完毕返回初始状态 |
| animation-timing-function | 速度曲线 | linear 匀速 | ease-in 加速 | ease-out 减速 | ease-in-out 先加速再减速 |
| animation-iteration-count | 重复次数 | 可写具体次数 | infinite 无限循环 |
| animation-direction | 动画执行方向 | reverse 结束则反播回去 | alternate 奇正偶反 | alternate-reverse 奇反偶正 |
| animation-play-state | 暂停动画 | paused 暂停(通常配合hover使用) |
详细
动画执行完毕时状态，列:
animation-fill-mode:forwards; 结束状态保持不动
backwards 执行完毕返回初始状态
速度曲线，列:
animation-timing-function:linear; 匀速运动
ease-in 加速运动(先从低速，慢慢速度变大)
ease-out 减速运动(先从加速，慢慢速度变小)
ease-in-out 先加速，再减速
重复次数，列：
animation-iteration-count:infinite; 无限循环
x 循环播放x次
动画执行方向，列：
animation-direction:reverse; 播放结束后，再反方向播放回去
alternate 如果播放的次数是奇数次就正向播放，偶数次则反向播放
alternate-reverse 如果播放的次数是奇数次就反向播放，偶数次则正向播放
暂停，列:
animation-play-state:paused; 暂停
注意:它不能写在 复合属性里面 ，一般搭配 hover 使用
逐帧动画，
animation-timing-function: steps(N)； 将动画过程等分成N份
布局限制
最大宽度：
max-width: ；
max 从大到小书写
min 从小到大书写
超出：
//宽度超过750px则固定为75px
@media (min-width:750px){
html{
font-size: 75px!important;
}
}
flex布局
display:flex;
修改主轴的方向
(主轴的默认方向为水平方向)
flex-direction: ;
| 属性 | 作用 |
|---|---|
| row | 水平方向，从左到右排列（默认值） |
| column | 垂直方向，从上到下排列 |
| row-reverse | 主轴是水平方向，从右向左排列 |
| column-reverse | 主轴是垂直方向，从下到上排列 |
修改元素在主轴方向的对齐方式
justify-content: ;
| 属性 | 作用 |
|---|---|
| flex-start | 靠左对齐 |
| flex-end | 靠右对齐 |
| center | 靠中间对齐 |
| space-between | 左右两边各一个，剩余盒子均分剩余空间 |
| space-around | 所有盒子均分剩余空间，中间的距离是一样的，两边的距离是他们的一半 |
| space-evenly | 盒子之间的距离、包括两边的距离都是一样的 |
修改元素在侧轴的对齐方式
单行
align-items: ;
| 属性 | 作用 |
|---|---|
| flex-start | 起始位置（默认） |
| flex-end | 终点位置 |
| center | 盒子中间 |
| stretch | 拉伸盒子的高度与父盒子一样高（子盒子没有设置高度时） |
多行
注意：需要先进行换行操作
align-content: ;
| 属性 | 作用 |
|---|---|
| flex-start | 都会靠上边显示 |
| flex-end | 都会靠下边显示 |
| center | 会居中显示 |
| space-around | 上下间距时中间间距的二分之一 |
| space-between | 上下各一个，中间均分 |
| stretch | 拉伸，没有给高度的时候拉伸 |
换行
flex-wrap: ;
| 属性 | 作用 |
|---|---|
| nowrap | 不换行（默认） |
| wrap | 换行 |
改变元素的排列方向
flex-direction: ;
| 属性值 | 作用 |
|---|---|
| row | 行，水平(默认值) |
| column | 列，垂直 |
| row-reverse | 行，从右向左 |
| column-reverse | 列，从下向上 |
less的使用方法
可以将产生的css存到指定的文件中
// out:
例:
// out:../css/
可以阻止产生css
// out:false
导入 阻止产生 的less文件
@import '';
例:
@import './base';
@import './normalize';
5973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
