CSS套路速成指南1.0

最近做的项目用到的全部css属性，做个整理。

【1】线性/弹性/网格布局

常用属性	常用属性值	说明
display	flex、inline-block	弹性盒子
flex-direction	row、column	元素排列方向
justify-content	left、center、space-between	元素横/列对齐方向
align-items	flex-start、center	元素横/列对齐方向
flex-wrap	nowrap、wrap	项目在容器轴线排不下是否换行
flex	数值	按比例，例三个子元素都是flex:1，则为1：1：1显示

.father{
  display: flex; 
  flex-direction: row;
  justify-content: center;
  align-items: center;

  flex-wrap: nowrap;
}
.child{
  flex: 1;
}

【2】层叠布局

常用属性	常用属性值	说明
position	static、relative、absolute、fixed	设置元素定位方式
z-index	数值	层叠布局时互相遮盖的层级

.father{
  position: relative;
}
.child{
  position: absolute;
  z-index: 5;
  right: 0;
}

【3】文本元素

常用属性	常用属性值	说明
font-size	px、rem	字号
color	色值	颜色支持透明度
font-weight	数值	受设备内置字体影响，不完全准确
text-align	left、center、justify	文本内对齐方式

.text{
  font-size: 16px;
  color: #ffffff;
  font-weight: 300;
  text-align: justify;
}

【4】图片元素

常用属性	常用属性值	说明
background-image	图片位置	背景图片
background-size	cover	cover保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
background-position	center center	center center表示正中
background-repeat	no-repeat	no-repeat背景图像将仅显示一次。
border-radius	50%	头像显示圆形

.father{
  background-image: url("../images/abc.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.image{
  border-radius: 50%;  
}

【5】其它

/* IOS禁止微信调整字体大小 */
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;

/* 外边距 */
margin-top: -10px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;

/* 内边距 */
padding-top: 0.2rem;
padding-bottom: 0.2rem;
padding-left: 0.5rem;
padding-right: 0.5rem;

/* 隐藏PC端的底部滚动条 */
overflow-x: hidden;
overflow-y: hidden;
overflow-y: scroll;

/*使用本地或指定字体加载顺序*/
font-family: Arial, sans-serif, Avenir, Helvetica;

/*用来控制字体渲染时的平滑效果，使字体看起来更加清晰和舒服，在 Mac OS 和 ios 中表现比较明显，在 windows 中表现不明显*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

/*为适配宽高的常用属性*/
width: 100%;
max-width: 960px;
min-width: 960px;
height: auto;
min-height: 8rem;
line-height: 24px;

/*背景的几种写法*/
background: #ffffff;
background: rgba(0, 0, 0, 0.7);
background-color: #f4f4f4;

/*文字选中时，画线*/
text-decoration: underline; /* 下划线 */
text-decoration-color: #ffffff; /* 下划线颜色 */
text-decoration-style: dotted; /* 下划线样式 */
text-decoration-thickness: 2px; /* 下划线粗细 */

/*动画配置相关属性*/
animation-delay: 0s; /**延迟执行 */
animation-duration: 3.5s; /**执行时间 */
animation: shake 1.2s infinite ease-in-out;
animation-name: anim_pc_maodian_true;
animation-fill-mode: forwards; 

/*动画方式相关属性*/
transform: translateY(0);
transform: rotateY(180deg) rotateY(180deg) rotateY(180deg)
transition: opacity 0.5s ease;
opacity: 1;

/*字间距*/
letter-spacing: 0.09px;

/*鼠标悬停有小手图标*/
cursor: pointer;

/*元素边框样式，10px 是边框的宽度，solid 表示边框是实线，transparent 是边框的颜色，这里表示边框是透明的。*/
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #f4f4f4;
border: 7px solid #ffffff;

/*给 HTML 元素添加阴影效果*/
box-shadow: 0 4px 16px 4px hsla(0, 0%, 60%, 0.15);

/*强制元素显示居左、居右、居上或居下*/
top: 0;
left: 0;
right: 0;
bottom: 0;

/*移动ios手机端 */
/* 兼容 iOS < 11.2 */
margin-bottom: constant(safe-area-inset-bottom);
/* 兼容 iOS >= 11.2  当网页设置viewport-fit=cover的时候才生效。*/ 
margin-bottom: env(safe-area-inset-bottom);