常用CSS

文本相关
颜色 color
字号 font-size
字体 font-family
文本修饰 text-decoration:none;
没有none
下划线underline
删除线line-through
文字水平居中 text-align:center;
字体粗细font-weight:200I400|700;
文本缩进 text-indent:2em;
行高line-height
字体样式font-style:italic;倾斜
normal常规

盒子相关
宽度width
高度height
显示模式display
块block
行内inline
行内块inline-block
背景 background
背景位置background-position
左left
中center
右right
上top
下bottom
fixed固定
内边距padding
外边距margin
边框 border
实线solid
虚线dashed
点线dotted
清除列表样式 list-style:none;
方块 square
盒子透明度 opacity
超出隐藏 overflow:hidden;
内减属性box-sizing:border-box;
盒子投影box-shadow:水平偏移 垂直偏移 模糊程度 投影大小 颜色;
inset 内阴影
文字投影text-shadow:水平偏移 垂直偏移 模糊程度 颜色;
圆角属性border-radius
清除浮动clear:both;
可见性:隐藏的; visibility:hidden;
定位position
相对的relative
绝对的absolute
固定的fixed
层级z-index
鼠标移上边小手cursor:pointer;
垂直对齐基准线vertical-align:middle | top | bottom;
background-size背景尺寸
铺满cover
完整的图contain
线性渐变linear-gradirent(角度deg,颜色1,颜色2,颜色3...)

动画相关
transition 过渡
linear 匀速
steps(n) n步
transform转换
translate(x,y) 位移
rotate(deg) 旋转
skew(xdeg,ydeg) 倾斜
tranform-origin 旋转中心点
animation 动画
keyframes 关键帧
infinite 循环播放
animation-play-state: paused; 动画播放状态：暂停
forwards 动画结束停在最后状态
perspective 透视
transform-style:preserve-3d; 转换方式：保留3d位置;

表单相关
input 输入框
text文本框
password 密码框
button 普通按钮
file 上传文件组件
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
textarea 文本域
select>option 下拉选框
selected下拉选框默认选中
checked 单选/复选默认选中
placeholder 设置提示文本
table>tr>td 表格>行>单元格
caption表格的标题
rowspan跨行合并
colspan跨列合并
border-collapse:collapse; 边框合并(细线表格)
resize:none; 设置文本域不能重置大小
outline: none; 清除表单元素外边线
autofocus 表单自动获取焦点
:focus 得到焦点的样式
表单都是行内块标签!

选择器相关
:nth-child(n) 选择同级里面的第n个
:nth-of-type(n) 选择同级同类里面的第n个
even 2n 偶数
odd 2n+1 奇数

html5新增标签
header 头部
nav 导航
aside 侧边栏
article 文章
footer 页脚
section 区域
video 视频
audio 音频
controls 播放组件
loop 循环
muted 静音
autoplay 自动播放
响应式相关
max-width 最大宽度
@media screen and (条件) {
条件成立执行的css样式
}

网页布局
常规布局:固定宽高

响应式布局:
响应式版心 max-width:xxx; width:百分比; margin:0 auto
其他分区宽用百分比
高度可以设置,也根据内容撑开,注意浮动塌陷clearfix
pad端和phone端通过媒体查询判断屏幕的宽度,修改不同css样式(显示或者隐藏，布局和细节调整)
屏幕宽度一般小于980px是pad,小于640px是phone,但是数值不是固定的,可以根据需求修改

弹性布局
容器属性
display:flex; 声明盒子内部使用弹性布局
flex-wrap:wrap; 宽度超出换行属性
justify-content 主轴分布对齐属性
align-content 侧轴分布对齐属性
center 居中对齐
space-between 两端对齐
space-around 分布间距
space-evenly 平均分布

子元素属性
flex 子级分配剩余空间比例