HTML5+CSS3

常见图片格式

gif

支持动画

只有全透明和不透明两种模式

只有256种颜色

jpg

采用有损压缩算法

体积小

不支持透明

不支持动画

png

采用无损压缩算法

体积相对较小

支持背景透明

不支持动画

svg

几乎不会失真

HTML标签

标题与段落

<h1>1级标题</h1>
<h1>2级标题</h1>
<h1>3级标题</h1>
<h1>4级标题</h1>
<h1>5级标题</h1>
<h1>6级标题</h1>
<p>段落标签，文字独占一行</p>
二行

文本修饰标签

斜体

<i>文字斜体效果</i>

<em>文字斜体效果</em>

加粗

文字未加粗

文字加粗效果

文字加粗效果

换行

换行1
换行2

上下标文本

10₂sub下标

10²sup上标

删除、插入文本

原价：123    

图片标签与图片属性

<img src="" alt="未加载提示" title="鼠标指向提示"/>
width="100px" height="100px"  网速过慢时，影响网页布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l0SZjSxF-1638326994488)(C:\Users\liuy\AppData\Roaming\Typora\typora-user-images\image-20201225101157668.png)]

链接a标签

<a href="#" target="跳转方式_blank新页面打开"></a>
<base target="-blank">head标签种统一修改a标签跳转

跳转锚点-同页面跳转

实现一

#+id属性

<a href="#html"></a>
<a href="#css"></a>
<a href="#javascript"></a>
<h2>html</h2>
<h2>css</h2>
<h2>javascript</h2>

#+name属性

<a href="#html"></a>
<a href="#css"></a>
<a href="#javascript"></a>


<a name="html"></a>
<h2>html</h2>
<a name="css"></a>
<h2>css</h2>
<a name="javascript"></a>
<h2>javascript</h2>

特殊符号

特殊字符	含义	特殊字符代码
	空格符	&nbsp
©	版权	&copy
®	注册商标	&reg
<	小于号	&lt
>	大于号	&gt
&	和号	&amp
¥	人民币	&yen
°	摄氏度	&deg

列表

无序列表

注：ul和li必须是组合出现的，他们之间是不能有其他标签的

<ul type=""> circle ⚪ square方框

有序列表

注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。

定义列表

<dl>：定义列表
<dt>：定义专业术语或名词
<dd>：对名词进行解释和描述
    <dl>
        <dt>标题</dt>
        <dd>111</dd>
    </dl>

表格

<table>：表格的最外层容器
  <tr>： 定义表格行
  <th>：定义表头
  <td>：定义表格单元
  <caption>：定义表格标题 
语义化标签：<tHead>、<tBody>、<tFood>   

border ： 表格边框
cellpadding ： 单元格内的空间
cellspacing ： 单元格之间的空间
rowspan ： 合并行
colspan ： 合并列
align ： 左右对齐方式
valign ：上下对齐方式	

表单

type属性	含义
text	普通的文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

<textarea> ：多行文本框
<select>、<option>：下拉菜单
<label>：辅助表单

CSS

文件夹	含义
base	一些初始的通用CSS，如重置默认样式，动画，工具，打印等。
components	用于构建页面的所有组件，如按钮，表单，表格，弹窗等。
layout	用于布局页面的不同部分，如页眉，页脚，弹性布局，网格布局等。
pages	放置页面之间不同的样式，如首页特殊样式，列表页特殊样式等。
themes	应用不同的主题样式时，如管理员，买家，卖家等。
abstracts	放置一些如：变量，函数，响应式等辅助开发的部分。
vendors	放置一些第三方独立的CSS文件，如bootstrap，iconfont等。

外部样式引入

<link>标签
	rel 指定资源跟页面的关系
 	href 资源地址

      @import
	注：这种方式有很多问题，不建议使用。	

CSS选择器

ID选择器

#box{}

id不可重复，因为id只能选择单个元素

类（别）选择器

.nav{}

选择拥有该class的所有元素

标签选择器

div{}

根据标签名称选择对应所有标签

通用选择器

*{}

针对页面所有元素生效

伪类选择器

nth-of-type()根据相同元素进行编号

li:nth-of-type(1/2){}选择第一个或第二个li

li:first-child{}选择第一个li

li:nth-of-type(even){}选择偶数,奇数（odd）

nth-child()根据元素自然顺序编号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-azc6kPuA-1638326994499)(C:\Users\liuy\AppData\Roaming\Typora\typora-user-images\image-20201220192358546.png)]

p:nth-child(5)

属性选择器

input[text=password]{} *="val" 部分匹配

a[href $='val']<!--$表示属性的结尾匹配-->

a[href ^='tap']<!--$表示属性的开头匹配-->

伪元素选择器

添加一个伪元素

xxx::after {
    content:"";
    ***
}

选择被选中的元素

xxx:checked{}

权重

通用选择器 *

权重0

标签选择器 div、p

权重1

类（别）选择器 .act、.nav

权重10

ID选择器 #btn、#box

权重100

行内样式 style={}

权重1000

注意

选择器选择范围越小越精确，优先级越高

#box p .tt -->100+1+10

#box .tt -->100+10

Float浮动

特性：

加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

文档流：文档中可显示对象在排列时所占用的位置。

注意点：

• 只会影响后面的元素。
• 内容默认提升本层。
• 默认宽度根据内容决定
• 换行排列
• 主要给块元素添加，但也可以给内联元素添加

Clear属性清除浮动

• 固定宽高：不推荐，不能把高度固定死，不适合做自适应效果。
• 父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
• overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响。
• display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素。
• 设置空标签：不推荐，会多添加一个标签。
• after伪类：推荐，空标签的加强版–内联块类型，目前的做法

clear：left/right/both;清除元素受到左右浮动的影响

BackGround背景

背景颜色

background-color: #00000;

背景图片

默认平铺显示，铺满整个容器

background-image: url(imgs/dong.gif);

禁止平铺展示

background-repeat: 
no-repeat  不平铺
repeat-x x轴平铺
repeat-y y轴平铺

背景图显示位置

background-position: right bottom; 右下角展示
x y :number(px %)|单词
	x:left center right
	y:top center bottom

背景图随滚动条移动的样式

background-attachment:
	scroll:默认值(按照当前元素偏移)
	fixed:按照浏览器位置偏移

缩写

颜色 背景图片 平铺方式

background:gray url(.../xxx/png) no-repeat;

精灵图使用

url left top

background:url(.../xxx/png) left top;

线性渐变

linear-gradient(渐变方向，开始颜色，结束颜色)

渐变方向：to top/to right/to left

background:linear-gradient(to bottom,#d3d3d3,#9e9e9e)

透明度

background:rgba(147,2,1,0.5透明度)不影响子元素

Font字体

缩写

​ 斜体字 加粗 字号大小 行高 默认字体，备用字体1，备用字体2

font: italic bold 20px/35px aral,sans-serif,"“微软雅黑”;

文字颜色

color：white;

文字字体

font-family:"华文中宋"

文字大小

font-size：24px;

文字加粗

font-weight:bold;normal正常

文字倾斜

font-style:italic;

首行缩进

text-indent:60px;

水平对齐方式

text-align:center;

段落修饰

text-decoration:underline;
下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none

text-transform:文本大小写（针对英文段落）
小写:lowercase
大写：uppercase
只针对首字母大写：capitalize


line-height:100px;包含上下边距

字体间距

letter-spacing ：字与字之间的间距
word-spacing:词之间的间距(针对英文段落)
英文和数字不换行问题：
	word-break:break-all;强制换行
	word-wrap:break-word;不是那么强制,会产生空白区域

盒子模型

content–>padding–>border–>margin

物品 填充物 包装盒 盒子与盒子之间的间距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vb0kHr1W-1638326994501)(C:\Users\liuy\AppData\Roaming\Typora\typora-user-images\image-20201218220710505.png)]

边框

宽度 样式 颜色（可以省略）

border： 1px solid #12345  实线
	dashed:虚线
	dotted:点线
border-left-style：针对某一边进行单独设置
transparent 透明颜色

border:none;无边框

内边距padding

不能为负数

padding: 10px 15px 15px 15px=(上，右，下，左)
padding: 10px 15px 15px=(上，左右，下)
padding: 10px 15px=(上下，左右)
padding: 10px=(上下左右)

防止因padding将元素撑大

填充向内挤压

box-sizing:border-box;

外边距margin

margin:auto;

让父元素自动设置边距，左右边距相等，水平方向有效

margin: 10px 15px 15px 15px=(上，右，下，左)
margin: 10px 15px 15px=(上，左右，下)
margin: 10px 15px=(上下，左右)
margin: 10px=(上下左右)

问题

margin叠加问题

上下margin同时存在，会取上下margin值较大的

解决：BFC

盒子嵌套margin传递问题针对margin-top

解决：margin-top换padding

​ 给父容器加border

margin左右自适应可以，上下自适应不行

不设置宽度

自动计算容器大小，充满父容器宽度

元素类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nmBS3pJ2-1638326994507)(C:\Users\liuy\AppData\Roaming\Typora\typora-user-images\image-20201218230544712.png)]

块元素

block

可以设置宽高大小，默认宽度100%。并且独占一行

支持所有样式

<p>
<ul> <li>
<h1>~~<h6>
<div>
<form>
<table>

内联（行内）元素

inline

无法设置宽高，元素大小随内容变化，所有元素默认排在一行

不支持width height margin padding

<i>
<b>
<span>
<a>

内敛块元素

inline-block

<span></span><span></span>//没有空隙
<span></span>
<span></span>有空隙

既能设置宽高，又能排在一行

<img>
<input>

调整内敛块元素对齐方式

vertical-align:middle;

元素嵌套

块嵌套内联

块嵌套块

特殊:错误

<p>
    <div></div>
</p>

内联不能嵌套块

特殊：

<a>
	<div></div>
</a>

position定位

position:static(默认)/relative/absolute/fixed/sticky

relative相对定位

• 如果没有定位偏移量，对元素本身没有任何影响
• 不是元素脱离文档流
• 不影响其他元素布局
• left、top、right、bottom是相对于当期元素自身进行偏移absolute

absolute绝对定位

• 使元素完全脱离文档流
• 使内联元素支持宽高（让内联具备块的特性）
• 使块元素默认宽根据内容决定（让块具备内联的特性）
• 如果有定位祖先元素相对于定位祖先元素，没有相对于整个文档发生偏移
• 祖先元素（相对，绝对，固定）

fixed固定定位

• 使元素完全脱离文档流
• 使内联元素支持宽高（让内联具备块的特性）
• 使块元素默认宽根据内容决定（让块具备内联的特性）
• 相对于整个浏览器定位，不受浏览器滚动条影响

sticky粘性定位

• 在指定的位置，进行黏性操作。

z-index定位层级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0aDeI7iL-1638326994508)(C:\Users\liuy\AppData\Roaming\Typora\typora-user-images\image-20201220205432798.png)]

overflow溢出

visible 默认：溢出部分可见

hidden：溢出部分隐藏

auto：溢出部分设当加入滚动条

overflow:visible|hidden|auto

overflow-x

visible 默认：溢出部分可见

hidden：溢出部分隐藏

auto：溢出部分设当加入滚动条

overflow-x:visible|hidden|auto

overflow-y

visible 默认：溢出部分可见

hidden：溢出部分隐藏

auto：溢出部分设当加入滚动条

overflow-y:visible|hidden|auto

最大最小宽高

min-height:200px 自动适应放大

CSS省略号

white-space:nowrap;不换行显示
overflow:hidden;隐藏溢出的内容
text-overflow:ellipsis;添加省略号

CSS Sprite

特性

CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。

好处

可以减少图片的质量，网页的图片加载速度快

减少图片的请求的次数，加快网页的打开

关于opacity透明度

0~1

设置透明度占空间opacity：0.5

里面的子元素也会跟着一起透明

cursor手势

自定义手势

cursor:url(./...),auto;

cursor:help/move…;

PS

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P1YYLdQv-1638326994510)(C:\Users\liuy\AppData\Roaming\Typora\typora-user-images\image-20201225225020485.png)]

HTML5

HTML5与XHTML区别

DOCTYPE文档及编码

元素大小写

属性布尔值

属性引号

图片的alt属性

单标签写法

双标签闭合

strong与b、em与i区别

表现形态都是 文本加粗 斜体

区别：strong与em使具备语义化，b和i不具备语义化

引用标签

blockquote：引用大段的段落解释

q：引用小段的短语解释

abbr：缩写或首字母缩略词

address：引用文档地址信息

cite：引用著作的标题

iframe嵌套页面

frameborder	1、0	规定是否显示框架周围的边框。
height	pixels 、 %	规定 iframe 的高度。
name	frame_name	规定 iframe 的名称。
scrolling	yesnoauto	规定是否在 iframe 中显示滚动条。
seamless	seamless	规定 看上去像是包含文档的一部分。
src	URL	规定在 iframe 中显示的文档的 URL。
width	pixels、%	定义 iframe 的宽度。

br与wbr区别

br表示换行，wbr表示软换行

担心浏览器在错误的位置换行，使用wbr

 XML<wbr>HTTP<wbr>Request

pre与code

pre元素可定义预格式化的文本。被包围在pre中的文本通常会保留空格和换行符

只应该在表示计算机源代码时用code标签。通常会把文本变成等宽字体，暗示这段文本是源代码程序。

map与area

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一副图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。

area元素的href属性定义区域的URL，shape属性来定义区域的形状，coords属性来定义热区的坐标。

<div>
    <img src="#" usemap="#map">
    <map name="map">
        <area shape="rect" coords="205 83 386 173" href="" alt=""> 矩形热区 设置对角线坐标
        <area shape="circ" coords="300 130 50" href="" alt=""> 圆形热区，设置原点坐标和半径
        <area shape="poly" coords="205 83 386 173 56 56" href="" alt=""> 自定义热区，设置各个点坐标（三角形）
    </map>
</div>

embed与object

都表示能够嵌入一些多媒体，如flash动画、插件等等。基本使用没多大区别，主要是为了兼容不同的浏览器。

object需要配合param一起用

<embed src="" type="">
<object>
    <param name="movie" value="">
</object>

audio与video

引入音频、视频的标签，默认控件不显示添加显示controls

<audio src="" controls></audio>loop循环   autoplay自动播放
<video src="" controls></video>
<video>
	<source src="">多个资源来兼容不同浏览器
    <source src="">
</video>

ruby、bdo文字注解方向

ruby标签定义ruby注释（中文注音或字符），rt标签定义字符的解释或发音。

<ruby>
	喊<rt>han</rt>
</ruby>

bdo标签可覆盖默认的文本方向

<p>
    <bdo dir="rtl">文本方向</bdo>==>向方文本
</p>
<span></span>
span{direction:rtl;unicode-bidi:bidi-override}

link扩展

<link rel="stylesheet" type="text/css" href=".css">
icon引入<link rel="icon" type="/image/x-icon" href="http:/">
DNS预解析<link rel="dns-prefetch" href="//static.360.com">

meta扩展

<meta name="description" content=".">网站搜索下面的介绍
<meta name="keywords" content="."> 关键字，用于搜索引擎
<meta name="renderer" content="webkit"> 选择浏览器内核
<meta ie浏览器按照edge的形式渲染
  http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="refresh" content="3" url="\">刷新
<meta http-equiv="expires" content="时间">设置缓存

HTML5新语义化标签

header
hgroup
footer
main
nav
注：header、footer、main在一个网页中只能出现一次
article
aside
section
figure
figcaption
datalist

datails / summary

progress /meter

time

mark

表格扩展

添加单线显示：border-collapse:collapse;

隐藏空单元格：empty-cells:hide;

斜线分类： border/rotate

列分组：colgroup/col

表单扩展

email : 电子邮件地址输入框

url : 网址输入框

number : 数值输入框

range : 滑动条

date / month / week  : 日期控件 

search : 搜索框

color : 颜色控件

tel : 电话号码输入框 （移动端调取数字键盘）

time : 时间控件

表单属性

autocomplete : 自动完成-->  输入时提示之前的记录**默认on**关闭off

   autofocus : 获取焦点  自动获取光标

   required : 不能为空 

   pattern  : 正则验证

   method :  数据传输方式

   enctype :  数据传输类型

   name / value : 数据的键值对

扩展标签

  fieldset : 表单内元素分组 

   legend : 为fieldset元素定义标题

   optgroup  : 定义选项组

BFC规范

​ Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

​ BFC 即 Block Formatting Contexts (块级格式化上下文) ，它属于上述中的其中一种规范。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

触发BFC

​ 浮动元素：float 除 none 以外的值

​ 绝对定位元素：position (absolute、fixed)

​ display 为 inline-block、table-cells、flex

​ overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC特性及应用

1. 解决margin叠加问题：上下两个盒子的margin合并取最大值，没有叠加，触发其中一个的BFC
2. 解决margin传递问题：子元素的margin传递到父元素，导致父元素下移。触发父元素BFC
3. 解决浮动问题：父元素因子元素浮动没有被撑开，触发父元素BFC
4. 解决覆盖问题 ：两个盒子因第一个元素浮动，第二个自适应占满全屏，触发第二个的BFC（后台管理页面，定一个边栏，另一半自适应）

浏览器前缀

浏览器	内核	前缀
IE	Trident	-ms-
Firefox	Gecko	-moz-
Opera	Presto	-o-
Chrome	Webkit	-webkit-
Safari	Webkit	-webkit-
Opera、Chrome	Blink

CSS3

transtion过渡

transition: 过度的属性 过度时间 过度方式 延迟时间

• transition-property : 规定设置过渡效果的CSS属性的名称。
• transition-duration : 规定完成过渡效果需要多少秒或毫秒。
• transition-delay : 定义过渡效果何时开始。
• transition-timing-function : 规定速度效果的速度曲线。

transition:width 1s ease-lin 2s;

transition-timing-function

• linear 匀速
• ease（默认值）
• ease-in 加速
• ease-out 减速
• ease-in-out 先加后减速
• cubic-bezier

​ （ http://cubic-bezier.com ）

过度方式：贝塞尔曲线

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FfRLPebs-1638326994512)(C:\Users\liuy\AppData\Roaming\Typora\typora-user-images\image-20210114140810561.png)]

transform变形

注意事项

1. 变形操作不会影响其他元素

2. 变形操作只能添加给块元素，但是不能添加给内联元素

3. 复合写法，可以同时添加多个变形操作。

   执行时有顺序，先执行后面的操作，后执行前面的

   translate会受到 rotate、scale、skew的影响

4. transform-origin元素基点，变形会跟着元素基点变形

• translate : 位移

• scale : 缩放

• rotate : 旋转

• skew : 斜切

  注：设置多个值时候的顺序；设置transform-origin的基点位置。

位移translate

translate位移时，默认原点是元素的中心位置

比使用position性能更好

• transform : translateX(40px)/translateY/translateZ;
• transform : translate(100px,0)
• transform ：translateZ() 正值向前，负值向后
• 3D写法：translate3d(x,y,z)

跟position：relative一样，元素相对于自己改变位置，不脱离文档流。

缩放scale

• transform: scale(1)/scale(1.5) 缩放倍数等比缩放
• transform: scaleX(1)/scaleY/scaleZ 一个方向缩放
• transform：scaleZ() 立体元素的厚度
• 3D写法：scale3d(x,y,z)

旋转rotate

• transform: rotateZ(45deg) 正值顺时针，负值逆时针旋转
• transform: rotateX() 正值向上翻转 --X轴横向
• transform：rotateY() 正值向右翻转 --Y轴竖向
• **3D写法：rotate3d(x,y,z,deg)**四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg

斜切skew

• transform:skew(-30deg,0)

景深perspective

• perspective:离屏幕多远的距离取观察元素，值越大，幅度越小。
• perspective-origin:景深-基点位置，观察元素的角度。
• transform-origin：x y z
• transform-style:3D空间
  • flat（默认值2d）
  • preserve-3d(3d,产生一个三维空间)
  • backface-visibility:背面隐藏

transform:perspertive(500px)  透视观察距离，必须写在最前面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uzVEiJ1i-1638326994514)(C:\Users\liuy\AppData\Roaming\Typora\typora-user-images\image-20201220200244683.png)]

animation动画

1. animation-name:设置动画的名字（自定义）

2. animation-duration:动画持续时间

3. animation-delay:动画的延迟时间

4. animation-iteration-count:动画的重复次数，默认1次，（infinite无限）

5. animation-timing-function：动画的运动形式（各种运动曲线）

6. animation-fill-mode:规定动画播放之前或之后，其动画效果是否可见。

   ​ none默认值：在运动结束之前回到初始位置，在延迟情况下，让0%在延迟后生效。

   ​ backwards：在延迟的情况下，让0%在延迟前生效

   ​ forwards：在运动结束之后，停在结束位置

   ​ both：backwards和forwards同时生效

7. animation-direction：属性定义是否应该轮流反向播放动画

   alternate：一次正向（0-100%），一次反向（100-0%）

   reverse：永远都是反向，从100-0%

   normal（默认值）：永远都是正向，从0%-100%

background扩展

• background-size:背景图的尺寸大小
  • cover：覆盖 填满容器
  • contain：包含 宽度占满容器
• background-origin：背景图的填充位置
  • padding-box（默认）
  • border-box 从边框位置开始填充
  • content-box 从内容区开始填充
• background-clip：背景图的裁切方式
  • padding-box 内边距位置切断图片
  • border-box（默认） 边框位置切断图片
  • content-box 内容位置切断图片
• 复合background:url(’./img.png’) (填充位置)content-box （裁切方式）padding-box

CSS3线性渐变

添加到background-image上

注：渐变的0度在页面下边，正值会按照顺时针旋转，负值按逆时针旋转

background-image:linear-gradent(to top/45deg,red,blue)

• linear-gradent：线性渐变
  • point || angle
  • color
  • percentage
• radial-gradient: 径向渐变
  • point
  • color
  • percentage

shadow阴影

文字阴影

text-shadow(x,y,颜色) 默认颜色与文字颜色一样，通过逗号实现多个阴影

盒子阴影

设置多个值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UmSdm2Jc-1638326994515)(C:\Users\liuy\AppData\Roaming\Typora\typora-user-images\image-20201220192949335.png)]

box-shadow:水平位移 垂直偏移 模糊值 扩大范围 阴影颜色  默认向外，添加此属性方向向内inset
box-shadow:3px 0px 5px 0px black inset;

mask遮罩

mask: url repeat x y w h 多遮罩

-webkit-mas:url('./hello.png') no-repeat 100px 100px / 200px 200px,url('./hello.png') no-repeat 100px 100px / 200px 200px; 

未标准化，需设置浏览器专属css

倒影

box-reflect： above上 below下 left左 right右 距离 遮罩|渐变

渐变：只针对透明度的渐变，不支持颜色

box-reflect: below 20px url('./.png');
box-reflect: below 20px linear-gradient(rgba(255,255,255,0) 50%,rgba(255,255,255,1);

模糊与计算

• blur模糊

• filter : blur(20px)

• calc

• 四则计算

• width:calc(100%-100px);
  

分栏布局

• 分栏的个数和分栏的宽度不能一起设置

  column-count : 分栏的个数

  column-width : 分栏的宽度

  column-gap : 分栏的间距

  column-rule : 分栏的边线

  column-span : 合并分栏

伪类与伪元素

​ 在CSS2.1中对伪类和伪元素的区别比较模糊。CSS3中对这两个概念做了相对较清晰地解释，并且在语法上也做了很明显的区分。

CSS3中规定伪类由一个冒号开始，然后为伪类的名称；伪元素由两个冒泡开始，然后为伪元素的名称。

伪类概念

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息。通常表示获取不存在与DOM树中的信息，或获取不能被常规CSS选择器获取的信息。

​ : hover

​ : focus

​ : empty

伪元素概念

元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

​ :: selection

​ :: first-line / first-letter

​ :: before / after

CSS Hack 兼容

CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。

Hack分类

CSS属性前缀法

​ 属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

前缀标识	兼容浏览器
_ _background:blue	IE6
+、* +background:blue	IE6、IE7
\9 background:blue\9	IE6、IE7、IE8、IE9
\0 background:blue\0	IE8、IE9、IE10、IE11

选择器前缀法

前缀标识	兼容浏览器
*html *html .box	IE6
*+html *+html .box	IE7
:root :root .box	IE9以上及现代浏览器

IE条件注释法

IE10以上不支持注释法

前缀标识	兼容浏览器
	IE
	IE7
	IE7以下
	非IE7

IE低版本BUG

由于旧浏览器在设计上有很多缺陷，导致一些BUG的产生，所以针对这些问题需要做出兼容处理。

常见兼容问题

1. 透明度

   opacity IE8以下不识别 filter：alpha(opacity=50)

2. 双边距

   margin IE6以下双边距 _display:inline;

3. 最小高度

   IE6下最小高度 19px overflow:hidden;

4. 图片边框

   border:none;

渐进增强与优雅降级

• ​ 渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• ​ 优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

网页布局

等高布局

margin-bottom与padding-bottom配合实现数值足够大

双飞翼布局–浮动元素

通过margin移动元素位置，margin-left：-100% margin-left：-100px;

圣杯布局

响应式布局

@mediaCSS3媒介查询

采用元素隐藏显示

@media all and (max-width:640px){
    当窗口像素不超过最大值640px时
}
@media all and (max-width:768px){
    当窗口像素不超过最大值768px时
}
@media all and (max-width:1024px){
    当窗口像素不超过最大值1024px时
}

动画

@keyframe beat{
    30%:{
        transform:scale(1.3);
    }
    100%:{
        transform:scale(1);
    }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xvVo3z1F-1638326994518)(C:\Users\liuy\AppData\Roaming\Typora\typora-user-images\image-20201220204916180.png)]

PostCSS

PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。利用PostCSS可以实现一些工程化的操作，如：自动添加浏览器前缀，代码合并，代码压缩等。

官方网址：https://postcss.org/

安装：

1. 安装node环境
2. npm install postcss-cli –g
3. -o 、-w
4. postcss.config.js

常见插件：

• autoprefixer 自动添加浏览器前缀
• postcss-import CSS导入合并
• cssnano 压缩CSS文件
• postcss-cssnext 支持CSS的新特性
• stylelint 语法检测
• postcss-sprites 自动生成精灵图

const autoprefixer = require('autoprefixer');
const pcImport = require('postcss-import');
const cssnano = require('cssnano');
const cssnext = require('postcss-cssnext');
const stylelint = require('stylelint');
const sprites = require('postcss-sprites');

module.exports = {
    plugins : [
        // autoprefixer({
        //     browsers : [' > 0% ']
        // }),
        // pcImport,
        // cssnano,
        cssnext,
        stylelint({
            "rules" : {
                "color-no-invalid-hex" : true
            }
        }),
        sprites({
            spritePath : './dist'
        })
    ]
};

CSS新特性

CSS 自定义属性

定义与使用 计算 默认值 作用域

  div{
        --color : yellow;
    }

    :root{
        --color : red;
        --number : 100px;
        --number2 : 100;
        --size : 50px;
    }

    #box{
        /* --color : blue; */
        background: var(--color);
        width : var(--number);
        height : calc(var(--number2) * 1px);
        font-size : var(--size , 100px);
    }

CSS新特性之shapes文字环绕

CSS Shapes布局可以实现不规则的文字环绕效果，需要和浮动配合使用。

shape-outside 环绕图形

clip-path 切图形

shape-margin 环绕距离

  #parent{ width:300px; height: 300px; border:1px black solid; margin:20px;}
    /* #shape{
        width: 100px; height:100px;
        padding:10px;
        border:10px black solid;
        margin:10px;
        float:left;
        border-radius: 50%;
        shape-outside: margin-box;
    } */
    #shape{
        width: 100px; height:100px;
        padding:10px;
        border:10px black solid;
        margin:10px;
        float:left;
        background: red;
        clip-path: polygon(0 0,0 100px,100px 100px);
        shape-outside: polygon(0 0,0 100px,100px 100px);
        shape-margin:15px;
    }

CSS新特性之scrollbar滚动条

CSS scrollbar用于实现自定义滚动条样式。

• ::-webkit-scrollbar 滚动条宽度
• ::-webkit-scrollbar-thumb 滚动条–滚条样式
• ::-webkit-scrollbar-track 滚动条–凹槽样式

body{ height:2000px;}
html::-webkit-scrollbar{
    width:10px;
    /* height:1px; */
}
html::-webkit-scrollbar-thumb{
    background: #f90;
    border-radius: 15px;
}
html::-webkit-scrollbar-track{
    background:#dedede;
    box-shadow: inset 0 0 5px gary;
}

CSS新特性之Scroll Snap

CSS Scroll Snap（CSS 滚动捕捉）允许你在用户完成滚动后多锁定特定的元素或位置。

• scroll-snap-type
• x
• mandatory
• scroll-snap-align 滚动条中元素在容器中的位置
• start 始终在开头-左边
• center 始终在中间
• end 始终在末尾

*{ margin:0; padding:0;}
ul{ list-style: none;}
#main{ 
    width:600px; height:100px; border:1px black solid; margin:100px; overflow: auto;
    scroll-snap-type: x mandatory;
}
#main ul{ width:4000px;}
#main li{ width:300px; height:100px; background: red; float: left; margin:0 100px;
    scroll-snap-align: end;
}

Flex弹性盒模型

​ 随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

作用在flex容器上	作用在flex子项上
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-items	flex
align-content	align-self

作用在flex容器上

1.flex-direction布局方向

取值	含义
row	默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
row-reverse	显示为行。但方向和row属性值是反的
column	显示为列
column-reverse	显示为列。但方向和column属性值是反的

2.flex-wrap单行、换行

取值	含义
nowrap	默认值，表示单行显示，不换行。
wrap	宽度不足换行显示
wrap-reverse	宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。

3.flex-flow流动特性

flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。

4.justify-content主轴方向上子项的对齐和分布方式

取值	含义
flex-start	默认值，表现为起始位置对齐。
flex-end	表现为结束位置对齐。
center	表现为居中对齐。
space-between	表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around	around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly	evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

5.align-items侧轴方向上的对齐方式

取值	含义
stretch	默认值，flex子项拉伸。
flex-start	表现为容器顶部对齐。
flex-end	表现为容器底部对齐。
center	表现为垂直居中对齐。

6.align-content和justify-content是相似且对立

• align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。

取值	含义
stretch	默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。
flex-start	表现为起始位置对齐。
flex-end	表现为结束位置对齐。
center	表现为居中对齐。
space-between	表现为两端对齐。
space-around	每一行元素上下都享有独立不重叠的空白空间。
space-evenly	每一行元素都完全上下等分。

作用在flex子项上的CSS属性

1.order改变排序位置

可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0。

2.flex-grow

扩展flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值0。

占用空余空间的比例 1 2

3.flex-shrink

处理当flex空间不足时，单个元素的收缩比例。默认值1。0不收缩

4.flex-basis

定义在分配剩余空间之前元素的默认大小。

5.flex

flex-grow、flex-shrink、flex-basis缩写

flex：0优先级大于width

值	描述
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。
inherit	从父元素继承该属性。

6.align-self

控制单独某一个flex子项的垂直对齐方式。

Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。

作用在grid容器上	作用在grid子项上
grid-template-columns	grid-column-start
grid-template-rows	grid-column-end
grid-template-areas	grid-row-start
grid-template	grid-row-end
grid-column-gap	grid-column
grid-row-gap	grid-row
grid-gap	grid-area
justify-items	justify-self
align-items	align-self
place-items	place-self
justify-content
align-content
place-content

作用在grid容器上

1.grid-template网格大小缩写

• grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。

grid-template-areas:
"a1 a1 a1" 1fr		行1/3
"a2 a2 a3" 1fr		
"a2 a2 a3" 1fr		
/1fr 1fr 1fr;		列1/3

grid-template-columns、grid-template-rows二维布局

• 对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。

• 有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

grid-template-rows:repeat(3,1fr);
grid-template-columns:repeat(3,1fr);

grid-template-areas区域

area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。必须形成矩形

grid-template-areas:
"a1 a1 a1" 
"a2 a2 a3"
"a2 a2 a3";

.div1{grid-area:a1;}
.div2{grid-area:a2;}
.div3{grid-area:a3;}

2.grid-gap网格缝隙缩写

• CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。

• grid-gap:row column;
  grid-gap:20px 10px;
  

grid-template-gap、grid-row-gap网格空隙尺寸

• grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。

• grid-column-gap:10px 纵向--列与列间距
  grid-row-gap:20px 横向--行与行间距
  

3.place-item缩写

• place-items可以让align-items和justify-items属性写在单个声明中。

• place-items:align justify;
  place-items:start end;
  

justify-items水平呈现方式、align-items垂直呈现方式

• justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。

• align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐

取值	含义
stretch	默认值，拉伸。表现为水平或垂直填充。
Start	表现为容器左侧或顶部对齐。 根据内容撑开
end	表现为容器右侧或底部对齐。 根据内容撑开
center	表现为水平或垂直居中对齐。 根据内容撑开

4. place-content 缩写

place-content可以让align-content和justify-content属性写在一个CSS声明中。

justify-content、align-content

• justify-content指定了网格元素的水平分布方式。
• align-content指定了网格元素的垂直分布方式。

取值	含义
stretch	默认值，拉伸。表现为水平或垂直填充。
start	表现为容器左侧或顶部对齐。
end	表现为容器右侧或底部对齐。
center	表现为水平或垂直居中对齐。
space-between	表现为两端对齐。
space-around	享有独立不重叠的空白空间。
space-evenly	平均分配空白空间

作用在grid子项上的CSS属性

取值	含义
grid-column-start	水平方向上占据的起始位置。
grid-column-end	水平方向上占据的结束位置。（span属性）
grid-row-start	垂直方向上占据的起始位置。
grid-row-end	垂直方向上占据的结束位置。（span属性 截取的个数）
grid-column	grid-column-start + grid-column-end的缩写。 2 / 3
grid-row	grid-row-start + grid-row-end的缩写。 2 / 3
grid-area	表示当前网格所占用的区域，名字和位置两种表示方法。
justify-self	单个网格元素的水平对齐方式。
align-self	单个网格元素的垂直对齐方式。
place-self	align-self和justify-self的缩写。

Sass/Less

• Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
• Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

1.变量（Variables）

less–@、插值@{key}

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
***************************编译********************
#header {
  width: 10px;
  height: 20px;
}

sass–$、插值#{key}**

• 局部变量转换为全局变量可以添加 !global 声明
• 不想强迫任何人一定使用中划线或下划线

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}
***************************编译********************
#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

2.混合（Mixins）

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

less–.className()

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中;

sass–@mixin、@include

混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
ul.plain {
  color: #444;
  @include no-bullets;
}
***************************编译********************
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

混合器传参数\默认参数值;

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(blue, red, green);
}

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

默认参数值

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

@include link-colors(red) $hover和$visited也会被自动赋值为red。

3.合并

less

.box{
    background+: url(a.png);
    background+: url(b.png);
    transform+_: url(a.png);
    transform+_: url(a.png);
}
***************************编译********************
.box{
    background:url(a.png),url(b.png);
    transform:scale(2) rotate(30deg);
}

sass

$background : (
	a : url(a.png),
    b : url(b.png)
)
$transform : (
    a : scale(2),
    b : rotate(30deg)
)
.box{
    background: map-values($background);
  	transform: zip(map-values($transform)...);
}
***************************编译********************
.box{
    background:url(a.png),url(b.png);
    transform:scale(2) rotate(30deg);
}    
    

4.嵌套（Nesting）

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}
***************************编译********************
#main { color: black;}
#main a {font-weight: bold;}
#main a:hover {color: red;}

less–@规则嵌套和冒泡

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}
***************************编译********************
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

sass

子组合选择器和同层组合选择器>、+和~

> :子组合选择器只会选择article下紧跟着的子元素中命中section选择器的元素

+:同层相邻组合选择器+选择header元素后紧跟的p元素

~:选择所有跟在article后的同层article元素

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

嵌套属性

nav {	
  border: {								
  style: solid;								
  width: 1px;								
  color: #ccc;								
  }								
}								
***************************编译********************
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

5.运算（Operations）

less

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位**。无效的单位换算**例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域,CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm
你还可以对颜色进行算术运算：

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

calc() 特例

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

sass

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。单位不同，不能运算

SassScript 支持 6 种主要的数据类型：

1. 数字，1, 2, 13, 10px
2. 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
3. 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
4. 布尔型，true, false
5. 空值，null
6. 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
7. maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

字符串 (Strings)

SassScript 支持 CSS 的两种字符串类型："a"、'a'、a;只有一种情况例外，使用 #{} (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名：

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");
***************************编译********************
body.firefox .header:before {
  content: "Hi, Firefox users!"; }

数字运算

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

p {
  width: 1in + 8pt;
}
***************************编译********************
p {
  width: 1.111in; }

关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

除法运算

/ 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

以下三种情况 / 将被视为除法运算符号：

• 如果值，或值的一部分，是变量或者函数的返回值
• 如果值被圆括号包裹
• 如果值是算数表达式的一部分

p {
font: 10px/8px;       // Plain CSS, no division
$width: 1000px;
width: $width/2; //Uses a variable,does division
width: round(1.5)/2;//Uses afunction,does division
height: (500px/2);//Uses parentheses,does division
margin-left: 5px + 8px/2px;//Uses +,does division
}
***************************编译********************
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
***************************编译********************
p {
  font: 12px/30px;
}

颜色运算

分段计算01 + 04 = 05 02 + 05 = 07 03 + 06 = 09
p {
  color: #010203 + #040506;
}
***************************编译********************
p {
  color: #050709;
}
rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算
p {
color : rgba(255,0,0,0.75)+rgba(0,255,0,0.75);}
p {
  color: rgba(255, 255, 0, 0.75); 
}

颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
***************************编译********************
p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); }

IE 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定 #AABBCCDD，使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。

$translucent-red: rgba(255, 0, 0, 0.5);
#{ie-hex-str($translucent-red)}-->#80FF0000

字符串运算

+ 可用于连接字符串

p {
  cursor: e + -resize;
}
***************************编译********************
p {
  cursor: e-resize;
}

注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
***************************编译********************
p:before {
  content: "Foo Bar";
  font-family: sans-serif; 
}

运算表达式与其他值连用时，用空格做连接符：

p {
  margin: 3px + 4px auto;
}
***************************编译********************
p {
  margin: 7px auto; }

在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：

p:before {
  content: "I ate #{5 + 10} pies!";
}
***************************编译********************
p:before {
  content: "I ate 15 pies!"; }

空的值被视作插入了空字符串：

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}
**********************编译******************
p:before {
  content: "I ate pies!"; }

布尔运算 (Boolean Operations)

SassScript 支持布尔型的 and or 以及 not 运算。

数组运算 (List Operations)

数组不支持任何运算方式，只能使用 list functions 控制。

圆括号 (Parentheses)

圆括号可以用来影响运算的顺序：

p {
  width: 1em + (2em * 3);
}

编译为

p {
  width: 7em; }

6.逻辑

less

@count : 3;
.get(@cn) when ( @cn > 4 ){
    width : 100px + @cn;
}
.get(@cn) when ( @cn < 4 ){
    width : 10px + @cn;
}
.box11{
    .get(@count);
}


@count2 : 0;
.get2(@cn) when (@cn < 3){
    .get2((@cn+1));
    .box-@{cn}{
        width: 100px + @cn;
    }
}

.get2(@count2);
**********************编译******************
.box-2 {
  width: 102px;
}
.box-1 {
  width: 101px;
}
.box-0 {
  width: 100px;
}

sass

$count : 3;

.box11{
    @if($count > 4){
        width : 100px + $count;
    }
    @else{
        width : 10px + $count;
    }
}

@for $i from 0 through 2{
    .box-#{$i}{
        width : 100px + $i;
    }
}
**********************编译******************
.box-0 {
  width: 100px;
}

.box-1 {
  width: 101px;
}

.box-2 {
  width: 102px;
}

7.转义（Escaping）

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。

padding: 12px / 2px;
***************************编译********************
padding: 6px;

padding: ~"12px / 2"
***************************编译********************
padding: 12px / 2

在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了。

8.函数（Functions）

less

https://less.bootcss.com/functions/

• Less 函数
• Logical Functions
• String Functions
• List Functions
• Math Functions
• Type Functions
• Misc Functions
• Color Definition Functions
• Color Channel Functions
• Color Operation Functions
• Color Blending Functions

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

继承

.line{
    display:inline;
}
.box1{&:extend(.line)}
.box2{&:extend(.line)}
***************************编译********************
.line,.box1,.box2{display:inline;}

sass

https://sass-lang.com/documentation/modules

• 该sass:math模块提供对数字进行运算的功能。
• 该sass:string模块使组合，搜索或拆分字符串变得容易。
• 该sass:color模块根据现有颜色生成新颜色，从而轻松构建颜色主题。
• 该sass:list模块使您可以访问和修改列表中的值。
• 该sass:map模块可以查找与map中的键关联的值，等等。
• 该sass:selector模块提供对Sass强大的选择器引擎的访问。
• 该sass:meta模块公开了Sass内部工作的细节。

p {
  color: hsl(0, 100%, 50%);
}
p {
  color: #ff0000; }

自定义函数

@function sum($n,$m){
    @return $n+$m;
}

继承

.line{
    display:inline;
}
.box1{@extend .line }
.box2{@extend .line }
***************************编译********************
.line,.box1,.box2{display:inline;}

%line{
    display:inline;
}
.box1{@extend %line }
.box2{@extend %line }
***************************编译********************
.box1,.box2{display:inline;}

9.作用域（Scope）

less–作用域无序

@number:123px;
.box{
    height:@number;
    @number:456px;
    width:@number;
}
***************************编译********************
.number{
    height:456px;
    width:456px;
}

sass–作用域有序

$number:123px;
.box{
    height:$number;
    $number:456px;
    width:$number;
}
***************************编译********************
.number{
    height:123px;
    width:456px;
}

10.注释（Comments）

less

//单行注释

/*
多行注释，会编译出来
*/

sass

编译后第一行添加@charset ‘UTF-8’

//单行注释

/*
多行注释，会编译出来
*/

11.导入（Importing）

less

@import './reset.less';
***************************编译********************
* {
  margin: 0;
  padding: 0;
}

sass

@import './reset.scss';
***************************编译********************
*
* {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

12.媒体查询@media–all

.box{
    width:100px;
    @media all and (min-width:768px){
        width:600px;
    }
    @media all and (min-width:1440px){
        width:900px;
    }
}
***************************编译********************
.box{width:100px;}
@media all and (min-width:768px){
    .box{width:600px;}
}
@media all and (min-width:1440px){
    .box{width:900px;}
}

tation/values/numbers)功能。

• 该sass:string模块使组合，搜索或拆分字符串变得容易。
• 该sass:color模块根据现有颜色生成新颜色，从而轻松构建颜色主题。
• 该sass:list模块使您可以访问和修改列表中的值。
• 该sass:map模块可以查找与map中的键关联的值，等等。
• 该sass:selector模块提供对Sass强大的选择器引擎的访问。
• 该sass:meta模块公开了Sass内部工作的细节。

p {
  color: hsl(0, 100%, 50%);
}
p {
  color: #ff0000; }

自定义函数

@function sum($n,$m){
    @return $n+$m;
}

继承

.line{
    display:inline;
}
.box1{@extend .line }
.box2{@extend .line }
***************************编译********************
.line,.box1,.box2{display:inline;}

%line{
    display:inline;
}
.box1{@extend %line }
.box2{@extend %line }
***************************编译********************
.box1,.box2{display:inline;}

9.作用域（Scope）

less–作用域无序

@number:123px;
.box{
    height:@number;
    @number:456px;
    width:@number;
}
***************************编译********************
.number{
    height:456px;
    width:456px;
}

sass–作用域有序

$number:123px;
.box{
    height:$number;
    $number:456px;
    width:$number;
}
***************************编译********************
.number{
    height:123px;
    width:456px;
}

10.注释（Comments）

less

//单行注释

/*
多行注释，会编译出来
*/

sass

编译后第一行添加@charset ‘UTF-8’

//单行注释

/*
多行注释，会编译出来
*/

11.导入（Importing）

less

@import './reset.less';
***************************编译********************
* {
  margin: 0;
  padding: 0;
}

sass

@import './reset.scss';
***************************编译********************
*
* {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

12.媒体查询@media–all

.box{
    width:100px;
    @media all and (min-width:768px){
        width:600px;
    }
    @media all and (min-width:1440px){
        width:900px;
    }
}
***************************编译********************
.box{width:100px;}
@media all and (min-width:768px){
    .box{width:600px;}
}
@media all and (min-width:1440px){
    .box{width:900px;}
}