什么情况下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. easyui combotree的使用

    前台HTML: <div class="search-container"> <table class="search-container-table& ...

  2. yii的入口文件index.php中为什么会有这两句

    yii的应用模板中,index.php中 前面会有这两句 <?php // comment out the following two lines when deployed to produc ...

  3. PHP工作笔记:数组转字符串与字符串转数组

    一个数组要入库,发现不可以,特定用函数转为字符串入库 $data = array( 'http://img4.bitautoimg.com/autoalbum/files/20110420/734/2 ...

  4. Xdebug文档(三)堆栈跟踪

    当xdebug激活时,PHP一旦要显示通知.警告或错误时,xdebug 显示堆栈跟踪信息.这个堆栈信息能跟据你的需要来配置显示. Xdebug显示的堆栈跟踪都是以保守数量状态显示信息.因为大量的信息处 ...

  5. RequireJS+JQueryMobile

    RequireJS提供了JS下模块化开发的充分条件.之前我自己也在多个项目中尝试模块化开发,但是由于没有类似RequireJS这样的框架,最后的效果都不是很理想. 在RequireJS中,所有的JS都 ...

  6. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

  7. MySQL基础(非常全)

    MySQL基础 一.MySQL概述 1.什么是数据库 ? 答:数据的仓库,如:在ATM的示例中我们创建了一个 db 目录,称其为数据库 2.什么是 MySQL.Oracle.SQLite.Access ...

  8. 基本排序算法——冒泡排序java实现

    冒泡排序是原理最简单的一种排序算法,具体思想就不多说了,代码如下: eclipse4.3中编译通过 package sort.basic; import java.util.Arrays; publi ...

  9. C# 在執行程式目錄下產生文件夾

    //產生一個Log文件夾string appPath = Application.StartupPath; if (!Directory.Exists(appPath + "/log&quo ...

  10. Sql 获取日期区间

    获取制定日期区间 declare @d as date declare @d2 as date set @d = '2014-06-03' set @d2 ='2014-06-10' ),datead ...