var() - CSS：层叠样式表 | MDN (mozilla.org)
在声明全局 CSS 变量时 :root 会很有用：
:root{
--main-color:hotpink;
--pane-padding:5px 42px;
}
一文搞懂flex
一文搞懂flex:0,1,auto,none - 掘金 (juejin.cn)
var() - CSS：层叠样式表 | MDN (mozilla.org)
flex-shrink: 0; 不压缩
一、CSS
复合选择器
1.交集选择器 p.beauty 且
2.并集选择器 .beauty,dog{}
3.ul li{} ul后代 .subject li
4.div>a{} 子代
5.相邻兄弟div+p div后紧紧相邻向下 通用兄弟 div~p div后所有兄弟向下
6.属性选择器[title]属性为title [title="fff"] 属性为title且值为fff [title^="f"]属性为title且值f开头 [title$="f"]属性为title且值f结尾 [title*="f"]属性为title且值包含f
7.链接伪类选择器a:link没有访问过的a；a:visited(很像类 但不是类是元素特殊状态的一种描述)；动态伪类a:hover悬浮 a:active 激活状态 顺序：lvha
链接伪类选择器a:link未选中 a:visited 点击过 a:hover鼠标经过 a:active鼠标正在按下未弹起；input:focus获得光标的input表单元素选取出来
8.（1）结构伪类：div>p:first-child 选中的是div的第一个儿子p元素
div p:first-child 选中的是div的后代p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子
css的元素显示模式
1.块元素 <div>占一行 可设置宽度 文字类元素不允许再放块级元素
2.行内元素 <span><a>（内联元素）宽高设置无效
3.行内块元素<img> <input><td> 空白间距 可设置宽度 行内可显示多个
4.显示模式转换
display:block 转换为块元素 行内转块
display:inline 转换为行内元素 块转行内
display:inline-block 转换为行内块元素
5.snipaste f1截图 f3钉屏幕上 alt取色 shift转换 esc退出
6.text-indent:2em 首行缩进2字符
垂直居中行高等于盒子高度（上空隙文字本身高度下空隙）
7.css的背景 background-image:none | url(url )
8. background-position: x y
9. background-attachment ： scroll fixed 背景固定屏幕中某个位置
10.背景复合属性 background 颜色 地址 重复 滚动 位置
背景半透明background :rgba
11.text-align 水平居中
12.层叠性，就近，相同选择器相同属性
13.继承性，文本颜色字号 font ：12px/24px 字号/行高 font ：12px/1.5
14.优先级
继承或者*（0，0，0，0） ； 元素选择器（0，0，0，1） ；类选择器，伪类选择器（0，0，1，0）；ID选择器（0，1，0，0）；行内样式style（1，0，0，0）;!important 重要的（无穷大）
15.复合选择器会有权重叠加问题
16.页面布局： 盒子模型 浮动 定位
17盒子模型： 内外边距 边框 内容
边框：粗细样式颜色
18.table,td
border-collapse:collapse相邻边框合并
19.宽高不包含边框 内边距（不指定宽高，不会撑开盒子） 上右下左 顺时针
20.块级元素 水平居中 margin：0 auto ( 指定宽度，左右外边距auto)
21.行内元素或者行内块元素水平居中给其父元素添加text-align:center即可
22.嵌套块元素垂直外边距的塌陷：对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有外边距，此时父元素会塌陷较大的外边距值
解决方案：可以为父元素定义边框；可以为父元素定义内边距；可以为父元素添加overflow:hidden
23.清除内外边距 *{padding：0； margin：0；}
24.行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以量
视图标尺像素放大（ctrl+）空格拖动 取消选区（ctrl+d）
25.p.preview--<p class="preview"></p>
<em>
ul>li*5>a快捷生成
shift
list-style:none
box-shadow
浮动
26.浮动 可以改变元素标签默认的排列方式。浮动可以让多个块级元素一行内排列显示
27.多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
18.float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
29.浮动元素会脱离标准流（脱标）；浮动的元素会一行内显示并且元素顶部对齐；浮动的元素会具有行内块元素的特性
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
