1 父级display:flex; 子集:margin:auto;可以实现子集平均分配。
2 p元素里面的文字换行:white-space: inherit;
3 禁止出现竖向滚动条:
::-webkit-scrollbar{
width:0;
}
4 media 标签需要放到样式的最末尾,防止不生效
5 线性渐变的属性:
background:-webkit-linear-gradient( top(角度也可以),#f6f6f6,#9e9e9e)
6 控制文字间距
letter-spacing: 1px;
7自动打开邮箱
<a style="color:#17a1e8" href="mailto:bd@dding.cn">bd@dding.cn</a>
8 p元素里面的内容两边对齐
text-align: justify;
9 字体设置透明度
color:rgba(255,255,255,0.5)
10 出现省略号
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
11 解决谷歌浏览器字体变大
-webkit-font-smoothing: antialiased;
12 用伪类清楚浮动的方法:
display: block;
content: '';
clear: both;
13 解决IE浏览器下图片边框问题
border:none
14 鼠标选不中
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
15 背景图片的长宽比
width:100%;
padding-top:70%
10:7
16 防止滚动条滚动
body{overflow:hidden}
17 字体变得细腻
*{-webkit-font-smoothing: antialiased;}
18 表单提交
<input type="submit" value="注册"> 自动序列化提交
<input type="button" value="注册"> 不会提交
19 未知元素水平垂直居中
* display:flex;justify-content:centent;align-item:center
* position:absolute,top:0,right:0,left:0,bottom:0,margin:auto;
* positiom:absolute;top:50%,left:50%,transfrom:translate(-50%,-50%)
* 父元素:display:table-cell;width:300px;height:300px;text-align:center;vertical-align:middle;
子元素:display:inline-block;