小tip:【html】body下的优先级

切图
碰到    *{ background:#00f;}
            body { background:#999;}

当时的想法是这两个作用优先级?(通配符高于body)。
前者通配符清除(增加)样式(现在一般不流行这样做法,因为增加客户端负担,浏览器渲染变慢),后者对body清除(增加)样式。

把上面代码放入浏览器(ie、ff及其谷歌)呈现出:
 

通配符不作用呈现:
 

但是 这还没有完。。。

默默加上body{background: #999;border:20px solid #0C0},原本我想看到的是border会填充“body”四周,可是没有:

为什么呢?不懂就先百度。
 然后发现了张鑫旭这篇文章写到:默认状态下,body不是高度100%显示。
按图索骥,测试了html、通配符和body节点的优先级作用范围,htm>通配符>body节点。

详情猛戳张鑫旭此篇文章。

时间: 2024-10-16 06:07:19

小tip:【html】body下的优先级的相关文章

[转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆出世

小tip: 使用CSS将图片转换成黑白(灰色、置灰) ? 张鑫旭-鑫空间-鑫生活

小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: 最近很积极地折腾手机页面的些东西,加上其他一些人生重要的事,所以木有更新. 可能早就知道,像汶川这种糟糕

面试后的小尝试(linux下.so共享文件的创建)

昨天,参加了一场笔试和面试.对于我这个初入软件,想要转行的名符其实的“菜鸟”来说,打击不少,几个月的“苦读”,原以为基本知识涉猎的差不多的我,迎来了一次真正的笔试与面试.两个小时的笔试,对于我来说,内容有些难度,涉及到一些数据结构的知识,也让只会看书,疏于“上机”的我感到一片茫然.毕竟,理念到实践的转换与成熟运用需要真枪实弹的练习,而我只是学会了“纸上谈兵”.具体的细节,待我把所有的相关的知识梳理好之后再发一篇博文.面试的大哥问了我关于.so文件的内容,我真心不太懂,回家的路上我一直在考虑这个问

记一次清理缓存的小事情(chrome) chrome下清理缓存不生效的问题

记一次清理缓存的小事情(chrome) chrome下清理缓存不生效的问题 前端开发中会经常涉及清理缓存的事情. 在一次开发后, 需要清理缓存,一个哥们怎么清理都不生效, 于是向我求救. 在我看了下后, 发现他的清理界面类似这个样子, 默认的是 ==过去一小时== 我感觉不对, 让他选择清理所有时间的, 清理后运行成功 后记: 虽然是一个很小的细节, 但是确浪费了这个哥们一整个上午的时间, 找了个中原因, 环境, 代码, 机器, 甚至开始怀疑人生.在此记录一下, 避免后来人遇到. 原文地址:ht

小tip:CSS3下的渐变文字效果实现——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果: 相应的HTML代码如下: <h2 class="text-gradient" data-text=

小tip: CSS3如何实现圆角的outline效果?

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4765 一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:"页面可用性之outline轮廓外框的一些研究",还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价值的东西:"纯CSS实现的outline切换transition动画效果". 个把星

微信小程序剖析【下】:运行机制

在上一篇<微信小程序「官方示例代码」浅析[上]>中,我们只是简单的罗列了一下代码,这一篇,让我们来玩点刺激的——就是看看IDE的代码,了解它是怎么运行的. 还好微信的开发团队在软件工程的实践还有待提高,我们才有机会可以深入了解他们的代码——真想建议他们看看Growth的第二部分,构建系统. 解压应用 首先你需要有下面的工具啦 Mac电脑 微信web开发者工具.app WebStorm / 其他编程器 或 IDE,最好可以支持重命名 首先,我们需要右键微信web开发者工具.app,然后显示包的内

小tip: base64:URL背景图片与web页面性能优化——张鑫旭

一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什么?~~ 好吧,我也不喜欢专业术语的解释.你只要知道,base64编码就是长得像下面这样子的代码:thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg== 上面代码大家都熟悉吧,迅雷下载链接哦(咳咳,该地址很纯洁),

移动开发的小tip

最近做的是微信的二次开发,因为是第一次做所以有很多东西要记下来,免得下次在做移动端的时候再经历那么多的坑. 移动端的动画不要使用jq写,jq mobile好像也是不行. 我们的项目最后是使用的css3的动画做成的,(animated.css).用zepto好像也是一个不错的选择. 移动页面点击时候会有300ms延迟(历史原因),解决的办法有很多.可能使用zepto或者禁止缩放是比较省事的办法. 在移动端的输入框也有点技巧:可以在输入的时候有更好的用户体验,给input的type添加:tel:或者