HTML

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自动打开邮箱

[email protected]

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 表单提交

 自动序列化提交
 不会提交

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;

你可能感兴趣的:(HTML)