没有合适的资源?快使用搜索试试~ 我知道了~
浏览器默认样式(User Agent Stylesheet)的介绍与最佳处理方法
5星 · 超过95%的资源 3 下载量 147 浏览量
2020-09-24
20:50:16
上传
评论
收藏 111KB PDF 举报
温馨提示
试读
2页
主要给大家介绍了浏览器默认样式(User Agent Stylesheet)的相关资料,并给出了相对应的最佳解决方法。有需要的朋友可以参考借鉴,下面来一起看看吧。
资源推荐
资源详情
资源评论
浏览器默认样式(浏览器默认样式(User Agent Stylesheet)的介绍与最佳处)的介绍与最佳处
理方法理方法
主要给大家介绍了浏览器默认样式(User Agent Stylesheet)的相关资料,并给出了相对应的最佳解决方法。
有需要的朋友可以参考借鉴,下面来一起看看吧。
发现发现
最近在调整网页的格式发现网页底部总是有一个10像素左右的空格。
通过用Chrome流浪器的审查元素发现有一个叫user agent stylesheet设置整个form的margin-botton:1em;
通过上网查资料发现这个user agent stylesheet是流浪器的一些默认样式。如果对这个默认样式不满意最简单的解决办法就是
重新设置该样式的属性,因为user agent stylesheet优先级很低,会被覆盖,这样就不会影响到我们的样式了,比如这里我就
讲form 的margin-bottom设为0px。
User Agent Stylesheet介绍介绍
不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0};
不过现在说的可不只是这些。基本上,不同内核的两个浏览器在某些元素的表现都会存在差异,比如缩进的大小、字体选择、
字符样式等。也许一个很漂亮的CSS样式表在一个浏览器上表现良好,在另外一个浏览器上即使是没有CSS Bug的情况也会
变得结构混乱起来,我都是浏览器默认样式在作怪。
因此,我们在生成CSS样式规则的时候,一个必做的步骤就是重设浏览器的默认样式,也就是覆盖掉浏览器的默认样式。和
使用 * {padding:0;margin:0}有所不同,并不是所有的元素都存在padding和margin的差异(元素列表、有序列表在Internet
Xplorer和Firefox中的不同是由于它们的缩进采用了margin缩进和padding缩进)。
例如下面这段:
这段代码在Internet Explorer中使用的字体是Times New Roman,而在Firefox和Opera中使用的是系统默认字体。因此我们要
为<h1>在CSS中设定一个统一的样式。
但是,如果我们像使用* {padding:0;margin:0}一样去使用通配符“*”来简单地设定全局样式,那么一个很明显的问题就会出现,
比如像form元素、input元素、textarea等在某些浏览器中会忽略对它们的重新设定,更重要的是这将会严重破坏这些元素的外
观,所以你又不得不去手动去一一为它们重新设定一个padding值和margin值。所以我们应该放弃简单地使用“*”,而是为第一
个存在表现不一致的元素进行重设,如body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre等等。
weixin_38637144
- 粉丝: 4
- 资源: 925
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页