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
分页器可以用行内块元素制作

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

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

移动端:

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} 禁用长按弹出菜单

你可能感兴趣的:(css)