CSS 小技巧
/* text-indent 可用来设置段落缩进，单位可以是 px 也可以是 em，1em 表示段落中一个文字的宽度； */
text-indent: 2em;
/* 能让文本、span 标签、a 标签、input 标签、img 标签居中，注意要设置在这些元素的父元素上； */
text-align: center;
/* 可以让固定宽度的盒子元素水平居中，如 div、p、h； */
margin: 0 auto;
/* line-height 可以用来设置文本行高，当**单行文本**的行高等于父元素的高度时，就实现了垂直居中的效果； */
/* 当设置: */
line-height: 1;
/* 表示清除行高以去除文字的上下间距； */
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < `属性值 !important;`，`!important` 不能提升继承样式优先级，实际开发不建议使用 `!important`；
/* box-sizing 是 CSS3 中的属性，能够完成盒子模型自动内减。比如： */
div {
width: 300px;
height: 300px;
padding: 30px;
border: 10px solid #000;
box-sizing: border-box;
}
/* 此时对应元素的宽高就是实际盒子元素的宽高，内边距和 border 不会撑大盒子； */
相对定位（position: absolute）会使作用的元素脱离标准流，而绝对定位（position: relative）不会。
1. 祖先元素中没有定位时，默认相对于浏览器界面进行移动；
2. 祖先元素中有定位时，相对于最近的、有定位的祖先元素进行移动；
标准流、浮动、定位元素之间的层级关系是：标准流 < 浮动 < 小于定位。
相对（relative）、绝对（absolute）、固定（fixed）默认层级相同，此时 HTML 中写在下面的元素层级更高，会写在上面的元素。
可以通过 z-index 更改元素的层级，值越大，层级越高。
/* 默认，基线对齐 */
vertical-align: baseline;
/* 顶部对齐 */
vertical-align: top;
/* 中部对齐 */
vertical-align: middle;
/* 底部对齐 */
vertical-align: bottom;
/*
可以解决的问题：
1、文本框和表单按钮无法对齐的问题；
2、`input` 和 `img` 无法对齐的问题；
3、`div` 中的文本框无法贴顶的问题；
4、`div` 不设高度由 `img` 标签撑开，此时 `img` 标签下面会存在额外间隙问题；
5、使用 `line-height` 让 `img` 标签垂直居中问题；
*/
border-radius 可以设置边框圆角。
可以利用它画一个正圆：
1. 盒子必须是正方形；
2. 设置边框圆角为盒子宽高的一半，也可直接设置 border-radius: 50%;
画一个胶囊按钮：
1. 盒子要求是长方形；
2. 设置 border-radius 为盒子高度的一半；
如下两种方式可以让页面中的元素隐藏：
1. visibility: hidden; 隐藏在网页中依旧占位置；
2. display: none; 隐藏后在网页中不占位置；（常用，元素显示值为 block）
background-color rgba(255,0,0,0.5); 可以让指定元素背景变透明；
opacity: 0.5; 可以让指定元素包括元素的子元素、文字本身变透明；
/* 让相邻表格边框进行合并，得到细线边框效果 */
border-collapse: collapse;
a:link {}; 选中未访问过的状态；
a:visited {}; 选中访问过之后的状态；
a:hover {}; 选中鼠标悬停的状态
a:active {}; 选中鼠标按下的状态；
注意：如果要同时实现以上四种状态，需要严格按照以上顺序编写样式。
.box {
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
border-right: 100px solid cadetblue;
}
/* 更改三角形的形状可以通过修改盒子宽高实现 */
.box {
width: 24px;
height: 24px;
background: url("taobao.png") 0 -308px;
/* background: url("imageUrl") x y;
x y 取负值
*/
}
div {
width: 300px;
height: 300px;
background: url('<image_url>') no-repeat;
background-size: <width>px <height>px; 简单方便、常用
background-size: 100% 100%; 百分比
background-size: contain; 包含，将背景图片等比例缩放，直到不会超出盒子的最大
background-size: cover; 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白
}
格式：background: color image repeat position/size
例：background: url('1.jpg') no-repeat center center/400px 400px;
div {
width: 200px;
height: 200px;
background-color: red;
transition: all 1s; /* all: 选择到所有能过渡的样式 */
transition: width 1s, color: red 1s; /* width: 只过渡 width 和 color 样式 */
}
div:hover {
width: 800px;
}
注意：transition 属性需要给过渡的元素本身加；
1. 给默认状态设置，鼠标移入移除都有效果；
2. 给 hover 状态设置，鼠标移入有过渡效果，移除没有；
完整写法：
<link rel="shortcut icon" href="<ico_path>" type="image/x-icon">
简写：
<link rel="icon" href="<ico_path>">
1. 布局属性 display|position|float|clear|visibility|overflow
2. 盒子模型+背景 width|height|margin|padding|border|background
3. 文本内容属性 color|font|text-decoration|text-algin|line-height
4. 点缀属性 cursor|border-radius|text-shadow|box-shadow
注意：开发中推荐使用类+后代，但层级并不是越多越好，一个选择器中的类选择器的格式推荐不超过三个。
1. 直接给浮动元素的父元素设置高度（高度已知）；
2. 给浮动元素的父元素加上 overflow: hidden|auto; 该方式会自动找高，加了 overflow 属性后元素开启了 BFC（块级格式上下文），变为独立的一块，子元素不会在布局上影响父元素；
3. 给受影响的元素加上 clear: left|right|both; 父元素的高度没有找到；
4. 在浮动元素的父元素尾部新增一个空的 div 元素，并给该 div 设置 clear: both；
5. 伪对象法，给浮动元素的父元素设置 css 实现 <4> 的效果：
浮动元素的父元素::after {
content: "";
display: block;
clear: both;
}
标准盒模型实际大小：
width + padding + border + margin（width 只包含内容区域）
height + padding + border + margin（height 只包含内容区域）
怪异盒模型实际大小：
width + margin-left + margin-right（width 包含了 content + padding + border）
height + margin（height 包含了 content + padding + border）
盒模型转换：
box-sizing: content-box；/* 默认值：标准盒模型 */
box-sizing: border-box: /* 怪异盒模型 */
自动内减原理就是使用的怪异盒模型。
开启弹性盒模型：
display: flex;
子元素默认水平排列；
float 在弹性盒模型中不生效；
设置子元素的排列方式：
flex-direction:
row: 默认值，子元素从左往右排列；
row-reverse: 子元素从右往左排列；
column: 子元素从上往下排列；
column-reverse: 子元素从下往上排列；
设置子元素在主轴的对齐方式：
默认主轴为 x 轴，侧轴为 y 轴；当子元素垂直排列（flex-direction: column）时，y 轴为主轴，x 轴为侧轴；
justify-content:
flex-start: 默认值，主轴开始；
flex-end: 主轴结束；
center: 主轴居中；
space-around: 在子元素四周分配父元素剩余的空间，两端的空间时中间的 1/2；
space-between: 在子元素之间平均分配父元素剩余的空间；
设置子元素在侧轴的对齐方式：
align-items:
flex-start: 默认值，侧轴开始；
flex-end: 侧轴结束；
center: 侧轴居中；
写在子元素上的属性：
flex-grow: number; 设置子元素占父元素剩余空间的比例；