常见的CSS代码无效问题
在前端开发中经常会遇到一些CSS代码设置无效的情况，下面我总结一些我遇到的情况。
1.height：100%无效
百分比的高度在设定时需要根据这个元素的父元素容器的高度。例如一个div的高度设为40%，而父元素的高度为100px时，那么这个div的高度应为40px。
在默认情况下<html></html><body></body>的高度都是0，而两个元素又是其他元素的父元素，所以height：100%当然也是0。解决方法是在html，body的CSS中都加上height:100%。
2.z-index无效
z-index在使用时有一个前提，只能在position是relative，absolute，fixed才有效。在满足这个条件后还需注意dome节点关系，z-index值只决定同一父元素中的同级子元素的堆叠顺序。堆叠顺序不是看子元素的z-index而是看父元素的z-index。
3.position:fixed无效
fixed定位的元素，如果父元素有transform属性，那么fixed无效，原因尚不清楚。设置fixed的元素其父元素不要设置transform属性，记住这个情况就行。
常见的CSS代码无效问题的更多相关文章
- 常用CSS代码片段常见css bug
1.禁止文字被选中 .unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select ...
- CSS——插入形式 基本格式 常见css代码
常见css代码 无下划线链接 字体颜色 + 左边距 背景颜色 字体.字体颜色.大小 文本对齐方式[取代了<center>]
- Web前端开发最佳实践（9）：CSS代码太太乱，重复代码太多？你需要精简CSS代码
前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...
- 精简CSS代码，提高代码的可读性和加载速度
前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...
- CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog
原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...
- 20个编写现代 CSS 代码的建议
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- 30+有用的CSS代码片段
在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人 ...
- 20个编写现代CSS代码的建议
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- CSS代码重构与优化之路
作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...
随机推荐
- 响应式网站设计(Responsive Web design)
页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用 ...
- 利用phpcms后台漏洞渗透某色情网站
本文来源于i春秋学院,未经允许严禁转载 phpcms v9版本最近爆了好几个漏洞,网上公开了不少信息,但没有真正实战过,就不能掌握其利用方法,本次是在偶然的机会下,发现一个网站推荐楼凤信息,通过分析, ...
- 本地调用QQ只需要一句代码
如下图:点击在线客服以后,弹出QQ登录框 经测试,如果已经登录QQ,可能会提示版本不支持该功能,让你升级,但并不一定就是说你QQ版本需要更新,只是因为你QQ已经登录 有的浏览器可能因为出于安全考虑,会 ...
- HoloLens开发手记 － 使用Windows设备控制台 Using Windows Device Portal
Windows设备控制台允许你通过Wi-Fi或USB来远程控制你的HoloLens设备.设备控制台是HoloLens上的一个Web Server,你可以通过PC的浏览器来连接到它.设备控制台包含了很多 ...
- Using SQLite database in your Windows 10 apps
MVP可以在channel 9上传视频了,所以准备做个英文视频传上去分享给大家,本文做稿子. Hello everyone, As we all know, SQLite is a great and ...
- 机器学习与Tensorflow（4）——卷积神经网络与tensorflow实现
1.标准卷积神经网络 标准的卷积神经网络由输入层.卷积层(convolutional layer).下采样层(downsampling layer).全连接层(fully—connected laye ...
- python 牛客网 你的输出为:空。请检查一下你的代码，有没有循环输入处理多个case。问题解决
你的输出为:空.请检查一下你的代码,有没有循环输入处理多个case.点击查看如何处理多个case 核心:他这个程序测试正确与否的流程是 连续输入多组测试数据进行测试,只有每组数据都对才行 所以必须使用 ...
- Python内置常量
引言 Python内置的常量不多,只有6个,分别是True.False.None.NotImplemented.Ellipsis.__debug__. 一. True 1. True是bool类型用来 ...
- 前端进击的巨人（五）：学会函数柯里化（curry)
柯里化(Curring, 以逻辑学家Haskell Curry命名) 写在开头 柯里化理解的基础来源于我们前几篇文章构建的知识,如果还未能掌握闭包,建议回阅前文. 代码例子会用到 apply/call ...
- Apache Commons Beanutils 一 （使用PropertyUtils访问Bean属性）
BeanUtils简要描述 beanutils,顾名思义,是java bean的一个工具类,可以帮助我们方便的读取(get)和设置(set)bean属性值.动态定义和访问bean属性: 细心的话,会发 ...