前端网页学习 Day49(z-index属性 flex布局响应式布局过渡动画)

最新推荐文章于 2022-08-22 09:57:13 发布

A_GooD_CanceR

最新推荐文章于 2022-08-22 09:57:13 发布

阅读量1.5k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/sql121407/article/details/82873515

版权

今天的学习涵盖了前端网页的几个关键概念：理解z-index属性如何控制显示层次，探索flex布局实现垂直居中，讨论响应式布局以适应不同设备，以及学习过渡和动画效果在交互中的应用。

摘要由CSDN通过智能技术生成

前端网页学习(html)

DAY49

今日内容:

z-index属性

flex布局

响应式布局

过渡

动画

z-index属性

脱离文档流的标签,具有z-index属性,可以用来控制显示层次的优先级,值为任意的正整数

<!-- 需求1:d1,d2,d3均为box的一半大小 -->
<!-- 需求2:d1左上角,d2居中,d3右下角 -->
<!-- 需求3:d2区域在最上方(会覆盖d1,d3的重叠部分) -->
<div class="box">
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</div>

CSS样式

<style type="text/css">
    .box {
      
        /*辅助子级进行绝对定位*/
        position: relative;
        width: 400px;
        height: 400px;
        background-color: red;
        margin: 0 auto;
    }
    .d1, .d2, .d3 {
      
        width: 200px;
        height: 200px;
        position: absolute;
    }
    .d1 {
      
        background-color: orange;
    }
    .d2 {
      
        background-color: blue;
        top: calc(50% - 100px);
        left: calc(50% - 100px);
    }
    .d3 {
      
        background-color: black;
        right: 0;
        bottom: 0;
    }
    .d2 {
      
        z-index: 88888;
    }
    .d3 {
      
        z-index: 666;
    }
</style>

flex布局

作用:能够方便的实现块的垂直居中

flex布局:意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>flex布局</title>
	<style type="text/css">
		.container 

最低0.47元/天解锁文章

A_GooD_CanceR

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端网页学习 Day49(z-index属性 flex布局响应式布局过渡动画)

前端网页学习(html)DAY49今日内容:z-index属性flex布局响应式布局过渡动画z-index属性脱离文档流的标签,具有z-index属性,可以用来控制显示层次的优先级,值为任意的正整数&lt;!-- 需求1:d1,d2,d3均为box的一半大小 --&gt;&lt;!-- 需求2:d1左上角,d2居中,d3右下角 --&gt;&lt;!-- 需求3:d2...
复制链接

扫一扫