css备忘

1.0 禁止换行

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;  /* 使用省略号来代表被修剪的文本 */

2.0 CSS通过索引的方式选择元素

div:nth-child(1){

}

// 或

div:nth-of-type(1){
}

两者区别详见 ： https://sidoc.cn/doc/1227.html

3.0 CSS阴影

box-shadow: 3px 1px 12px 1px #c5c5c5;

4.0 flex下 overflow:auto 失效

如下，需要将height设为0，否则div内容无法滚动；

注：列表的height可以不为0，但父元素的overflow必须为hidden;

注：div的所有父级元素必须都是flex布局

/* 纵向滚动 */
div{
   display:flex;
   flex-direction:column;  
   flex-grow: 1;
   overflow:auto;
   height: 0px;  /* 解决flex下scroll无法滚动的问题 */
}

/* 横向滚动 */
div{
   display:flex;
   flex-direction:row;  
   flex-grow: 1;
   overflow:auto;
   width: 0px;  /* 解决flex下scroll无法滚动的问题 */
}

原因：因为flex元素默认是没有宽、高的，其宽、高默认由子元素撑开，因此无法滚动。

5.0 不要在table中使用flex，否则可能产生各种无法预测的样式异常

6.0 精确路径的类样式比单独的类样式优先级高

如下：.a>.b 中的样式优先级要比 .b 中的优先级高；除非在 .b 中使用 !important ，否则无法覆盖 .a>.b 中的样式

.a>.b{
  display:none;
}
.b{
  display:flex;
  /* display:flex !important; */
}

7.0 文本两端对齐

所有文字DIV等宽

text-align: justify;
text-align-last:justify;

此方法不支持苹果的Safari系统浏览器，因为在 Safari 中 text-align 仅对非最后一行文本有效；但可在文本内容后再添加一行内容，使原内容成为非最后一行内容，但这样会导致文本内容多出一行，如下：

.testText{
   width:200px;   
   text-align: justify;  
   text-align-last:justify;
}
.testText:after {
    content: "";
    display: inline-block;
    width: 100%;
}

详见：https://segmentfault.com/a/1190000011336392

8.0 flex布局img自适应

flex布局时，img标签默认保持原始大小，可能会撑跨flex div，除非将 img 标签包裹到 div 中，并将其宽度设为父 div 的 100%

.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;

9.0 placeholder垂直居中

input::placeholder{
  position:absolute;
  
  height:66px;
  line-height:66px;
  /* 或 */
  padding-top:47px;
  padding-left:62px;
}

10.0 设置元素宽高比

aspect-ratio: 1/1;

/* 可选值 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: unset;

11. 为img设置默认图片

<img src="图片的url地址" onerror="this.src='默认图片的url地址;this.οnerrοr=null'"/>

12. absolute绝对定位，元素居中

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
# 使用 animation 会导致 transform 失效；
# animation: animing 60s linear infinite;

注：同一个元素上，同时使用 animation 和 transform，则动画一旦开始，transform将立即失效；可以多套一层div，外层transform，内层animation；

13. 两种绘制边框的方式：

border：是盒模型的一部分，占据布局空间，边框的大小会影响元素的位置。

outline：不是盒模型的一部分，不占用布局空间，边框的大小不会影响元素的位置。

## 示例：
border: 5px solid red;
outline: 5px solid blue;