一些css的总结

1 一行情况下用...来隐藏

````

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

````

2 文本在第二行溢出时才用...来隐藏

````

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow:  hidden;

text-overflow:  ellipsis;

````

3 紧贴于俩端:

````

display: flex;

justify-content: space-between;

````

4 竖向排列(使用flex时)

flex-direction: column;

5 背景颜色会透到边框下面。 background-clip可以设置背景的显示区域(border-box|padding-box|content-box)

box-sizing: border-box        => 设置宽高变成content+padding+border

通常情况下css设置的宽高是content的宽高

6 外边框直角,内边框圆角

````

border-radius: .8em;

box-shadow: 0 0 0 10px #655;

outline: 10px solid #655;

````

7 颜色渐变

linear-gradient(#fb3 50%, #56a 50%)       => 横向条纹

你可能感兴趣的:(一些css的总结)