什么情况下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. TypeError: invalid 'in' operand obj

    尝试在程序去访问远程的Web API,它在运行时,出现异常: TypeError: invalid 'in' operand obj 由于从服务器返回的数据是json.当我们需要得到这些数据时,还得需 ...

  2. Redis两种持久化方式(RDB&AOF)

    爬虫和转载请注明原文地址;博客园蜗牛:http://www.cnblogs.com/tdws/p/5754706.html Redis所需内存 超过可用内存怎么办 Redis修改数据多线程并发—Red ...

  3. 背水一战 Windows 10 (27) - 控件(文本类): TextBlock

    [源码下载] 背水一战 Windows 10 (27) - 控件(文本类): TextBlock 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) TextBlock 示例 ...

  4. es6 中增强的对象字面量

    http://www.cnblogs.com/Wayou/p/es6_new_features.html 对象字面量被增强了,写法更加简洁与灵活,同时在定义对象的时候能够做的事情更多了.具体表现在: ...

  5. 25M电子琴实现

    module qin(input clk,output reg beep,input [3:0] col,output [3:0] row_data,output [7:0]out ,input rs ...

  6. 从零开始学Python06作业思路:学生选课系统

    一,作业要求 选课系统: 管理员: 创建老师:姓名.性别.年龄.资产 创建课程:课程名称.上课时间.课时费.关联老师 学生:用户名.密码.性别.年龄.选课列表[].上课记录{课程1:[di,a,]} ...

  7. Windows下安装Nginx+php+mysql环境

    系统:Windows 7 64位系统 安装之前,首先下载软件: Nginx: http://nginx.org/en/download.html PHP Stable PHP 5.6.26: http ...

  8. MyBatis的mapper

    在前面的学习中,我们还在写一些接口啊,实现类啊,是不是感觉好low的... 其实,我们是可以不用写接口的实现类的,今天就带着大家一起学习一下,当然,我是回顾的. 看下面的结构,是不是没实现类呢! 源码 ...

  9. ASP.NET MVC搭建项目后台UI框架—6、客户管理(添加、修改、查询、分页)

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  10. 基于git diff进行的eslint代码检测

    缘起 在项目中, 通常都会使用代码检测工具来规范团队的代码风格, 比如eslint.随着代码的不断增加, eslint进行代码检测的时间也越来越久.每次检测的时候, 需要检测的文件和实际检测的文件极度 ...