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

<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;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • 关于html静态页面书写的知识点整理 1.web标准:结构,表现,行为 结构(xhtm...
    终相恋阅读 657评论 0 1
  • 本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识...
    王钰峰阅读 498评论 0 2
  • 人不是被社会造就,而是人造就了社会。 如果你不能坦然面对社会,还信誓旦旦的认为是社会使自己埋没,换个社会会很好。那...
    我爱吃芝麻阅读 310评论 0 1
  • 罪孽深重的我,一次又一次的辜负了你给我的机会,以至于这一次让你彻底的对我失望透顶了。即使你离开了,这一切也都是我咎...
    Elvis一Yi阅读 496评论 0 0