css选择器
介绍
css学习整理的一些选择器以及属性啥的，顺手放上来的。
.panel.large 同时具有.panel.large 两个class配置的元素
.panel > .large： panel子元素里是large的元素
.panel ~ .large： large父元素里是panel的元素
.panel , .large： large或panel元素
line-height 在没有配置单位时，值等于当前字体大小的倍数，由于line-height 是可继承的，所以在存在子元素时，父元素的line-height 不要配置成em单位，因为这样继承下去的就是具体值，如果子元素有不同字号，那么就会出现意想不到的问题，如文字重叠
box-sizing 是一个CSS属性，用于改变元素的盒模型组成模式。它可以有两个值：
1、content-box：这是默认值。在此模式下，元素的宽度和高度只包括内容区域，不包括边框（border）、内边距（padding）和外边距（margin）。
2、border-box：在此模式下，元素的宽度和高度包括内容、边框和内边距，但不包括外边距。这意味着如果你指定了元素的宽度和高度，那么任何边框和内边距将在指定的宽度和高度内进行绘制。
3、inherit：指定属性可以被子组件继承
用 overflow 属性可以控制溢出内容的行为，该属性支持以下 4 个值。
visible（默认值）——所有内容可见，即使溢出容器边缘。
hidden——溢出容器内边距边缘的内容被裁剪，无法看见。
scroll——容器出现滚动条，用户可以通过滚动查看剩余内容。在一些操作系统上，会
出现水平和垂直两种滚动条，即使所有内容都可见（不溢出）。不过，在这种情况下，滚
动条不可滚动（置灰）。
auto——只有内容溢出时容器才会出现滚动条。
overflow 默认配置垂直方向的内容，可以用 overflow-x 属性单独控制水平方向的溢出，或者用 overflow-y 控制垂直方向
溢出。这些属性支持 overflow 的所有值，然而同时给 x 和 y 指定不同的值，往往会产生难
以预料的结果。
.media:nth-child(odd) {
clear: left;
}
选中media的子组件单数组件，其中odd可以改为event表示偶数；另外也可以通过n函数表示其他类型，如.media:nth-child(3n+1){}。也可以是具体数字表示第几个，从1开始（1表示第一个）
[class*="column-"]：选择class里带有"columon-"的组件；[class="column-"]则是选择class里以"column-"开头的组件
.site-nav > li > a 后代选择器，选择class有"site-nav"下的li标签下的a元素
margin-block-start： 0.2em 在元素上面增加外边距
margin-block-end： 0.2em 在元素下面增加外边距
后代选择器还可以和相邻兄弟选择器组合使用
.site-nav > li + li {
margin-left: 1.5em;
} 含义是选择class包含"site-nav" 下的li下一个相邻的li元素
.button-link + .button-link {
margin-top: 1.5em;
}
相邻兄弟选择器：选择相同父组件下相邻组件的后面一个组件。这里只给紧跟在其他 button-link 后面的 button-link 加上顶部外边距
猫头鹰选择器： * + * {}。和相邻兄弟选择器的区别是会选择所有具有前缀元素的元素，只需要在同一个父类下即可。如果是 body * + * {}，则会限定选择body下相同元素的样式
.login-form h3{} 与 .login-form > h3{} 区别
前者会选择login-form 下所有的 h3 元素，不管是哪一级的，而后者只会选择 login-form 下一级的 h3 元素。
.login-form input:not([type=checkbox]):not([type=radio]) :选择login-form 下 input 标签，但是类型表示checkbox、radio类型的元素
text-decoration:配置文字下划线样式
none：无修饰。
underline：下划线。
overline：上划线。
line-through：删除线。
blink：闪烁（已被废弃，不建议使用）。
class元素:hover{} 表示鼠标移上去触发
class元素:active{} 表示鼠标点击后触发
class元素:focus{} 表示鼠标获取到焦点时触发（一般会伴随点击或者键盘按键）
transform: translateY(0.1em)
将当前元素沿y轴移动0.1em
display:block紧接着的元素一定会换行；换成inline-block就可以了
margin: 0 auto；配置上下外边距为0，左右居中显示。仅在块级元素下，同时当前元素和父元素配置了宽度才会生效
可以margin-top:0 配合 父元素的display: flex;justify-content: center;align-items: center; 实现子元素在副轴上的登高。至于为什么不直接用align-items:flex-start来配置，这是因为一旦配置了flex，字体所占的高度就会由line-height与em-box共同组成，line-height可以通过配置制定，而em-box则会根据font-size增加而自动增加，这样使用align-items:flex-start就会失效。
text-indent:缩进首行文本内容，正数向右，负数向左
white-space：配置元素内容空格的处理方式
normal：默认值，合并空格，忽略源代码中的换行符，根据容器大小自动换行。
nowrap：与normal一样，合并空格，但忽略源代码中的换行符，不换行。
pre：保留空格和源代码中的换行符，不自动换行。
pre-wrap：保留空格和源代码中的换行符，自动换行。
pre-line：合并空格，保留源代码中的换行符，自动换行。
border-color: black transparent transparent; border-color如果设置1个值，那么四部分都是同一个颜色，如果设置多个，就和padding、margin一样，按上右下左的顺序，少于四个就按对边颜色相同分配。transparent 则配置为透明。利用这点可以去创建一个三角形（前提是）（或者其他形状）
CSS的content属性主要用于在元素的::before和::after伪元素中插入内容。其值可以是文本、图片或其他可替换元素
background-color设置背景颜色；设置的范围可以通过background-clip配置
border-box：默认值，背景被绘制在边框下面，即背景会延伸到边框所在的区域下层。
padding-box：背景被绘制在内边距下面，即背景不会延伸到边框下面，但会延伸到内边距的区域。
content-box：背景只被绘制在内容区域内，即背景不会延伸到内边距和边框下面。
border-spacing可以配置表格单元格与单元格之间、表格与单元格之间的间隙。 border-spacing: 1.5em 0 （分别指代水平间距以及垂直间距）
*,
::before,
::after {
box-sizing: border-box;
}
用通用选择器（*）选中了页面上所有元素，并用两个选择器选中了网页的所有伪元素
将这段代码放到样式表开头已是普遍做法了。这样的缺点是如果引入了第三方组件那么第三方组件的样式就可能会受到影响，所以对于引入的组件就需要额外去指定样式
margin: 0 auto; 可以在当前元素配置了宽度，且宽度小于父元素宽度时生效，会自动计算当前元素的外边距，并在父元素中居中。但是auto对高度不生效，也就是不会高度居中，同时对内边距padding的属性也不会生效
margin-left: auto; 会在flex、block布局下自动将位置放在最右边
