CSS常用样式属性总结

一、常用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 {}

你可能感兴趣的:(css,css)