Quiz - 回顾

栏目: CSS · 发布时间: 5年前

内容简介:translateflex和margin:auto2. 元素为为定宽定高(自身包含尺寸的元素)的元素

CSS - 实现垂直居中的几种方式(特别:垂直居中)

1. 元素为未知宽高的元素

flex

http://www.ruanyifeng.com/blo...
display: flex;
justify-content:center;
align-items:Center;

translate

position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;

flex和margin:auto

.box{
    display: flex;
    text-align: center;
}
.box span{margin: auto;}

2. 元素为为定宽定高(自身包含尺寸的元素)的元素

绝对定位和负边距

position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;

绝对定位和0

原理:当一个绝对定位元素,其对立定位方向属性同时有具体定位数值的时候,流体特性,具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样

width: 50%; 
  height: 50%; 
  background: #000;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0;

CSS - 层叠上下文、层叠顺序以及z-index

层叠上下文

1.HTML中的根元素<html></html>本身j就具有层叠上下文,称为“根层叠上下文”。

2.普通元素设置position属性为非static值并设置z-index属性为具体数值(不能为auto,chrome特殊),产生层叠上下文。

3.CSS3中的新属性也可以产生层叠上下文

父元素的display属性值为flex|inline-flex,子元素z-index属性值不为auto的时候,子元素为层叠上下文元素;

元素的opacity属性值不是1;

元素的transform属性值不是none;

元素mix-blend-mode属性值不是normal`;

元素的filter属性值不是none;

元素的isolation属性值是isolate;

will-change指定的属性值为上面任意一个;

元素的-webkit-overflow-scrolling属性值设置为touch。

注意:

chrome 中 position:fixed 的z-index:auto,也会创建层叠上下文

层叠顺序

Quiz - 回顾

z-index

z-index属性值并不是在任何元素上都有效果。它仅在定位元素(定义了position属性,且属性值为非static值的元素)上有效果

判断元素在Z轴上的堆叠顺序,不仅仅是直接比较两个元素的z-index值的大小,这个堆叠顺序实际由元素的层叠上下文、层叠等级共同决定

确定顺序

1.是否处于同一个层叠上下文中,谁的层叠等级大,谁在上面(怎么判断层叠等级大小呢?——看“层叠顺序”图)。

2.如果两个元素不在统一层叠上下文中,请先比较他们所处的层叠上下文的层叠等级。

3.当两个元素层叠等级相同、层叠顺序相同时,在DOM结构中后面的元素层叠等级在前面元素之上。

补充新增:

定位元素会层叠在普通元素的上面

元素一旦成为定位元素,其z-index就会自动生效,此时其z-index就是默认的auto,也就是0级别,根据上面的层叠顺序表,就会覆盖inline或block或float元素。

而不支持z-index的层叠上下文元素天然z-index:auto级别,也就意味着,层叠上下文元素和定位元素是一个层叠顺序的

实战

在实际项目中,我们可能会渐进使用CSS3的fadeIn淡入animation效果增强体验,有一个绝对定位的透明层覆盖在图片上,添加一些描述信息

Quiz - 回顾

现象:一旦图片开始走fadeIn淡出的CSS3动画,文字跑到图片后面去了

原理:opacity的值不是1的时候,是具有层叠上下文的,层叠顺序是z-index:auto级别,跟没有z-index值的absolute绝对定位元素是平起平坐的。而本demo中的文字元素在图片元素的前面,于是,当CSS3动画只要不是最终一瞬间的opacity: 1,位于DOM流后面的图片就会遵循“后来居上”准则,覆盖文字

解决:提高文字的层叠顺序,例如,设置z-index:1

CSS - BFC

CSS - Flex

http://www.ruanyifeng.com/blo...


以上所述就是小编给大家介绍的《Quiz - 回顾》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP Cookbook

PHP Cookbook

Adam Trachtenberg、David Sklar / O'Reilly Media / 2006-08-01 / USD 44.99

When it comes to creating dynamic web sites, the open source PHP language is red-hot property: used on more than 20 million web sites today, PHP is now more popular than Microsoft's ASP.NET technology......一起来看看 《PHP Cookbook》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具