z-index、display、selector选择器优先级css优先级面试用到
z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面。
relative、absolute、fixed这三种情况可以使用z-index。
static不可以使用。
display属性:
常见属性值:
1.none;隐藏对象(对象完全消失于文档流)而opacity:0;(透明度)完全透明,hidden也是隐藏,但是还留有位置。
2.inline;指定对象为内联元素
3.block; 指定对象为块元素
4.inline-block;指定对象为内联块元素
5.table-cell;指定对象作为表格单元格:
我们在使用table时,单元格是有垂直居中的特性的。
原因是单元格具有“table-cell”属性,我们为了使其他元素具有这种属性添加:
display:table-cell;和vertical-align:middle;这两个属性,使它里面的内容可以居中显示。
(加了table-cell属性的行内元素可以设置宽和高。)例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
table,div{border: 1px solid red;}
td,div{width: 300px; height: 100px;}
div{display: table-cell; vertical-align: middle;}
</style>
</head>
<body>
<table>
<tr>
<td>allalalal</td>
</tr>
</table>
<div>allalalal</div>
</body>
</html>
此例两个显示一样。
如果用line-height也可以做到,但是line-height要跟随元素的高度,如果修改需要手动修改,而
table-cell是自适应的,比较方便。
css优先级:
优先级数值比较,以数值大的为准:(有一种更高的优先级!important,但是这不属于正常的形式,不建议使用。)
style{行内样式} = 1000
id=100
class="10"
element(元素也叫selector)=1
通常面试时问到的css选择器是指“基础选择器”的优先级,如下:
id>class>元素>*
important>内联>ID>类>标签|伪类|属性选择器>伪元素>集成>通配符
z-index、display、selector选择器优先级css优先级面试用到的更多相关文章
- css选择器及css优先级
三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...
- 关于CSS的优先级,CSS优先级计算
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...
- 关于CSS的优先级,CSS优先级计算,多个class引用
原则一: 继承不如指定 原则二: #id > .class > 标签选择符 原则三:越具体越强大 原则四:标签#id >#id ; 标签.class > .class CSS优 ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别
在写一个TAB选项卡的时候遇到几个有意思的问题,记录下来 先把代码贴出来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- CSS选择器整理以及优先级介绍
一.基础选择器 选择器 名称 描述 兼容性 * 通配选择器 选择所有的元素 ie6+ E 元素选择器 选择指定的元素 ie6+ #idName id选择器 选择id属性等于idName的元素 ie6+ ...
- CSS优先级
一.CSS代码出现的几个位置 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下:(外部样式)Extern ...
- css 优先级的bug
对于前端而言,了解css样式的优先级,对开发或处理bug有着事半功倍的效果,今天在做项目的时候,突然碰到一个优先级的小问题,刚开始不知道所因,后来才发现这个问题是由优先级造成的.先描述下问题,鼠标悬停 ...
- 前端面试题-CSS优先级
一.选择器优先级 浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值.优先级是基于不同种类选择器组成的匹配规则. 二.优先级计算 优先级就是分配给指定的CSS声明的一个 ...
随机推荐
- 我们应该如何去了解JavaScript引擎的工作原理
“读了你的几篇关于JS(变量对象.作用域.上下文.执行代码)的文章,我个人觉得有点抽象,难以深刻理解.我想请教下通过什么途径能够深入点的了解javascript解析引擎在执行代码前后是怎么工作的,ec ...
- 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数008,matrix,矩阵函数
** 3dFromFundamentalMatrix( Rows1, Cols1, Rows2, Cols2, CovRR1, CovRC1, CovCC1, CovRR2, CovRC2, CovC ...
- 如何知道btree树的高度
来自网络,总结到这里: 当我想看btree树高度的时候,筛选出来这篇文章"为什么 B-tree 在不同著作中度的定义有一定差别?",知道了高度的算法是这个公式:但是里面又提高t和出 ...
- wex5 教程 之 图文讲解 后台管理界面设计与技巧
视频教程地址:http://v.youku.com/v_show/id_XMTgwOTAyMTkyMA==.html?from=s1.8-1-1.2&spm=a2h0k.8191407.0.0 ...
- Sprint第二个冲刺(第八天)
一.Sprint介绍 任务进度: 二.Sprint周期 看板: 燃尽图:
- HTML5正确的嵌入flash
<object type="application/x-shockwave-flash" data="your-flash-file.swf" width ...
- Team Queue (uva540 队列模拟)
Team Queue Queues and Priority Queues are data structures which are known to most computer scientist ...
- TortoiseSVN安装使用
TortoiseSVN是windows平台下Subversion的免费开源客户端. 一般我们都是先讲讲服务器的配置,然后再讲客户端的使用,但是在TortoiseSVN上,却可以反过来.因为,如果你的要 ...
- UIDatePicker 日期/时间选取器(滚轮)—IOS开发
UIDatePicker 是一个控制器类,封装了 UIPickerView,但是他是UIControl的子类,专门用于接受日期.时间和持续时长的输入.日期选取器的各列会按照指定的风格进行自动配置,这样 ...
- 使用exec命令删除前几天产生的日志
上次学习了访问某个网站并产生相应的日志保存在指定位置,但是时间长了,日志会占用磁盘大量的空间,下面使用exec这个命令删除之前的日志: 命令格式: find 目录绝对路径 -mtime +n(时间) ...