一、常用CSS
1、左浮动
- float:left
2、右浮动
- float:rigth
3、div内的元素不换号
- white-space: nowrap;
- display: inline-block;
4、消除padding对宽高影响
- box-sizing: border-box;
5、a标签图片太大,尺寸超过容器大小
- background-size: contain;
6、网页跳转打开新的页面
- target: "_blank";
7、宽高充满父布局
- width: 100%;
- heigth:100%;
8、转为块级元素
- display: block;可以设置宽高
- display: inline-block;既能设置在一行显示,又能设置宽高。
- display: none;元素消失,空间不保留,移除文档流。
9、转为行内元素
- display: inline;设置宽高无效,大小撑满父布局,如果需要转为行内元素还能设置宽高,则有2种方法:浮动和定位
10、居中
- text-align: center; 文本居中
- line-height: 50px; 容器居中
11、鼠标箭头变为小手指
- cursor: pointer;
12、字体设置
- font-family: "'Helvetica Neue', Helvetica, Arial, sans-serif";
13、a标签设置
&:hover {
text-decoration-color:rgb(46, 49, 53);
text-decoration-line:underline;
text-decoration-style:solid;
text-decoration-color:blue;
color: blue;
}
13、去掉下划线
- text-decoration: none;
14、定位
- position: relative; 父类相对定位
- position: absolute; 子类绝对定位
如果只添加子类不添加父类的定位会导致脱标,加上会在父容器内绝对定位
14、字体加粗
- font-weight: bold;
15、字体正常
- font-weight: normal;
16、文字换行
- word-wrap:break-word;
- word-break:break-all;
17、图片显示样式
- object-fit: contain; =缩放显示,适应父布局大小,不裁切
- object-fit: fill; =完全显示到父布局会有变形,没有裁切。
- object-fit: cover; =完全显示到布局,会有裁切
- object-fit: none; =原始尺寸,不变化
18、宽高
- px:固定数值,例如:300px表示3000像素
- rem:相对于根元素(即html元素)font-size计算值的倍数,1em与当前元素的字体大小相同,浏览器给网页设置的默认基础字体大小是16像素,即一个元素来说1em的计算值默认为16像素。但是要em单位是会继承父元素的字体大小,所以如果在父元素上设置了不同的字体大小,也会跟随者变化。
- 100%:表示设置百分比单位。
- vh:视窗高度的百分比( 1vh 代表视窗的高度为 1%)
- vw: 视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
- vmin:当前 vw 和 vh 中较小的一个值
- vmax:当前 vw 和 vh 中较大的一个值
19、z-index
- z-index表示谁压着谁。数值大的压盖住数值小的。
- 只有定位了的元素才能有z-index值,不管是相对、绝对、固定定位都可以使用z-index值,而浮动的东西不能用。
- 如果都没有z-index值,谁写在后面谁盖住谁。
- z-index没有单位,是一个正整数。默认的z-index值是0。
20、元素是否可见
- opacity: .5;透明度1-0,空间不消失。
- visibility: hidden;隐藏元素,保留空间,和opacity: 0;一样。
- visibility: visible;元素可见,默认。
21、背景固定,内容滑动
- background-attachment: fixed;
- position: sticky; 和fixed类似,区别在于,如果元素位置不在文档流最顶层,滑动时候会跟随滑动,然后到顶部时候固定,类似Android的TitlBar粘性布局效果。
二、styled-components设置
1、本组件下的className='xxx'设置
- &.xxx {}
2、伪类选择器设置
- &:hover {}
- &:active {}