css备忘
1.0 禁止换行
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* 使用省略号来代表被修剪的文本 */
2.0 CSS通过索引的方式选择元素
div:nth-child(1){ }
3.0 CSS阴影
box-shadow: 3px 1px 12px 1px #c5c5c5;
4.0 flex下 overflow:auto 失效
如下,需要将height设为0,否则div内容无法滚动;
注: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;