«

基础知识整理-2-CSS

codeyx 发布于 阅读：53 笔记

CSS 表示层叠样式表（Cascading Style Sheet）。
MDN 中的解释：CSS 不是真正的编程语言，也不是标记语言，它是一门样式表语言。
CSS 提供了三种方法，可以将 CSS 样式应用到元素上：
内联样式（inline style）
内部样式表（internal style sheet）
外部样式表（external style sheet）

注释：/* 注释内容 */

内嵌式：在 head 标签对中通过在 style 标签里写样式。
外链式：将 css 存储为单独的 css 文件，通过 link 标签引入。ref=“stylesheet"
导入式：@import url(css/css.css)，导入式不会等待 css 文件加载完毕，而是会立即渲染 html 结构，所以页面会有几秒钟的“素面朝天”。
行内式：直接通过 style 属性写在标签上，没有批量设置能力。使用 link 链入外部样式，页面加载时，会同时加载页面，保证页面的内容和样式同时展现。
使用导入式，页面加载完后，才会加载样式，所以再打开页面时会先看到页面内容，才看到被渲染样式的内容。

css 选择器：传统 css2.1 选择器：标签和 id 选择器、class 选择器、复合选择器、伪类
css3 新增选择器：元素关系选择器、序号选择器、属性选择器、css3 新增伪类、伪元素

text-decoration 用于设置文字的装饰线。
text-transform 用于设置文字的大小写转换
text-indent 用于设置第一行内容的缩进，块级元素可用
text-align 定义行内内容（例如文字）如何相对它的块级父元素对齐
letter-spacing 设置字母之间的间隙
word-spacing 设置单词之间的间隙
解决图片下边缘间隙：
1.vertical-align 设置成 top/middle/bottom 2.将图片设置为 block 元素

ul {
  list-style: none;
} // 去掉无序列表的小圆点。
a {
  text-decoration: none;
} // 去掉超级连接的下划线。

id 属性，只能由字母、数字、下划线、短横构成。数字不能开头

复合选择器：

| 后代选择器 | .box .spec | 选择类名为 box 的标签内部的类名为 spec 的标签 |
| 交集选择器 | li.spec | 选择既是 li 标签，又有 spec 类名的标签 |
| 并集选择器 | ul, ol | 选择所有 ul 和 ol 标签 |

伪类是指定要选择的元素的特殊状态。a 标签有四个：

| a:link | 没有被访问的超链接 |
| a:visited | 被访问过的超链接 |
| a:hover | 正在被鼠标悬停的超链接 |
| a:active | 正在被激活的超链接（按下按键但还没有松开） |

链接伪类的顺序，a:hover 必须置于 a:link 和 a:visited 之后，才有效，a:active 必须在 a：hover 之后，才有效。
而 link、visited 两个伪类之间顺序无所谓，谁在前都可以。

| 子选择器 | div>p | div 的子标签 p |
| 相邻兄弟选择器 | img+p | 图片后面紧跟着的段落将被选中 |
| 通用兄弟选择器 | p⁓span | p 元素之后的所有同层级 span 元素 |

序号选择器：

| :first-child | 第一个子元素 | IE7 |
| :last-child | 最后一个子元素 | IE9 |
| :nth-child(3) | 第三个子元素 | IE9 |
| :nth-of-type(3) | 第三个某类型子元素 | IE9 |
| :nth-last-child(3) | 倒数第三个子元素 | IE9 |
| :nth-last-of-type(3) | 倒数第三个某类型子元素 | IE9 |

nth-child()可以写成 an+b 的形式，表示从 b 开始每 a 个选一个。不能写成 b+an2n+1 等于 odd，表示奇数。2n 等价于 even，表示偶数

属性选择器：

| img[alt] | 选择有 alt 属性的 img 元素 |
| img[alt="故宫"] | 选择 alt 属性是“故宫”的 img 元素 |
| img[alt^="北京"] | 选择 alt 属性以北京开头的 img 元素 |
| img[alt$="夜景"] | 选择 alt 属性是以“夜景”结尾的 img 元素 |
| img[alt*="美"] | 选择 alt 属性中含有“美”字的 img 标签 |
| img[alt⁓="手机拍摄"] | 选择 alt 属性中有空格隔开的“手机拍摄”字样的 img 标签 |
| img[alt|="参赛作品"] | 选择 alt 属性以“参赛作品-”开头的 img 标签 |

新增伪类：

| :empty | 选择空标签 |
| :focus | 选择当前获得焦点的表单元素 |
| :enabled | 选择当前有效的表单元素 |
| :disabled | 选择当前无效的表单元素 |
| :checked | 选择当前已经勾选的单选按钮或者复选框 |
| :root | 选择根元素，即 html 标签 |

伪元素：伪元素用双冒号表示，IE8 兼容单冒号。
::before 和 ::after 常用于清除浮动或者一些小图标
::selection 文档中被高亮的部分（被圈住的）
::first-letter 会选中某元素中(必须是块级元素)第一行的第一个字母
::first-line 会选中第一行的全部文字。

层叠性：多个选择器可以同时作用于同一个标签，效果叠加。
权重：id 权重>clss 权重>标签权重
！important 提升权重
可通过(id 的个数，class 的个数，标签的个数)组成三位数比大小。

img 标签属于行内可替换元素，并不是 inline-block。
不要在 p 元素中放 div 元素
行内元素内不要放块级元素
块级元素的默认 width 是 auto 并非 100%
outline 表示元素外轮廓，在 border 外边，不占空间。
行内元素设置 margin-top/bottom 无效，left/right 有效
行内元素的 padding 上下会被撑开但不占空间。
line-height 无法撑起行内非替换元素。

设置 color 时，rgba 表示法兼容到 IE9，不如 16 进制和 rgb 兼容好。

text-decoration:line-through 删除线
font-style:italic 字体倾斜
font-family 设置字体，英语字体放前面，汉语放后面。
@font-face 定义字体

line-height 行高 可以是 px 的数值，也可以是 1.5 这种代表字号的倍数。
也可以是百分数 150%等于 1.5，都是字号的 1.5 倍。
line-height 继承：写具体数值比如 30px 就继承该值、如果是小数(比例)1.5 或者 2，就继承比例，最终行高是子元素的 fontsize 乘比例。
百分比的话就是继承百分比计算出来的值，200% x 父元素的 fontsize 。
单行文本垂直居中设置行高等于盒子高。

font属性是合写属性：font-style、font-weight、font-size/line-height、font-family 使用合写属性时必须设置 font-size 和 font-family 才能生效。

有继承性的：color、font-开头的、list-开头的、text-开头的、line-开头的继承的情况下有个就近原则，选择器权重计算会失效。（离目标越近的会生效）
盒模型：盒子默认的宽高是盒子内容的宽高，设置box-sizing:border-box;就是以边框为宽高
padding 用三个数值的时候是上、左右、下。
box-sizing 属性兼容到 IE9

margin 在竖直方向有塌陷现象，小的 margin 会塌陷到大的 margin 里，从而 margin 不叠加，只以大值为准。
margin 传递问题，（子元素有 margin-top 父元素也被带下来了）如果底部和父元素重合并且父高度 auto，会产生 margin-bottom 传递。
建议父子之间使用 padding，兄弟之间使用 margin
怎么解决：
1 给父元素设置padding-top替代子元素的 margin-top
2 给父元素设置overflow:hidden
3 父元素加上border
4 子元素设置浮动
5 父元素设置浮动
6 子绝父相定位

块级元素：不并排显示、能设置宽高、width 自动撑满
行内元素：并排显示、不能设置宽高、width 自动收缩
行内块：并排显示、能设置宽高

display:none可以将元素隐藏，元素会放弃位置，跟没写一样,但在 DOM 中是存在的
visibility:hidden隐藏元素，不放弃位置

浮动的最本质功能就是来实现并排。要浮动都要浮动，父盒子要有足够的宽度，否则子元素会掉下去。

浮动的元素不在区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是 span 或者 a 标签等。
右浮动会倒叙显示。

BFC 规范：块级格式化上下文，是页面上一个独立的容器，里面的元素不会影响外面的，外面的也不会影响里面的。
例子：如果一个盒子不设置 height，当他的子元素都浮动时，无法撑起他自身。是因为这个盒子没有形成 bfc

怎么形成 BFC：
1 让盒子浮动（float 的值不是 none）
2position 的值不是 static 或 relative（设置成 flex 固定定位或 absolute 绝对定位）
3display 的值是 inline-block、flex 或者 inline-flex
4overflow：hidden（溢出边框才会隐藏）
IE6、7 浏览器使用 haslayout 机制，和 BFC 规范略有差异，比如 IE 浏览器可以用zoom:1属性“让盒子拥有 layout”
BFC 可以取消盒子 margin 塌陷、可以阻止元素被浮动元素覆盖。

清除浮动的方法：
1 让内部有浮动的父盒子形成 BFC，他就能关住内部的浮动，此时最好的办法就是overflow:hidden
2 给后面的父盒子设置clear:both属性。clear 表示清除浮动对自己的影响，both 表示左右浮动都清除
（缺点，margin-top 会失效，因为会往上踹一个没有高度的盒子）
3 使用::after 伪元素给盒子添加最后一个子元素，并且给 after 设置clear:both，注意要给 after 转为块级元素。

绝对定位不会影响其他元素，但是会对其他元素形成压盖。
脱离标准文档流的方法：浮动、绝对定位、固定定位绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子作为基准。
绝对定位脱离文档流后就不能用 margin:0 auto 的方式水平居中了
通过绝对定位让盒子垂直居中：

position: absolute;
top: 50%;
margin-top: -自己高度的一半;

border 线形：solid 实线、dashed 虚线、dotted 点状线
border-radius 的值通常是 px 代表圆的半径，百分号时代表从一条边的百分之多少的地方开始
border-radius 有三个值得话，第一个值表示对左上角的设置，第二个值表示对右上角和左下角的设置，第三个值表示对右下角的设置。
border-radius 有两个属性值的话，第一个值表示左上角和右下角，第二个值表示右上角和左下角。

盒子阴影：box-shadow：x 偏移 y 偏移 模糊量 【可选延展值(向四个方向扩散)】颜色内阴影：在 x 偏移前加 inset 即可。用逗号隔开就可以多阴影了。
在线测试阴影：https://html-css-js.com/css/generator/box-shadow/
text-shadow 文本阴影

背景与渐变：padding 区域有背景颜色 background-size 用来设置背景图片的尺寸兼容到 IE9，之前的 bgc 和 bgr 可以到 IE6

background-size 属性用来设置背景图片的尺寸，兼容到 IE9

background-size: 100px 200px 宽度 高度;

值也可以用百分数来设置，表示为盒子宽、高的百分之多少，需要等比例设置的值写 auto

背景裁切：
background-clip 属性用来设置元素的背景裁切到哪个盒子，兼容到 IE9
默认值是 border-box 背景延伸到边框。
padding-box 背景延伸至内边(padding)不会绘制到边框处，仅在 dotted、dashed 边框可察觉。
content-box 背景被裁剪到内容区

背景起源：background-origin
背景固定：background-attachment 它决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

| fixed | 自己滚动条不动，外部滚动条不动 |
| local | 自己滚动条动，外部滚动条动 |
| scroll | 自己滚动条不动，外部滚动条动（默认值） |

overflow:scroll超出部分有滚动条
background-position 可以设置背景图片出现的位置。
合写属性：background:背景颜色 背景图片 背景重复 背景位置 线性渐变

background-image 属性可以用 linear-gradient()创建线性渐变背景

background-image: linear-gradient(to right, blue, red) 渐变方向 开始颜色 结束颜色;

也可以写成度数，比如将 to right 替换成 180deg
可以有多个颜色值，并用百分数来定义它们出现的位置

linear-gradient(to bottom, blue, yellow 20%, red) //在20%处变黄色

径向渐变：
radial-gradient(50% 50%, red,blue) 【圆心坐标】
2d 与 3d 变形transform:rotate(45deg) 平面的盒子旋转 45 度，正值顺时针，负值逆时针
transform-origin:设置变换的原点，0 0 意思是左上角。
transform:scale(3)缩放属性，大于一放大、小于一缩小。
transform:skew(x斜切角度，y斜切角度)斜切变形
transform:translate(向右移动多少，向下移动多少) 位移，和相对定位类似，老家留坑形影分离相对定位兼容到 ie6 这个兼容到 ie9

不同浏览器的私有前缀，用来对实验性质的 CSS 属性加以标识

| Chrome | -webkit- |
| Firefox | -moz- |
| IE、Edge | -ms- |
| 欧朋 | -o- |

3D 旋转
将 transform 属性的值设置为 rotateX()或者 rotateY()，即可实现绕横轴、纵轴旋转
perspective 属性用来定义透视强度，可以理解为“人眼到舞台的距离”单位是 px
一定记住，空间移动要添加在 3D 旋转之后

transform: rotateX(30deg) translateX(30px) translateZ(100px);

CSS3 新增 transition，自动添加补间动画，从 IE10 开始兼容，内存开销小

transition: 需要过渡的属性 动画时长 速度变化曲线 延迟时间;

哪些属性可以参加过渡：
所有数值类型的属性都可以参加过渡，比如 width、height、left、top、bofder-radius 等
背景颜色和文字颜色都可以参加过渡
所有变形（2D、3D）

网站https://cubic-bezier.com 可以生成贝塞尔曲线，自定义动画缓动参数

动画的定义：
可以使用@keyframes 来定义动画，keyframes 表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

@keyframes r {
  // 动画的名字
  from {
    // 初始状态
    transform: rotate(0);
  }
  to {
    // 结束状态
    transform: rotate(360deg);
  }
}
/* 调用动画 */
animation: r 1s linear 0s 可选次数; // 如果希望永远执行填写infinite

如果需要动画偶数次自动逆向执行，加上 alternate 参数即可。

animation: movelr 2s linear 0s infinite alternate;

如果需要动画停在最后结束状态，加 forwards

animation: movelr 2s linear 0s forwards;

offsetWidth = 内容宽度+内边距+边框
当设置了box-sizing:border-box时 设置的 width 就等于 offsetWidth(一个元素的总宽度)

margin 负值：
margin-top 和 margin-left 负值，元素向上、向左移动
margin-right 负值，右侧元素左移，元素自身不受影响
margin-bottom 负值，下方元素上移，自身不受影响
圣杯布局和双飞翼布局的目的：
三栏布局，中间一栏最先加载和渲染，两侧内容固定，中间内容随宽度自适应，一般用于 PC 网页

// 圣杯 .container
父元素，设置padding-left是left的宽度、padding-right是right的宽度
设置最小宽度两个padding和一个盒子的 center 宽度100% left 宽度固定px
margin-left:-100%
这里是父元素的宽度哦，这样它就移动到和center同样的位置了。然后再设置position:relative
right:left的宽度 right 宽度固定px margin-right:-自身宽度 相当于它没有宽度了
全部float:left // 双飞翼 center with100%
【它里面有个wrap无float，左右margin是下面两个的宽】 left 固定宽
margin-left:-100% right 固定宽 margin-left:-自身宽度 所有float：left

clearfix 清除浮动，写在有浮动的父元素中，用来封住浮动

.clearfix::after{ content:''; display:table; clear:both; } .clearfix{ *zoom:1;
兼容IE低版本 }

一些题目：

FC - Formatting Context，元素在标准流里面都是属于一个 FC 的
块级元素都是在 BFC 中布局的。行内元素在 IFC。
BFC 可以看作是一个独立的容器，其中的元素布局和渲染遵循特定的规则，与外部的元素相互独立。
MDN 上整理出在哪些具体的情况下会创建 BFC：
根元素（html）
 浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
 行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML 表格单元格默认为该值），表格标题（元素的 display 为 table-caption，HTML 表格标题默认为该值）
 匿名表格单元格元素（元素的 display 为 table、table-row、table-row-group、table-header-group、table-footer-group（分别是 HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
overflow 计算值（Computed）不为 visible 的块元素
 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
 display 值为 flow-root 的元素

BFC 的作用：
在 BFC 中，box 会在垂直方向上一个挨着一个的排布
垂直方向的间距由 margin 属性决定
在同一个 BFC 中，相邻两个 box 之间的 margin 会折叠
在 BFC 中，每个元素的左边缘是紧挨着包含块的左边缘

1.解决 margin 折叠问题，让两个 box 所属于不同的 BFC 即可。 2.解决浮动高度塌陷（但不能解决绝对定位元素的高度塌陷），事实上要使用 BFC 解决高度塌陷需要满足两个条件：
浮动元素的父元素触发 BFC，形成独立的块级格式化上下文
 浮动元素的父元素的高度是 auto（默认就是 auto）
原因解析，根据官方文档所述，当 BFC 的高度是 auto 时，它的高度是如下计算的： 1.如果子元素只有 inline-level，它的高度是行高的顶部和底部的距离 2.如果有 block-level，它的高度是由最底层的块上边缘和下边缘之间的距离 3.如果子元素是绝对定位元素，它的高将被忽略 4.如果有浮动元素，那么增加高度以包含这些浮动元素的下边缘

CSS3 并不是一个单一的规范，而是一系列独立模块的集合，这些模块扩展了 CSS 的功能。
选择器：属性选择器、结构性伪类（nth-child、nth-last-child、first-of-type）
背景和边框：边框图片（border-image 允许使用图片创建边框）、多重背景（在单个元素上使用多个背景图片）
文本效果：文本阴影（text-shadow）、文本溢出（text-overflow）
转换和动画：2D/3D 转换（transform）、CSS 动画（animation）

通常会采取哪些措施来确保网站或者应用在不同浏览器上的兼容性？
在现代工程化的开发架构下，大多数的浏览器兼容性问题是通过工程化中的配置项来解决的。
比如 browserslist 可以配置目标的浏览器或者 node 环境，然后在不同的工具中起作用。比如 autoprefixer/babel/postcss-preset-env 等，在进行正确配置后，打包时会自动根据目标环境添加 css 前缀、babel 代码转换等。
如果我们想要额外的适配，通常在项目中还会引入 normalize.css 和 polyfills 来添加特定的 CSS、JS 适配问题
还有一些针对移动端的比如移动端点击 300 毫秒延迟、移动端 1px 边框问题，都可以在特定的环境或需求下解决。
多查询 caniuse 网站
使用比如 BrowserStack 来测试

当我们浮动多个盒子时，为了让盒子有间距通常 margin-right，但因为最右侧的盒子也有外边距，就导致一行放不下，此时我们可以在所有盒子外面包一层并设置 margin-right 负值即可。

z-index 生效的条件需要元素的 position 属性设置为 absolute、fixed 或 relative

编码时可参考凹凸实验室代码规范：https://guide.aotu.io/
类名：公共类使用_隔开单词，专属类使用-隔开单词。

meta 标签有 charset（字符编码）、http-equiv、name 三种属性。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

作用：
告知 IE 浏览器去模仿哪一个浏览器的行为
 IE=edge，告知 IE8 去使用最高有效模式来模仿
name 属性值很多，具体可查看 MDN 文档

white-space 用于设置空白处理和换行规则。
text-overflow 用于设置文本溢出时行为，生效前提是 overflow 不为 visible

CSS 中的函数
比如常见的：rgb/rgba/translate/rotate/scale 等
还有一些：var 定义变量 /calc 计算 css 值 / blur 毛玻璃效果 / gradient 颜色渐变

媒体查询，提供给开发者针对不同设备需求进行定制化开发的一个接口。

物理像素（又称设备像素）
屏幕的硬件属性，每个像素都是一个真实的物理像素点
逻辑像素（又称设备独立像素）
因为不同屏幕的物理像素不同，操作系统为开发者抽象出的概念，便于开发。
CSS 像素
默认等于逻辑像素，可通过 screen.width 和 screen.height 获取电脑的逻辑像素
DPR
device pixel ratio 设备像素比，物理像素 / 逻辑像素 在 iPhone 的高清显示屏中这个比例可能是 2 或者 3。可通过 window.devicePixelRatio 获取

视口 viewport，在浏览器中可以看到的区域就是视口，fixed 就是相对视口定位的，在 PC 端中，不需要对视口进行区分，因为布局视口和视觉视口是同一个。
默认情况下，移动端的布局视口会大于视觉视口
在移动端可以将视口分为三种情况：布局视口、视觉视口、理想视口（概念来自 ppk）
https://www.quirksmode.org/mobile/viewports2.html
默认情况下，一个在 PC 端的网页在移动端会按照宽度 980px 来布局内容（布局视口），然后为了显示整个页面，它会将整个网页缩放。
当布局视口=视觉视口时，就是理想视口

为什么在移动端使用@2x、@3x 的图片？
有很多高分辨率的设备，比如 iphone15promax，为了适应不同的像素密度，UI 会提过多个版本的图像资源
@1x 基本尺寸、@2x 适用于 DPR=2 的设备、@3x 适用于 DPR=3 的设备
可通过媒体查询来设置不同的图像。

/* 针对2x屏幕 */
@media only screen and (min-device-pixel-ratio: 2) {
  .box {
  }
}
/* 针对3x屏幕 */
@media only screen and (min-device-pixel-ratio: 3) {
  .box {
  }
}

-webkit-min-device-pixel-radio 的问题：非标准特性，不建议生产环境使用。（MDN）
推荐使用另一个特性：resolution
resolution 媒体特性是 CSS 标准中用于查询设备显示密度的推荐方式
它支持多种单位，我们通常使用 dppx，1dppx 就相当于 1 逻辑像素对应一个物理像素。

/* 针对2x屏幕 */
@media only screen and (min-resolution: 2dppx) {
  .box {
  }
}
/* 针对3x屏幕 */
@media only screen and (min-resolution: 3dppx) {
  .box {
  }
}

移动端适配的目的是让页面元素，能够根据屏幕的大小而动态改变自身的大小，让整体比例相同。
常用的一些方案：rem 单位+动态 html 的 font-size、vw 单位、flex 弹性布局

// lib-flexible
// 拿到屏幕宽度（理想视口）html.clientWidth
window.addEventListener("resize", function () {
  // htmlFontSize = 屏幕宽度 / 10
});

推荐使用 webpack 插件：postcss-pxtorem
记得把根元素字体大小配置成设计稿/10 例如 75px 这样配合动态修改 htmlFontSize 就可实现与设计稿同样效果

10vw 就等于 75px，就可以省略 lib-flexible 的操作。
既然 vw 单位可用，那就不需要再使用 rem 单位。
推荐使用 webpack 插件：postcss-px-to-viewport-8-plugin
vscode 插件需要配置设计稿尺寸（cssrem）

在开发底部 tabbar 时，手机底部可能存在“安全区域”。通过 env(safe-area-inset-bottom)拿到，叠加底部 tabbar 高度。

什么是 1px 问题，如何解决，如何画出 0.5px 边框？
在移动端的设计稿中，通常宽度是 750px，设计稿中的 1px 在 375px 的设备内，应该是 0.5px
但是如果直接设置 0.5px 的话，一些设备特别是旧版本浏览器是不支持的。
目前常见的两种解决方式：
1.viewport+rem+div（淘宝）不推荐 2.伪类+transform（京东）推荐

.box {
  width: 100px;
  height: 100px;
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #000;
  transform-origin: 0 0;
  transform: scale(0.5);
}

移动端的一些事件：Touch 事件 touchstart touchmove touchend touchcancel
手势库：hammers.js
touch 事件点击穿透：原因就是 touch 事件会立刻触发而 click 会延迟 100 毫秒左右
解决方案，让遮罩层不要立即消失 ，消失的时候可以添加动画

click 事件 300ms 延迟：原因：double-tap to zoom
双击缩放解决方案：
1 不使用 click 事件，把 click 事件中要处理的放到 touchstart 或 touchend 中做
2 touch-action:manipulation
3 写完整 viewport，新的浏览器基本都支持了

<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>

4 针对老版本浏览器使用 Fastclick 库

css 预处理器 Less
@xxx 变量
& and 符号 代表当前选择器父级
mixins，还可以像 js 一样传参，并有参数默认值

.b_border(@bWidth:2px) {
  border: @bWidth solid #ccc;
}
.box {
  width: 100px;
  height: 100px;
  .b_border(4px);
}
.box2 {
  width: .box() [width] // 拿某一个属性，比如宽度
;
}

继承：与 mixins 相比，继承代码最终会转化成并集选择器

.bordered {
  border-bottom: 1px solid #ccc;
}
.box {
  &:extend(.bordered);
}
// 转化成css代码后是并集选择器的状态
.bordered,
.box {
  border-bottom: 1px solid #ccc;
}

Less 内置函数：

.box {
    color:color(red) // 将red转换成RGB的值
    width:convert(100px, "in") // 单位转换 px 转 in
    font-size:ceil(18.5px) // 数学 向上取整 19px
}

作用域，变量向上查找。
导入，和 css 一样的。

flex 有两个重要的概念：
开启 flex 布局的元素叫 flex 容器 flex container
 flex 里面的直接子元素叫 flex item

现象解释：flex 容器中的 item 自动将高度拉伸至容器高度，因为容器默认 align-items 的值为 normal，效果就等于 stretch（伸展）

flex item 是受 flex container 属性的设置来进行控制和布局，flex item 不再严格区分块级元素和行内元素，flex item 默认包裹内容，可设置宽高。
容器属性：
flex-direction 设置主轴方向，默认 row。从左往右横向。其他可选 row-reverse、column、column-reverse
flex-wrap 设置子元素是否可换行，默认 nowrap，可选 wrap、wrap-reverse
flex-flow 是上面两个属性的简写，任意顺序并且都可省略。
justify-content 设置子元素在主轴上的对齐方式，默认 flex-start 和主轴开始处对齐，可选 flex-end、center、space-between、space-around、space-evenly
align-items 设置子元素在交叉轴的对齐方式，具体可选参数可见图：

align-content 设置多行子元素在交叉轴上的对齐方式，与justify-content类似

子元素属性：
order 设置 item 的顺序，可设置任意整数，越小越靠前
align-self 设置单独子元素在交叉轴的对齐方式，可覆盖容器的 align-items
flex-grow 设置子元素如何拉伸，当在主轴上有空余空间时有效。
flex-shrink 默认值 1，决定子元素如何缩小，当子元素在主轴上的宽度超过了主轴长度才有效。值为 0 不压缩
flex-basis 用于设置元素在主轴方向上的基础尺寸，默认 auto
flex 是上方三个属性的缩写。 * 单值：当值是一个无单位的数字，会被当作 grow 的值，当值是一个有效宽度时，会被当作 basis 的值。none 时相当于 0 0 auto，auto 相当于 1 1 auto

grid 概念
grid container 容器
grid item （grid cell） 容器的直接子元素（又称单元格）
grid line （网格线）
grid track 两条相邻网格线之间的空间
grid area 由四条网格线包围的空间，比单元格的范围更广。

grid container 常用属性：
display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
 grid-gap
justify-items
align-items
place-items
justify-content
align-content
 place-content
grid-auto-columns
grid-auto-rows * grid-auto-flow
grid
grid item 常用属性：
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
place-self
fr 是分配剩余可用空间 auto 先于 fr 计算，获取必要的最小空间 repeat()简化重复的值