CSS
CSS基础
编写位置
内联/行内样式
<p style="color:red; font-size:30px;">少小离家老大回</p>内部样式表
<head>
<style>
p{
color: green;
font-size: 50px;
}
</style>
</head>外部样式表
将CSS编写到外部css文件中，通过link标签引入。
<head>
<link rel="stylesheet" href="路径">
</head>css基本语法
注释：
/* */选择器：通过选择器选中指定元素，如p，h1
声明块：通过声明块来指定要为元素设置的样式，名值对结构，以
:连接，以;结尾
单位
- 像素：
100px - 百分比：相对于父元素的百分比：
50% - em：相对于元素的字体大小来计算的，1em=1font-size（默认16px）
- rem：相对于根元素
<html>的字体大小来计算 - vw、vh：视口宽高的的1%，100vh即全屏
颜色
直接使用颜色名：
red、orange、yellow......RGB值（red，green，blue调配）：每一种颜色范围在0255（0%100%）之间，语法：
RGB/rgb(红色,绿色,蓝色)RGBA：在RGB的基础上增加了一个A表示不透明度，语法：
rgba(红色,绿色,蓝色,不透明度)，不透明度是0~1之间的小数，0：透明，1，不透明十六进制RGB值：语法：
#红色绿色蓝色，颜色通过00~ff表示，如果颜色两位两位重复可以简写（#ff0000简写为#f00）HSL值和HSLA值：
hsl(H,S,L)、hsla(H,S,L,a)- H：色相（0~360）
- S：饱和度（0%~100%）
- L：亮度（0%~100%）
选择器
元素选择器
根据标签名来选中指定元素。
p {}
h1 {}
div {}id选择器
根据元素id属性选中一个元素。
#box {}
#red {}类选择器
根据元素的class属性值选中一组元素。
<p class="blue">落霞与孤鹜齐飞</p>
<p class="blue">秋水共长天一色</p>
<!-- class值可以有多个，以空格隔开 -->
<p class="blue abc"></p>.blue {}通配选择器
选择页面中的所有元素。
* {}交集选择器
选中同时符合多个条件的元素。
div.red {}
.a.b.c {}并集选择器（选择器分组）
同时选择多个选择器对应的元素。
h1, span, .p1, div.red {}关系选择器
子元素选择器
选中指定父元素的指定子元素。
div.red > span > p {}后代元素选择器
选中指定元素内的指定后代元素。
div span {}兄弟元素选择器
选择下一个兄弟。
p + span {} /* 选择p紧接的span */选择下面所有的兄弟。
p ~ span {}属性选择器
/* 标签名[属性名] 选择含有指定属性的*/
p[title] {}
/* 标签名[属性名=属性值] 选择含有指定属性和属性值的*/
p[title=abc]
/* 标签名[属性名^=属性值] 选择属性值以指定值开头的 */
p[title^=abc]
/* 标签名[属性名$=属性值] 选择属性值以指定值结尾的 */
p[title$=abc]
/* 标签名[属性名*=属性值] 选择属性值中含有某值的 */
p[title*=abc]
/* 若标签名省略就是指全部元素（即*） */伪选择器
伪类选择器
伪类：不存在的类，特殊的类。伪类用来描述一个元素的特殊状态。如：第一个子元素，被点击的子元素，鼠标移入的子元素……伪类一般情况下用:开头。
/* 以下这三个伪类都是根据所有的子元素进行排序 */
:first-child /* 第一个子元素 */
:last-child /* 最后一个子元素 */
:nth-child() /* 选中第n个元素,()中填参数
特殊值：
n 所有的（从0到正无穷）
2n或even 偶数位的元素
2n+1或odd 奇数位的元素 */
ul > li:nth-child(even) {}
/* 功能类似，不同点是在同类型元素中进行排序 */
:first-of-type
:last-of-type
:nth-of-type()
:not() /* 除了……， 把不符合条件的去除 */
ul > li:not(:nth-of-type(3)) {}超链接的伪类：
a:link{} /* 表示没访问过的链接（正常的链接） */
a:visited{} /* 表示访问过的链接（由于隐私原因，所有visited这个伪类只能修改链接的颜色） */其他伪类：
:hover{} /* 鼠标移入 */
:active{} /* 鼠标点击 */
a:active {color: red}伪元素选择器
伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置），伪元素使用::开头。
::first-letter /* 表示第一个字母 */
p::first-letter{
background-color: yellow;
}
::first-line /* 表示第一行 */
::selection /* 表示选中的内容 */
::before /* 元素的开始 */
::after /* 元素的最后 */
/* 必须结合content属性来使用 */
div::before{
content:'abc';
}样式的继承
为一个元素设置样式同时也会应用到它的后代元素上。并不是所有的样式都会被继承，如：背景相关的，布局相关的样式。
样式的冲突
通过不同的选择器选中相同的元素并且为相同的样式设置不同的值。优先级（权重）如下：
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式（没有优先级）- 比较时，需要将所有选择器的优先级进行相加计算（分组选择器单独计算）
- 如果优先级相同，则优先使用靠下的样式
- 可以在某一个样式后面添加
!important，则此时该样式会获取到最高的优先级（超过内联样式）
布局
文档流
文档流（normal flow）：网页最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。元素主要有两个状态：在文档流中和不在文档流中（脱离文档流）。
元素在文档流中的特点： - 块元素 - 块元素会在页面中独占一行(自上向下垂直排列) - 默认宽度是父元素的全部（会把父元素撑满） - 默认高度是被内容撑开（子元素）
- 行内元素
- 行内元素不会独占页面的一行，只占自身的大小
- 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列（书写习惯一致）
- 行内元素的默认宽度和高度都是被内容撑开
盒子模型
盒子模型（box model）。每一个盒子都由以下几个部分组成：
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
内容区
元素中的所有的子元素和文本内容都在内容区中排列。
width设置内容区的宽度，默认值是autoheight设置内容区的高度
边框
边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部，边框的大小会影响到整个盒子的大小。
要设置边框，需要至少设置三个样式：
边框宽度
border-width默认一般都是3个像素 四个值：上 右 下 左 三个值：上 左右 下 两个值：上下 左右 一个值：上下左右 单独指定某一个边的宽度（颜色，样式都有类似属性） border-xxx-width（xxx是top right bottom left）边框颜色
border-color用来指定边框的颜色，同样可以分别指定四个边的边框，规则和border-width一样 border-color也可以省略不写，如果省略了则自动使用color的颜色值（color是前景色，background-color是背景色）边框样式
border-style默认值是none，表示没有边框 solid 实线 dotted 点状虚线 dashed 虚线 double 双线
border
简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求（最常用）
border: solid 10px orange;
border-xxx
border-top
border-right
border-bottom
border-left内边距
内容区和边框之间的距离。内边距的设置会影响到盒子的大小。背景颜色会延伸到内边距上。
一个盒子的可见框的大小，由内容区、内边距、边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。
padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding 内边距的简写属性，可以同时指定四个方向的内边距
规则和border-width一样外边距
外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置。
margin-top 上外边距，设置一个正值，元素会向下移动
margin-right 默认情况下设置margin-right不会产生任何效果
margin-bottom 下外边距，设置一个正值，其下边的元素会向下移动
margin-left 左外边距，设置一个正值，元素会向右移动
也可以设置负值，如果是负值则元素会向相反的方向移动
margin 简写属性，可以同时设置四个方向的外边距，用法和padding一样
margin-top: 100px;
margin-left: -100px;
margin-bottom: -100px;
margin: 100px;水平布局
元素在其父元素中水平方向的位置由以下几个属性共同决定：
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right一个元素在其父元素中，水平布局必须要满足以下的等式：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
= 其父元素内容区的宽度
以上等式必须满足，如果相加结果使等式不成立（过度约束），则等式会自动调整：
- 如果这七个值中没有为
auto的情况，则浏览器会自动调整margin-right以使等式满足
这七个值中有三个值可以设置为auto：
width、margin-left、maring-right
如果某个值为auto，则会自动调整为auto的那个值以使等式成立
如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
如果将三个值都设置为auto，则外边距都是0，宽度最大
如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
所以我们经常利用这个特点来使一个元素在其父元素中水平居中： width:xxxpx; margin:0 auto;
垂直布局
默认情况下父元素的高度被内容撑开。子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。使用overflow
属性来设置父元素如何处理溢出的子元素：
overflow 可选值：
visible 默认值，子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出内容将会被裁剪不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条
另外还有：
overflow-x
overfloy-y
单独处理横向纵向垂直外边距的重叠
上面的margin-bottom和下面的margin-top重合。
兄弟元素（有利）：相邻外边距都是正的，取两者之间的最大值；一正一负，取两者的和；都是负，取两者中绝对值大的
父子元素（不利）：相邻上外边距子元素会传递给父元素
所谓相邻外边距是指外边距直接相接，如果之间隔了一个border，则不存在重叠的情况
行内元素的盒子模型
行内元素不支持设置宽度和高度。可以设置padding、border、margin，但垂直方向不会影响布局（不会改变上下元素的位置）。
display
设置元素的显示类型。可选值：
inline 行内元素
block 块元素
inline-block 行内块元素：既可以设置宽高又不会独占一行
table 表格
none 不显示，不存在于页面visibility
设置显示状态。可选值：
visible 默认值，正常显示
hidden 隐藏，但依然占据页面位置浏览器默认样式
通常情况浏览器会为元素设置一些默认样式，这些默认样式会影响页面布局，通常情况必须要去除浏览器的默认样式。
* {
margin: 0;
padding: 0;
}<link rel="stylesheet" href="reset.css"> 去除浏览器默认样式
<link rel="stylesheet" href="normalize.css"> 对默认样式进行统一盒子的尺寸
box-sizing 盒子尺寸的计算方式。可选值：
content-box weight和heigth指的是内容区的大小（默认）
border-box weight和heigth指的是内容区和边框的大小轮廓、阴影、圆角
outline 设置轮廓，和border用法一样，但不会影响可见框的大小
.box1:hover {
outline: 10px red solid;
}box-shadow 设置阴影效果，不会影响可见框大小
第一个值：水平偏移，正表示右移
第二个值：垂直偏移，正表示下移
第三个值：模糊半径
第四个值：阴影颜色
box-shadow: 10px 10px 50px rgba(0, 0, 0, .3);border-radius 设置圆角（还有border-top-left-radius等）
border-top-left-radius: 50px; /* 正圆 */
border-top-left-radius: 50px 100px; /* 椭圆（水平半径 垂直半径） */
border-radius可以分别指定四个角的圆角
四个值：左上 右上 右下 左下
三个值：左上 右上左下 右下
两个值：左上右下 右下左上
border-radius: 20px / 40px /* 将四个角设置为椭圆 */
border-radius: 50%; /* 圆 */浮动
通过浮动可以使一个元素向其父元素的左侧或右侧移动。
float 可选值：
none 默认值，不浮动
left 向左浮动
right 向右浮动特点
浮动特点
- 元素会从文档流脱离，水平布局的等式不需要成立
- 浮动元素不会从父元素中移出
- 如果前面的元素也浮动了，则紧跟在后面
- 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
- 浮动元素的高度不会超过上边的兄弟元素
- 浮动元素不会盖住文字（文字环绕）
脱离文档流特点
- 块元素
- 不再独占一行
- 宽高默认被内容撑开
- 行内元素
- 变成块元素
脱离文档流以后就不再区分块和行内元素了。
clear
清除浮动元素对当前元素所产生的影响（原理就是浏览器自动加外边距），可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中影响最大的那侧高度塌陷
父元素的高度默认被子元素撑开，当子元素浮动后，无法撑起父元素的高度。
BFC
BFC（block formatting context）是一个CSS中的隐含属性，可以为一个元素开启BFC，使其变成一个独立的布局区域。
开启BFC的特点：
- 不会被浮动元素覆盖
- 子元素和父元素的外边距不会重叠
- 可以包含浮动的子元素
开启方法：
设置元素浮动（不推荐）
设置为行内块元素（不推荐）
将
overflow设置为一个非visible值（如：overflow: hidden）
完美解决
<div class="box1">
<div class="box2"></div>
</div>.box1 {
border: 10px solid red;
}
.box2 {
height: 100px;
width: 100px;
background-color: #bfa;
float: left;
}
.box1::after {
content: '';
display: block;
clear: both;
}clearfix
为元素添加该类，可以解决高度塌陷（在后面添加一个元素）和外边距重叠（在前面添加一个元素）的问题。
.clearfix::before, .clearfix::after {
content: '';
display: table;
clear: both;
}定位
将元素摆放到页面的任意位置。通过position属性来设置定位，可选值：
static 默认，没有开启定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘滞定位偏移量
元素开启定位后，可以通过偏移量来设置位置。
top 定位元素和定位位置上边的距离
bottom 下边
left 左边
right 右边通常情况，top和bottom二选一，left和right二选一。
相对定位
position: relative;- 如果不设置偏移量元素的位置不会发生变化
- 定位位置就是元素初始位置
- 相对定位会提升元素的层级
绝对定位
position: absolute;- 如果不设置偏移量元素的位置不会发生变化
- 元素从文档流中脱离
- 元素性质改变，行内变成块，块的高度被内容撑开
- 提升元素层级
- 绝对定位是相对于其包含块进行定位的
包含块（containing block）
- 正常情况下，包含块是离当前元素最近的祖先块元素
- 绝对定位的包含块是离他最近的开启了定位的祖先元素（如果祖先元素都没有开启，则相对于根元素html进行定位）
固定定位
position: fixed;特殊的绝对定位。唯一的不同是固定定位参照于浏览器的视口进行定位，元素不会随网页的滚动条滚动。
粘滞定位
position: sticky;和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定。
绝对定位元素的位置
水平方向
开启绝对定位后，水平方向的布局等式就需要添加left和right两个值，默认这两个值为auto。
发生过度约束时：如果没有auto则自动调整right的值使等式满足；有auto则调整auto的值。
垂直方向
垂直方向布局的等式要满足：
top + 7个值 + bottom = 包含块的高度元素的层级
通过z-index属性来指定元素的层级，参数为一个整数，值越大，层级越高。如果层级一样，优先显示靠下的元素。
祖先元素的层级再高也不会盖住后代元素。
文字
基本属性
color 字体颜色font-size 字体大小（字体最小12px）font-weight 字体粗细
normal 默认值，不加粗
bold 加粗
100-900 九个级别（没什么用）font-style 字体样式
normal 正常
italic 斜体text-decoration 文本修饰
none 无
underline 下划线
line-through 删除线
overline 上划线
/* 高版本浏览器下划线也可以有样式 */
text-decoration: underline red dotted;white-space 如何处理空白
normal 正常
nowrap 不换行（超出的加滚动条）
pre 保留原格式（代码中的空白字符不作处理）
/* 多余的文字显示省略号 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;字体族
可以指定多个字体，优先使用前面的，如果没有则用下一个。
font-family 可选类别（浏览器会自动使用该类别下的字体）：
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
font-family: 'Courier New', Courier, monospace;使用自己的字体
将服务器中的字体提供给用户。
@font-face {
font-family: 'myfont';
src: url('./font/ZCOOLXiaoWei-Regular.ttf');
}
.box {
font-family: 'myfont';
}图标字体
fontawesome
Font
Awesome下载fontawesome-free-6.3.0-web，解压，将css和webfonts目录移到项目文件夹，将all.css引入到网页中。
图标库：Find Icons with the Perfect Look & Feel | Font Awesome
通过类名来使用图标字体，
fas或fab开头<i class="fas fa-bell"></i> <i class="fab fa-accessible-icon"></i>通过伪元素
li::before { content: '\f1b0'; /* font-family: 'Font Awesome 5 Brands'; */ font-family: 'Font Awesome 5 Free'; font-weight: 900; color: blue; margin-right: 10px; }通过实体
<!-- &#x图标的编码; --> <span class="fas"></span>
iconfont
行高
文字占有的实际高度。
line-height: 10px;
line-heigth: 1.2; /* 文字高度的倍数 */字体框：字体存在的格子，font-size就是字体框的高度。
行高会在字体框的上下平均分配（空白+字体框高度+空白=行高）。所以将行高和高度设置成一样可以居中。
简写属性
font: [bold] [italic] 字体大小[/行高] 字体族
font: 50px 'Courier New', Courier, monospace水平垂直对齐
text-align 文本的水平对齐
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐vertical-align 垂直对齐（文字大小不同时）
默认图片下面会有空白，因为图片也有基线，只需要修改该属性即可
baseline 默认，基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐背景
基本属性
background-color 背景颜色background-image 背景图片
可以和颜色同时设置。如果图片小于元素将会平铺，大于则显示不完全。
background-image: url("./img/1.png");background-repeat 背景图片重复方式
repeat 默认，沿x和y方向重复
repeat-x 沿x重复
repeat-y 沿y重复
no-repeat 不重复background-position 背景图片位置
1.通过top、left、right、bottom、center来指定9种位置，使用时要指定两个值，如果只写一个另一个默认为center。
2.通过偏移量指定：水平偏移 垂直偏移
background-position: top right;
background-position: 100px -50px;background-clip 背景范围
border-box 默认，背景包括边框
padding-box 只包括内容区和内边距
content-box 只包括内容区background-origin 背景图片的偏移量计算原点
padding-box 默认，从内边距开始计算
border-box 从边框开始计算
content-box 从内容区开始计算background-size 图片大小
宽度 高度 如果只写一个，第二个默认是auto
cover 比例不变，将元素铺满
contain 比例不变，完整显示图片
background-size: 100px 200px;background-attachment 背景图片是否跟随元素移动（有滚动条时）
scroll 默认，会跟随移动
fixed 固定简写属性
background- 没有顺序要求，也没有哪个属性是必须写的。
background-size必须写在background-position后边，并且用/隔开。background-origin在background-clip前边
background: #bfa url("1.jpg") center center/contain border-box content-box no-repeat;雪碧图
如果分别为一个图片的鼠标移入和点击设置图片，则第一次移入或点击时才会加载图片资源，会闪一下。
解决方法：将多个图片合并为一个图片。每次使用时修改图片偏移。
a:link {
background-image: url(xxx);
}
a:hover {
background-position: -50px 0;
}
a:active {
background-position: -1px 0;
}渐变
线性渐变
background-image: linear-gradient([渐变方向], 颜色，颜色, [颜色...]);
渐变方向：
to left/right/bottom/top 或 两个的组合
xxxdeg 度数，如45deg、0deg
xxxturn 圈，如.25turn
可以同时指定多个颜色，默认平均分布，可以手动指定：
在颜色后加上位置，如red 50px, yellow 100px
/* 重复线性渐变 */
background-image: repeating-linear-gradient(red, yellow 200px);径向渐变
background-image: radial-gradient([大小 [at 位置]], 中心颜色, 颜色...);
大小，默认是根据元素形状来计算的。手动指定：
circle 圆形
ellipse 椭圆
100px 100px
closest-side、closest-corner、farthest-side、farthest-corner
位置：
top、center等
100px 100px
background-image: radial-gradient(closest-side at 300px 300px, red, yellow);表格
table {
border: 1px solid black;
/* 指定边框距离 */
border-spacing: 10px;
/* 设置边框合并 */
border-collapse: collapse;
}
td {
border: 1px solid black;
height: 100px;
vertical-align: middle; /* 默认垂直居中 */
text-align: center;
}
/* table的子元素是tbody，即使没有写，浏览器也会自动加 */
tbody > tr:nth-child(odd) {
background-color: #bfa;
}
.box1 {
/* 将元素设置为单元格td，就可以使用垂直居中 */
display: table-cell;
vert
}动画
过渡
指定一个属性发生变化时的切换方式。过渡必须是从一个有效数值到另一个有效数值，不能是auto。
/* 过渡的属性：多个属性用逗号隔开；所有属性用all */
transition-property: width, height;/* 指定过渡的持续时间：单位s和ms；可以用逗号隔开，和属性一一对应 */
transition-duration: 2s;/* 时序函数 */
transition-timing-function: xxx;
可选值：
ease 默认。慢速开始，先加速，后减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
cubic-bezier() 指定函数，参见 https://cubic-bezier.com
steps() 分布执行
可以设置第二个参数：
end 在时间结束时执行，默认
start 在时间开始时执行
例：steps(2, start)/* 等待一段时间后过渡 */
transition-delay: 2s;简写属性
同时有持续时间和延迟时，持续时间写前面。
transition: margin-left 2s 1s cubic-bezier(.24,.95,.82,-0.88);动画
自动触发动态效果。
关键帧
必须先设置一个关键帧：
@keyframes 关键帧名 {
/* from 或 0% 表示动画的开始 */
from {
margin-left: 0;
}
50% {
......
}
/* to 或 100% 表示动画的结束 */
to {
margin-left: 700px;
}
}属性
/* 对当前元素生效的关键帧名 */
animation-name: 关键帧名;/* 以下属性同transition */
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: xxx;/* 动画执行次数：infinite表示无限执行 */
animation-iteration-count: 3;/* 动画运行方向 */
animation-direction: xxx;
可选值：
normal 默认，从from向to执行
reverse 反方向
alternate 重复执行时从from到to到from到to...
alternate-reverse 与alternate相反/* 动画的执行状态 */
animation-play-state: xxx;
可选值：
running 默认，动画执行
paused 动画暂停/* 动画填充模式 */
animation-fill-mode: xxx;
可选值：
none 默认，动画执行完毕元素回到原来位置
forwards 元素停止在结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both forwards + backwards简写属性
animation: test 2s 3 alternate;变形
改变元素的形状或位置。变形不会影响到页面的布局。
transform: xxx xxx; /* 按顺序执行 */平移
translateX() 沿x方向平移
translateY() y
translateZ() z
括号中填像素或百分比（相对于自身大小）
例：没有设置宽高的元素水平和垂直居中
{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}沿z轴平移：距离越大，离人眼越近。但默认网页不支持透视，如果要看见效果需要设置网页的视距。
html {
/* 设置视距（人眼到网页的距离）为800px */
perspective: 800px;
}
.box1:hover {
transform: translateZ(200px); /* 移入时会变大 */
}旋转
rotateX()
rotateY()
rotateZ()
括号中填 xxxdeg 或 xxxturn
不设置视距的话，沿x或y旋转看起来是缩放transform: rotateY(180deg);
/* 是否显示元素的背面 */
backface-visibility: hidden;缩放
scaleX()
scaleY()
scaleZ()
scale() 双方向缩放
填倍数其他
/* 子元素是3d的，设置父元素按3d变形 */
transform-style: preserve-3d;/* 变形的原点，默认为center */
transform-origin: 20px 20px;less
选择
.box1 {
background-color: #bfa;
// box2是box1的后代
.box2 {
background-color: aqua;
}
// & 代表父元素
&:hover {
background-color: #fff;
}
}变量
// 定义
@a: 100px;
@b: box4;
// 直接使用
.box3 {
width: @a;
}
// 作为部分使用时加{}
.@{b} {
height: @a;
}
// $ 表示使用该属性的值
.box4 {
width: 100px;
height: $width;
}extend
.p1 {
width: 50px;
height: 50px;
}
// p2的样式继承p1，{}中是p2其他的样式
.p2:extend(.p1) {
color: red;
}混合函数
// 加括号不会被直接编译，但可以被调用
.p4() {
width: 50px;
......
}
// 使用.p4()的样式
.p5 {
.p4();
}.test(@w=10px, @h) {
width: @w;
height: @h;
}
div {
.test(20px, 30px);
// 或
.test(@h:30px, @w:20px);
}其他
// 数值可以直接计算
width: 100px + 200px;// 引入其他less文件
@import "syntax.less";flex
布局手段，代替浮动。
设置弹性容器：
display: flex; 块级弹性容器
display: inline-flex; 行内弹性容器弹性容器的（直接）子元素是弹性元素（弹性项）。
弹性容器样式
flex-direction 指定容器中弹性元素的排列方式
可选值：
row 默认，水平从左向右
row-reverse 水平从右向左
column 纵向从上向下
column-reverse 纵向从下向上主轴：弹性元素的排列方向。
侧轴（辅轴）：与主轴垂直的方向。
flex-wrap 弹性元素在弹性容器中是否换行
可选值：
nowrap 默认，不换行
wrap 沿辅轴方向换行
wrap-reverse 沿辅轴反方向换行flex-flow wrap和direction的简写属性
flex-flow: row wrap;justify-content 如何分配主轴上的空白空间
可选值：
flex-start 沿起边排列
flex-end 沿终边排列
center 居中排列
space-around 空白分布到元素两侧
space-between 空白分布到元素间
space-evenly 空白分布到元素单侧align-items 元素在辅轴上如何对齐
可选值：
stretch 默认，将长度设为相同的值（会拉伸）
flex-start 沿辅轴起边对齐
flex-end 沿辅轴终边对齐
center 居中对齐
baseline 基线对齐align-content 辅轴空白空间分布
可选值同justify-content弹性元素样式
align-self 用于覆盖弹性元素的align-itemsflex-grow 伸展系数：当父元素有多余空间时，设置子元素如何伸展。父元素的剩余空间会按子元素设置的比例进行分配。为0表示不伸展
li:nth-child(1) {
flex-grow: 1;
}
li:nth-child(2) {
flex-grow: 2;
}flex-shrink 收缩系数：父元素不足以容纳子元素时会收缩。为0表示不收缩
li:nth-child(1) {
flex-shrink: 1;
}
li:nth-child(2) {
flex-s: 2;
}flex-basis 元素在主轴上的基础长度。主轴是横向的该值就是元素的宽度，主轴是纵向的该值就是元素的高度。默认是auto表示参考元素的宽高，否则以该数值为准flex 简写属性：增长 缩减 基础
预设值：
initial = 0 1 auto
auto = 1 1 auto
none = 0 0 auto
flex: 1 1 auto;order 决定弹性元素的排列顺序（用样式改变结构）
order: 2;移动端
像素与视口
CSS像素：css中写的像素
物理像素：屏幕上的像素
视口（viewport）：显示网页的区域
默认情况（缩放100%）：
1CSS像素 = 1物理像素
视口宽度：CSS像素（1920px）
物理像素（1920px）
放大两倍时（缩放200%）：
1CSS像素 = 2物理像素
视口宽度：CSS像素（960px）
物理像素（1920px）通过调整视口的大小可以调整像素比。
默认情况下，移动端的网页都会将视口设置为980像素（CSS像素）。
设置视口
<meta name="viewport" content="width=375px">
<!-- 设置为完美视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">vw
vw（viewport width）表示视口宽度，100vw = 一个视口宽度。
假设设计图宽750px
100vw = 750px
1px = 0.133333vw
font-size最小12px
设置font-size为40px，即5.33333vw
则1rem = 40px（设计图中）
html {
font-size: 5.3333vw;
}
.box1 {
width: 18.75rem; /* 全屏750px */
}响应式布局
媒体查询
@media 媒体类型 {}
媒体类型：
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
@media all {
body {......}
}
/* 逗号表示或，and表示与，not表示非 */
@media print, screen {
body {......}
}
@media only screen {} /* only是为了兼容老浏览器 */媒体特性
width 视口宽度
height 视口高度
min-width 视口最小宽度（视口大于该宽度时生效）
max-width 视口最大宽度
@media (min-width: 500px) {}样式切换的分界点，称为断点，网页的样式会在这个点时发生变化。
常用的断点
小于768 超小屏幕 max-width=768px
大于768 小屏幕 min-width=768px
大于992 中型屏幕 min-width=992px
大于1200 大屏幕 min-width=1200px例：
@media only screen and (min-width: 500px) and (max-width: 700px) {}