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-grow1;
   overflow:auto;
   height0px;  /* 解决flex下scroll无法滚动的问题 */
}

/* 横向滚动 */
div{
   display:flex;
   flex-direction:row;  
   flex-grow1;
   overflow:auto;
   width0px;  /* 解决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;



举报

© 著作权归作者所有


1