CSS容易遗忘的点

高度不会被继承
行内元素只能设置左右的padding和margin
text-align:center和line-height只能影响盒子中的行内和行内块元素
margin: 0 auto;的盒子需要有宽度
没有宽度的元素加apdding不会撑开盒子
相邻垂直块元素上下都加margin时只会生效最大值
相邻父子块元素margin时会高度塌陷
浮动的元素不会压住文字
outline: none;可以取消input被选中时的蓝色边框
resize: none; 可以取消textarea的右下角拖拽增大功能
vertical-align 只对行内和行内块元素有效
盒子中的图片与底部有空白缝隙时用vertical-align: middle;可以解决
使用margin-left: -1px可以合并浮动盒子的左右边框线
hover显示4条边框线:给当前盒子加相对定位
如果盒子已经定位使用z-index
分页器可以用行内块元素制作
nth-child 会选中父盒子中的所有子元素
nth-of-type 只会选中父盒子中的所有满足选择器条件的子元素

// 设置文字换行
white-space: normal;
// 设置数字强制换行
word-wrap: break-word;
// 需多加试验
word-break: break-all

// 单行文本溢出显示省略号:
// 强制一行显示
white-space: nowrap;
// 溢出隐藏
overflow: hidden;
// 溢出的文字用省略号表示
text-overflow: ellipsis ;

//多行文本溢出显示省略号(有兼容性问题):
//控制好盒子大小
// 溢出隐藏
overflow: hidden;
// 显示省略符号来代表被修剪的文本
text-overflow: ellipsis;
// 弹性伸缩盒子模型显示
display: -webkit-box;
// 限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
// 设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;

// 实现小程序中的mode=aspectFill
background-size: cover;
background-position: center center;

移动端:
box-sizing: border-sizing
-webkit-box-sizing: border-sizing
-webkit-tap-highlight-color: transparent 清除点击高亮，如a
-webkit-appearance: none 清除iOS中预置的样式，如input，botton
img,a {-webkit-touch-callout: none} 禁用长按弹出菜单