什么情况下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实现时间动态显示方法汇总

    这篇文章主要介绍了Java实现时间动态显示方法汇总,很实用的功能,需要的朋友可以参考下 本文所述实例可以实现Java在界面上动态的显示时间.具体实现方法汇总如下: 1.方法一 用TimerTask: ...

  2. Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

    简介       ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端 ...

  3. Android ViewPager滑动背景渐变

    原理 总 布局为RelativeLayout或者FrameLayout,在这里我们用的是RelativeLayout.先设置背景图片,宽度和高度都 fill_parent,在设置viewpager,v ...

  4. Oracle11g 配置 ST_GEOMETRY

    安装环境:ArcGIS Desktop10.2.1 .ArcSDE10.2.134940. Oracle11.2.0.1 操作系统:Windows Server 2012R2 DataCenter 安 ...

  5. html中<radio>单选按钮控件标签用法解析及如何设置默认选中

    <input type="radio" name="radio" value="1">单选1 <input type=&q ...

  6. ahjesus web动态icon

    刚刚逛插件无意间发现的,记录下,里面有demo可以直接run了看效果 http://nicolasbize.com/faviconx/ http://www.miaofree.com/

  7. [python]初试页面抓取——抓取沪深股市交易龙虎榜数据

    [python]抓取沪深股市交易龙虎榜数据 python 3.5.0下运行 没做自动建立files文件夹,需要手动在py文件目录下建立files文件夹后运行 #coding=utf-8 import ...

  8. 使用setTimeout模拟setInterval效果

    由于现在部分浏览器基于对系统性能的优化,在使用setInterval的时候,在页面没有获得关注的状态,浏览器可以会自动将setInterval终端,等到该页面重新获得关注时再开启.这样就会使得一些基于 ...

  9. SharePoint 2013 图文开发系列之网站栏

    网站栏的本质,就是一个xml的描述文件,所以创建过程,基本就是通过Feature部署一个Xml文件,然后修改Xml文件的网站栏描述. 1.添加新项目,选择SharePoint 2013 空项目,如下图 ...

  10. 『SharePoint』Content Editor Webpart不能添加引用_layouts下面的文件

    好久没写了,最近没怎么学到新东西,倒是犯了一个很常见的错误,那就是试图在content editor webpart中添加位于_layouts下面的一个txt文件,虽然这个txt中只是几行简单的htm ...