CSS格式化样式和平常CSS问题

385 阅读1分钟

初始样式

<style>
body {
    margin: 0;
    padding: 0;
    font: 12px/1.5 'Microsoft YaHei', 'HanHei SC', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', 'sans-serif', \5b8b\4f53;
}

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
blockquote,
p {
    padding: 0;
    margin: 0;
}

table,
td,
tr,
th {
    font-size: 12px;
}

ol,
ul {
    list-style: none;
}

li {
    list-style-type: none;
}

img {
    vertical-align: top;
    border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
}

address,
cite,
code,
em,
th,
i {
    font-weight: normal;
    font-style: normal;
}

.clearfix {
    *zoom: 1;
}

.clearfix:after {
    display: block;
    overflow: hidden;
    clear: both;
    height: 0;
    visibility: hidden;
    content: ".";
}

a:link,
a:visited {
    text-decoration: none;
}

input,
button {
    outline: 0;
    border: none;
}
</style>

获取奇数偶数

#Ulist li:nth-of-type(odd){ margin-left: 20px;}奇数行  
#Ulist li:nth-of-type(even){margin-left: 10px;}偶数行  
<ul id="Ulist"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
</ul> 

//等比例缩放

.trial li{
    transition:  all 1s;
}
.trial li:hover {
    transform: scale(1.2);
    /* animation: moveTop 1s linear infinite alternate; */
}

//图片撑满盒子

object-fit: cover;

//文章缩进

text-indent:2em;

//两端对齐

text-align: justify;

//查找第几个

.detail_img img:nth-child(2){}

//不换行

white-space: nowrap;

//换行

white-space: break-spaces;

//改变子元素

.newbox:hover p {
  color: #2d76ff;
}

//终极查找类

.el-table >>> td div{
  text-align: initial;
}

//显示省略号

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

//多行溢出隐藏

.hide{
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
   }

//旋转

image.png

transform: rotate(-7deg);

//改变图片滤镜

image.png

 filter: brightness(5);
 

// 给最外层的盒子添加伪元素,列不满则左对齐

.v1-box:after {
  content: "";
  width: 30%;
}

//垂直居中

  display:table-cell;
  vertical-align: middle;
  

//把div元素中的文本划分成三列:

column-count:3;

//option占位

<option value="" disabled selected>请选择公司名称</option>

//添加一个类

 $(() => {
  $("#gszc").addClass("togle_cor")
})