什么情况下hidden不起作用?

position设置成fixed,overflow的hidden不起作用。


visibility和display

1、visibility:

规定了元素是否可见,即使不可见也会占用上面的空间,在这里就是在指它与display的不一样了。

2、display:

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

3、对比:

相同点: 都有相同的功能就是隐藏。

不同点: 当我们定义了display后,在渲染树中不会引擎是不会去构建这个框的。而visibility当我们使它隐藏的时候,他在渲染树中会构建,只是不去渲染。这也就是W3c上面所说的不可见会占空间的原因。他们两者在优化中visibility会显得更好,因为我们不会因为它而去改变了文档中已经定义好的显示层次结构了。


使用blockquote 添加水印效果

用 :before 来代替 background 了,既可以给背景留下空间,还可以直接使用文字而非图片:

blockquote::before {
content: open-quote;
position: absolute;
z-index: -1;
color: #DDD;
font-size: 120px;
font-family: serif;
font-weight: bolder;
}

本文链接:http://www.cnblogs.com/xsilence/p/5998920.html

关于css的一些事情(1)的更多相关文章

  1. 展望未来:使用 PostCSS 和 cssnext 书写 CSS

    原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一 ...

  2. 看《css知多少》的一些总结

    问题 1.有些浏览器不完全支持css3,现在可以用哪个工具去检测浏览器是否支持,以及支持哪些项? modernizr:检测浏览器对HTML5和CSS3特性(至于modernizr的介绍,可以看我另外一 ...

  3. css知多少(2)——学习css的思路

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  4. css知多少(4)——解读浏览器默认样式

    上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大 ...

  5. 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  6. css代码实现

    纯 CSS 实现下面我们探讨下,使用纯 CSS 的方式能否实现. hover 伪类实现 使用 hover 伪类,在鼠标悬停在按钮上面时,控制动画样式的暂停. 关键代码如下: <div class ...

  7. 用CSS画小猪佩奇,你就是下一个社会人!

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~ 背景 小猪佩奇已经火了好 ...

  8. css transition transform animation例子讲解

    1.transition属性: transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timin ...

  9. css知多少(4)——解读浏览器默认样式(转)

    css知多少(4)——解读浏览器默认样式   上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面 ...

随机推荐

  1. Java 批量插入数据(Oracle)

    //批量添加20000条数据用时8秒. try {    String url = "jdbc:oracle:thin:@IP:1521:orcl"; // orcl为数据库的SI ...

  2. ArcGIS标注

    关于ArcGIS的标注问题整理. 要求: 保留小数点后三位, 若原数据小于1(.12345),对小数加0显示 分行显示两个字段值 解决: 右击图层 -- ”properties“(属性) 中选择“la ...

  3. http://www.mysqltutorial.org/python-mysql-query/

    This tutorial shows you how to query data from a MySQL database in Python by using MySQL Connector/P ...

  4. No.025:Reverse Nodes in k-Group

    问题: Given a linked list, reverse the nodes of a linked list k at a time and return its modified list ...

  5. Session中load/get方法的详细区别

    Session.load/get方法均可以根据指定的实体类和id从数据库读取记录,并返回与之对应的实体对象.其区别在于: 如果未能发现符合条件的记录,get方法返回null,而load方法会抛出一个O ...

  6. 分享20个最新的免费 UI 设计素材给设计师

    用户界面设计涉及到很多的创意,灵感以及需要与客户进行有效沟通的技能.良好的用户界面是一致的,可以使网站更容易理解和使用.UI设计的重点在于用户体验和互动,同时易于使用对于一个成功的移动应用程序来说非常 ...

  7. jquery图片播放切换插件

    点击这里查看效果可自定义数字样式和左右点击按钮 这个更好:移入按钮切换版本 更多图片轮播 以下是HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  8. JavsScript+dom

    JavsScript+dom DOM(兼容性) 用于操作文档树 1.帮助我们找到标签 直接查找 间接查找 getElementById getElementsByTageName 2.标签操作 内容: ...

  9. css(一)

    CSS CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一 css的四种引入方式 1.行内式          ...

  10. SharePoint 2013 Designer系列之自定义列表表单

    在SharePoint的使用中,默认的样式过于单调经常困扰着我们,其实,SharePoint使用Designer工具,可以很轻松解决这一问题,制作出各式各样漂亮的页面.下面,让我们简单介绍下这一过程. ...