CSS积累

PC初始化CSS

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

body {
background: #fff;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

td, th, caption {
font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}

address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

img {
border: none;
}

ol, ul, li {
list-style: none;
}

input, textarea, select, button {
font: 14px Verdana, Helvetica, Arial, sans-serif;
}

table {
border-collapse: collapse;
}

html {
overflow-y: scroll;
}

fieldset, img {
border: 0;
}

button, input, select, textarea {
font-size: 100%;
}

.clearfix:before,.clearfix:after{
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}

.clearfix {
*zoom: 1;
}

移动端样式初始化

• {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  /-webkit-user-select: none;/
  /禁用手机浏览器的用户选择文本(复制)功能 /
  /-moz-user-select: none;/
  }

ul, li {
list-style: none;
}

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

html {
width: 100%;
margin: 0 auto;
/overflow: hidden;/
/position: relative;/
font-family: "微软雅黑", Tahoma, Helvetica, Arial, sans-serif;
font-size: calc(100vw / 7.5);
font-size: -webkit-calc(100vw / 7.5);
font-size: -moz-calc(100vw / 7.5);
-webkit-text-size-adjust: 100%;
/页面点击链接时会出现高亮框，此代码用来解决/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/在谷歌里面，小于12号字都会直接显示为12号字，此代码解除此问题/
-webkit-text-size-adjust: none;
}

flex布局：

.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: -moz-flex;
display: flex;
}

/垂直水平居中/
.flex-center {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: -moz-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-moz-justify-content: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-moz-align-items: center;
-ms-flex-align: center;
align-items: center;
}

/子元素水平两端对齐/

.flex-pack-justify {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: -moz-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-moz-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}

/1行超出隐藏/

.text-ellip {
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
word-break: keep-all;
text-overflow: ellipsis;
}

/2行超出隐藏/

.text-ellip2 {
overflow: hidden;
text-overflow: ellipsis;
/将对象作为弹性伸缩盒子模型显示。/
display: -webkit-box;
/从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）/
-webkit-box-orient: vertical;
/这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。/
-webkit-line-clamp: 2;
}

浮动

.fl {
float: left;
}
.fr{
float: right;
}

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

.clearfix {
*zoom: 1;
}

水平居中

首先父级
position:relative;
子元素
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
margin: auto;

图片自适应

高度
给图片max-height
给height:100%
max-height:
height: 100%;