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声明的一个 ...
随机推荐
- struts action和jsp之间的传值
一.jsp对Action传值 提交表单即可,Action的属性必须和表单的标签名字相同 二.Action对jsp传值: (1)利用session,(个人推荐) action中ActionContext ...
- 笔记本自带 WiFi 功能
在寝室,动网速基本崩溃.平时打电话什么的都得到阳台,有时候还听不清声音.对于学校的环境,我不说什么了. 笔记本可以上网,那就要满足手机等移动电子设备上网的上网需求. WiFi 热点就显得尤为重要了. ...
- wcf服务与web发布时无法访问 几种解决办法
1 如果wcf服务与web发布在同一iis目录下,没有跨域的问题 但发布前要修改 ServiceReferences.ClientConfig 把wcf服务地址改为你发布后的iis的ip地址( ...
- 匹配所有不可见元素,或者type为hidden的元素
查找隐藏的 tr HTML 代码: <table> <tr style="display:none"><td>Value 1</td> ...
- SQL标签
SQL标签库提供了与关系型数据库进行交互的标签. 引入语法:<%@ taglib prefix="sql" uri="http://java.sun.com/jsp ...
- Dynamics AX 2012 R2 从代码中调用SSRS Report
平时,我们制作SSRS Report的方法主要有两种:使用Query或RDP.如果需要为报表传递参数,就要在代码中为报表参数赋值,然后在代码中调用报表.下面我总结下这两种报表在代码中传参和调用的方式: ...
- php实现回复图文,图片,文字
[代码]php代码: <?php /** 微信公众平台 开发者模式 默认用户输入任何文字,均返回同一个图文信息,链接地址为手机站; 可以根据变量$keyword,即用户输入的信息,进行判断, ...
- Ajax中dataType数据类型
今天项目中使用Ajax向后台保存数据,其中dataType为'json';当请求成功后,没有走success回调,反而走了error:数据库已经成功保存数据了. 后来搞半天才知道原来dataType指 ...
- java中对插入排序的理解以及实例
一.基本思想 通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应的位置并插入. 插入排序非常类似于整扑克牌. 在开始摸牌时,左手是空的,牌面朝下放在桌上.接着,一次从桌上摸起一张牌 ...
- illustrator将图片转换成ai路径
窗口->图像描摹 第一选择模式:彩色 第二步:调整颜色的数值 最后点击工具栏上的扩展按钮转成路径 搞定~