CSS——层级
层级问题:选中的盒子显示的效果并不完整,右边的边框并没有显示红色,原因是其右边的盒子压了它的边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
width:1000px;
margin:40px auto;
}
li{
list-style:none;
width:200px;
height:300px;
border:1px solid #808080;
float:left;
cursor:pointer;
margin-left:-1px;
}
li:hover{
border:1px solid #ff0000;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
层级大小:标准流盒子,低于浮动的盒子,浮动的盒子又低于定位的盒子(高低和占不占位置无关)。
解决办法:1、必须有定位。(除去static之外)。
2、给定z-index的值为层级的值。(不给默认为0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
width:1000px;
margin:40px auto;
}
li{
list-style:none;
width:200px;
height:300px;
border:1px solid #808080;
float:left;
cursor:pointer;
margin-left:-1px;
}
li:hover{
border:1px solid #ff0000;
position:relative;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
width:1000px;
margin:40px auto;
}
li{
list-style:none;
width:200px;
height:300px;
border:1px solid #808080;
float:left;
cursor:pointer;
margin-left:-1px;
position:relative;
z-index:1;
}
li:hover{
border:1px solid #ff0000;
z-index:2;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
注意问题:
1、层级为0的盒子,也比标准流和浮动高。
2、层级为负数的盒子,比标准流和浮动低。
3、层级不取小数)
4、层级一样,后面的盒子比前面的层级高。
5、浮动或者标准流的盒子,后面的盒子比前面的层级高。
6、abselute是不占位置的,relative是站位的的。而层级的高低,是和占不占位置没有关系的。
CSS——层级的更多相关文章
- CSS 层级选择器
CSS 层级选择器 注:使用空格分隔,塞选到最后一项应用. 标签选择器 下 标签选择器 父标签 --> 指定子标签添加css属性 <html> <head> <!- ...
- 转载css层级优先级。
解读CSS样式优先级(修改门户自定义样式必读) 一.什么是CSS优先级?所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.当同一个元素(或内容)被多个CSS选择符选中时,就要按照优先权取舍 ...
- 前端学习 -- Html&Css -- 层级和透明度
层级 如果定位元素的层级是一样,则下边的元素会盖住上边的. 通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示. ...
- CSS层级关系 学习笔记
CSS 文档流 格式化上下文 Formatting Context 即初始元素定义的环境 块格式化上下文 Block Formatting Context BFC 行内格式化上下文 ...
- CSS层级关系
http://www.blogbus.com/eskimo-logs/69626018.htmlhttp://www.dmtuan.com/?p=574
- selenium+python自动化之CSS定位
一.css:属性定位 1.css可以通过元素的id.class.标签这三个常规属性直接定位到 2.如下是百度输入框的的html代码: <input id="kw" class ...
- 我的CSS架构
写在前面 都是自己看别人的架构,自己积累下来的一些东西,这里只是阐述自己的一些观念.借此希望同行交流交流下看法,共勉. 不同架构的CSS 业务流程不同,团队配员不同.会有各种各样的CSS架构. 有的会 ...
- 你所不知道的 CSS 动画技巧与细节
怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
随机推荐
- 【NJU749D】triple(莫比乌斯反演)
题意: cas<=100 n<=10^5 思路:与两个数的没什么区别 F(d)=(n div d)*(n div d-1)*(n div d-2) div 6 再加上喜闻乐见的下底函数分块 ...
- J - Invitation Cards 最短路
In the age of television, not many people attend theater performances. Antique Comedians of Malidine ...
- JAVA和C语言的区别
java语言和c语言的区别: 1 un 公司推出的Java 是面向对象程序设计语言,其适用于Internet 应用的开发,称为 ...
- SiteMesh2-sitemesh.xml的ParameterDecoratorMapper映射器的用法
继续使用上一章http://www.cnblogs.com/EasonJim/p/7086916.html的例子,改造成使用ParameterDecoratorMapper映射器的方法,这个映射器不需 ...
- Animations动画和Keyframes关键帧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- redis 主从备份自动切换+java代码实现类
转载:http://blog.csdn.net/qq_23430789/article/details/52185706 目录(?)[-] redis-0sentinel实例之间的通讯端口 maste ...
- JavaScript的原生引用类型
引用类型是一种数据结构,用于将数据和功能组织在一起,也常称做类.ECMAScript从技术上说是一门面向对象的语言.但它不具备传统的面向对象语言所支持的类和接口等基本结构. Object类型 大多数引 ...
- Mongo使用
在用mongo进行查询时,$exists表示是否document是否包括这个field,即使field的value为null也算是包括. $exists Syntax: { field: { $exi ...
- jQuery--编辑表格
表格操作是我们常常遇到的,还记得刚開始学习牛腩新闻公布系统时.跟着视频进行表格的一些基本操作.而对它的原理与概念全然不懂,不过跟着老师的操作而进行操作. 通过这次学习,对表格的操作有了进一步的了解与掌 ...
- expect安装测试-批量用户管理
安装: yum list | grep expect yum install expect 批量创建用户: ansible mysqldb -m user -a 'name=ansible state ...