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);
网友评论