内容简介:translateflex和margin:auto2. 元素为为定宽定高(自身包含尺寸的元素)的元素
CSS - 实现垂直居中的几种方式(特别:垂直居中)
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,也会创建层叠上下文
层叠顺序
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效果增强体验,有一个绝对定位的透明层覆盖在图片上,添加一些描述信息
现象:一旦图片开始走fadeIn淡出的CSS3动画,文字跑到图片后面去了
原理:opacity的值不是1的时候,是具有层叠上下文的,层叠顺序是z-index:auto级别,跟没有z-index值的absolute绝对定位元素是平起平坐的。而本demo中的文字元素在图片元素的前面,于是,当CSS3动画只要不是最终一瞬间的opacity: 1,位于DOM流后面的图片就会遵循“后来居上”准则,覆盖文字
解决:提高文字的层叠顺序,例如,设置z-index:1
CSS - BFC
CSS - Flex
以上所述就是小编给大家介绍的《Quiz - 回顾》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Head First PHP & MySQL
Lynn Beighley、Michael Morrison / O'Reilly Media / 2008-12-29 / USD 44.99
If you're ready to create web pages more complex than those you can build with HTML and CSS, Head First PHP & MySQL is the ultimate learning guide to building dynamic, database-driven websites using P......一起来看看 《Head First PHP & MySQL》 这本书的介绍吧!