博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML标签样式初始化
阅读量:7223 次
发布时间:2019-06-29

本文共 927 字,大约阅读时间需要 3 分钟。

为什么要初始化?

基本原因就是,浏览器会给一些元素添加一些css属性的初始值,但是这些属性值可能会影响到我们的项目开发,造成布局与理想布局不一致的情况。

解决方案?

大多数人的解决方案都是百度一些大公司样式表初始化,但是这不是最佳方法,因为就算是大公司的样式初始化也有一些冗余。冗余,就会导致我们浏览器多花一些资源去处理没必要的问题。所以样式表初始化也是一个很重要的技术。

今天我在chorme浏览器下,针对marginpadding的初始值进行了一些整理。(样式初始化当然不是仅仅设置边距,如果有兴趣的小伙伴可以继续去整理其他属性的初始值)

我将边距初始化分为三种情况:

1.只具有margin初始值标签

body,div,h1~h,p,dl,blockquote,pre初始值:

margin-*

dd初始值:

margin-left

form初始值:

margin-top

2.只具有padding初始值的标签

legend初始值:

padding-left,padding-right

3.同时具有margin+padding初始值的标签

input,textarea,select,button初始值:

padding-*,margin-*

fieldset初始值:

margin-left,margin-right,padding-*

ul,ol初始值(li标签不用初始化):

margin-*,padding-left

以上就是我今天测试整理出来的属性,除了以上标签,如果大家还发现有其他的标签是我没有列出来的,欢迎大家留言或者私信我,我一定虚心求教

再来看看一个网上的样式表初始化例子

腾讯官网样式初始化

对比发现,除了input,textarea,select,button之外,其他标签是没必要同时初始化margin+padding,当然它这样写可能是出于其它目的,在这里我就不猜测它的目的了。

除了margin和padding的初始化外,还有很多初始化值,很兴趣的小伙伴可以自行去尝试,在这里我就不一一列举了。

谢谢大家观看!

转载于:https://juejin.im/post/5b3868c86fb9a00e833d6010

你可能感兴趣的文章
Memcached的原理与应用(未完)
查看>>
基于 Confluence 6 数据中心的 SAML 单点登录设置你的身份提供者
查看>>
mysql总结
查看>>
Navicat for MySQL版本更新至v11.2.12,修复多项问题|附下载
查看>>
整理 JAVA中的IO流 (字符流和字节流两个大类)
查看>>
uefi与win8 (根据网络资料整理)
查看>>
Eclipse优化
查看>>
Log4j tutorial with Tomcat examples
查看>>
Kong 网关
查看>>
三层结构视频中的DBHelper.cs
查看>>
[转载] 信息系统项目管理师视频教程——18 项目沟通管理
查看>>
在Windows下建立QT开发环境
查看>>
Jedis、JedisPool、ShardedJedis和ShardedJedisPool,java对redis的基本操作
查看>>
[转载] 致命伴侣
查看>>
HTML5 localStorage本地存储实际应用举例
查看>>
Scala访问修饰符
查看>>
实习感悟
查看>>
产品经理网站小结
查看>>
Bootstrap 附加导航插件
查看>>
如何设置启动SMTP、POP3以及IMAP4的SSL服务端口?
查看>>