前端学习4——自学习梳理

簡訫37

于 2024-07-24 20:10:57 发布

阅读量178

点赞数 8

文章标签：前端学习

本文链接：https://blog.csdn.net/qq_63125992/article/details/140672022

版权

续弹性盒子模型

介绍弹性盒子的一些属性(基本属性以及布局(重要：定位))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/弹性盒子.css">
</head>
<body>
    <div class="parent">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>
</body>
</html>

/*3、justify-content 控制弹性盒子内子元素的分布方式
    flex-start：位于开始位置
    flex-end:位于结束位置
    center:位于中间位置
    space-between:空白位于元素之间
    space-around:空白位于元素周围
*/
/*1、flex-direction:控制弹性盒子内子元素的排列方向  row  row-reverse column column-reverse 默认row*/
/*2、flex-wrap：控制弹性盒子内子元素是否换行  wrap换行 nowrap不换行;*/

/* 4、align-items:控制弹性盒子内子元素垂直方向的对齐方式 flex-start flex-end; center*/


/* 5、align-content控制弹性盒子内多行元素分布方式  flex-start  flex-end center space-between space-around*/

.parent{
    width:800px;
    height: 1300px;
    background-color: pink;
    /* display: flex; */
    /* flex-direction:row-reverse;    */
    /* flex-wrap: wrap; */
    /* justify-content:space-around; */
    /* align-items: center; */
    /* align-content: space-around; */
    position: relative;
}
/* position用于设置定位模式 */

/* static：静态模式（默认）*/
/* fixed：固定模式 特点：释放原来的空间,不随浏览器的滚动而滚动,参考整个浏览器 */
/* relative:相对模式 特点：不释放原来的空间 随浏览器的滚动而滚动 参考自己原来的位置*/
/* absolute:绝对模式 特点：释放原来的空间 随浏览器的滚动而滚动 参考整个浏览器*/
/* 结合模式 父级元素用相对模式（relative） 子集元素用绝对模式（absolute）  
特点：释放原来的空间 随浏览器的滚动而滚动 参考父级元素*/

.left{
    width:200px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    top:5px;
    left:90px;
    z-index: 6;
}
/* z-index 设置定位层级，值越大越靠上 */

.middle{
    width:200px;
    height: 100px;
    background-color: purple;
    position: absolute;
    top:20px;
    left:80px;
    /* bottom: 50px;
    right:100px; */
    z-index: 10;
}
.right{
    width:200px;
    height: 100px;
    background-color:greenyellow;
    position: absolute;
    top:50px;
    left:60px;
    z-index: 1;
}