前端项目常用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代码

@charset "UTF-8";

/* section,
article,
aside,
header,
footer,
nav,
figure,
figcaption,
canvas,
img {
  display: block;
} */

body,
dl,
dd,
p,
form,
input,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
figure,
fieldset {
  margin: 0;
}

ol,
ul,
td,
input,
fieldset {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
label,
table {
  font-size: inherit;
}

body {
  /*font-family: \5FAE\8F6F\96C5\9ED1; !* 微软雅黑 *!*/
  /* -webkit-overflow-scrolling: touch; */
  -webkit-font-smoothing: antialiased;
  /* 抗锯齿 */
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
textarea,
select {
  font-size: inherit;
  border-radius: 0;
  color: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  border: none;
  outline: none;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  line-height: initial;
}

input[type="checkbox"],
input[type="radio"] {
  vertical-align: sub;
  border: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

em,
i {
  font-style: normal;
  font-size: inherit;
}

pre {
  white-space: pre-wrap;
}

img {
  width: 100%;
  border: none;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  -webkit-touch-callout: none;
  /* 禁止长按响应系统菜单 */
  -webkit-user-drag: none;
  /* 禁止拖动, 用于 mousemove 图片或含图片的模块 */
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

a,
.tap {
  cursor: pointer;

  touch-action: manipulation;
  /* 去除300ms点击响应延迟 */
  -webkit-tap-highlight-color: transparent;
  /* 去除模块点击高亮 */
}

mark {
  background: none;
  color: inherit;
}

/* iOS内嵌滚动优化 */
.scroll {
  -webkit-overflow-scrolling: touch;
}

/* 水平垂直居中 */
.position-transform {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.flex-center {
  justify-content: center;
  align-items: center;
  display: flex;
}
.margin-auto {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
/* 浮动与清浮动 */
.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix {
  *zoom: 1;
  overflow: hidden;
}

.clearfix:after {
  display: block;
  content: "\200B";
  height: 0;
  clear: both;
}

/* 单行超出省略 */
.elps {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行超出省略 */
.clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 常用的 flex */
.flex {
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
}

.iflex {
  display: -webkit-inline-flex;
  display: inline-flex;
}

.dc {
  -webkit-flex-direction: column;
  flex-direction: column;
}

.fw {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.jc {
  -webkit-justify-content: center;
  justify-content: center;
}

.je {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.jsb {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.jsa {
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.jsa {
  -webkit-justify-content: space-evenly;
  justify-content: space-evenly;
}

.ac {
  -webkit-align-items: center;
  align-items: center;
}

.ae {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.as {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.acc {
  align-content: center;
  -webkit-align-content: center;
}
.flex1 {
  flex: 1;
  /* 父级要明确宽/高; 会让子级宽/高不明 */
  /* flex-grow: 1; */
}

.fn {
  -webkit-flex: none;
  flex: none;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 设置表单输入框placeholder的样式 */

input::-webkit-input-placeholder {
  color: skyblue;
  text-align: center;
}
input::-ms-input-placeholder {
  color: skyblue;
  text-align: center;
}
input::-moz-placeholder {
  color: skyblue;
  text-align: center;
}

/* 设置滚动条样式 */

.wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
}

.wrap::-webkit-scrollbar {
  /* 整体大小样式 */
  width: 10px;
  height: 10px;
}

.wrap::-webkit-scrollbar-thumb {
  /* 滚动条里的滑块 */
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 55%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

.test::-webkit-scrollbar-track {
  /* 滚动条的轨道 */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}

/* 隐藏滚动条但又可以滚动 */

.wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wrap::-webkit-scrollbar {
  /* 整体大小样式 */
  display: none;
}
/* 无边框三角 */
.noBorderTriangle {
  width: 0;
  height: 0;
  border-width: 0 40px 40px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.3);
}

/* 带边框三角 */
.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-width: 40px 0 40px 40px;
  border-style: solid;
  border-color: transparent black;
}

.triangle::after {
  content: "";
  position: absolute;
  top: -36px;
  left: -38px;
  border-width: 36px 0 36px 36px;
  border-style: solid;
  border-color: transparent red;
}

/* 11、禁止用户选中元素

有些时候不想让用户选中内容，复制网站上文字内容。 */
.prohibit {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 网格九宫格布局 */
.grid {
  grid-template-columns: auto auto auto auto;
  /* grid-template-rows: auto auto auto; */
  justify-content: space-evenly;
  align-content: space-evenly;
  /* grid-gap: 1px; */
}
/* .grid:first-child {
        grid-column-start: 1;
        grid-column-end: 3;
      }
      .grid:first-child {
        grid-row-start: 1;
        grid-row-end: 4;
      } */