day-52前端

标签的隐藏与四种整体写法

标签的隐藏目的：

　　用来做一些标签的显示隐藏切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            border-radius: 50%;
            /*border-style: solid;*/
            /*border-width: 1px;*/
            /*border-color: red;*/
                                                                    /*3种整体写法*/
            color: green;
            border: 1px solid red;

            background: url("img/001.png") no-repeat 0 0;            /*图片，不平铺，移动位置*/

            font: normal 30px/100px 'Arial';                         /*字重，字体大小，行高，字族(字体常用写法)*/
            color: green;
            text-align: center;

 　　　　　　box-shadow:  0 150px 10px 0 green;　　　　　　　　　　　　　　/*x轴偏移 y轴偏移 虚化程度 阴影宽度 颜色*/



        }
        
        .d1:hover ~ .d2 {
            display: block;
        }

        .d2 {
            
            display: none;                                    /*1.拿走了，在页面中不占位，但重新显示，任然占位*/
        }
        .d3 { 
            
            opacity: 0.5;                                    /*2.修改盒子的透明度，值为0，完全透明，但在页面中占位，值为1不透明*/
        }
        
    </style>
</head>
<body>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</body>
</html>

定位布局

　　一旦打开定位属性，left、right、top、bottom四个方位词均能参与布局

固定定位：

　　1.固定定位参考浏览器窗口
　　2.布局依据：固定定位的盒子四边距浏览器窗口四边的距离：eg：left - 左距左，right - 右距右
　　3.同时出现左右取左，上下去上

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
      
            height: 500vw;                    /* 当前页面窗口的宽高(随着幕尺寸变化而变化)：vw vh */
            background-color: red;
        }
        .tag {
            width: 180px;
            height: 300px;
            background-color: orange;

      
            position: fixed;
            left: 0;
            top: calc(50% - 150px);         /*左侧居中*/
            right: 50px;
            bottom: 20px;
        }
        .flag {
            width: 220px;
            height: 330px;
            background-color: pink;

            position: fixed;
            left: 0;
            top: calc(50% - 165px);
        }
        .tag {
                                            /*z-index值就是大于等于1的正整数，
                                            多个重叠图层通过z-index值决定上下图层显示先后（谁大，谁在上面），浮动也适用*/
            z-index: 666;
        }
        .flag {
            z-index: 888;
        }

    </style>
</head>
<body>
<div class="tag"></div>
<div class="box"></div>
<div class="flag"></div>
</body>
</html>

绝对定位

　　1.子标签获取不到父级标签的宽，也撑不开父级的高(脱离父级标签，兄弟标签相互不影响，不会换行)
　　　　所一子标签必须自己设置宽高，父级也必须自己设置宽高

　　2.一个标签要随着父级移动而移动(子级布局完毕后相对于父级位置是静止的)

　 3.参考系：最近的定位了的父级(父级三种定位都可以用，父

　　　　　　可以选取 fixed、 absolute，但这两种定位都会影响盒模型，relative定位不会影响盒模型)

　　4、z-index 值能改变重叠的兄弟图层上下关系

　　5.上距上(上面的边距离父级上面的边)...下距下

　　6.上下去上、左右取左

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orange;
            margin: 100px auto 0;
        }
        .s {
            width: 100px;
            height: 100px;
            font: normal 20px/100px 'Arial';
            text-align: center;
        }
        .s1 { background-color: red }
        .s2 { background-color: pink }
        .s3 { background-color: green }


       
        .box {
          
            position: relative;
        }
        .s1 {
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 1;
        }
        .s2 {
            bottom: 50px;
            left: 0;
            z-index: 10;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="s s1">1</div>
        <div class="s s2">2</div>
        <div class="s s3">3</div>
    </div>
</body>
</html>

相对定位

　　1、父相子绝

　　2.参考系：自身原有位置，且自身偏移不影响原有位置,因为偏移的是图层

　　3、相对定位也存在独立使用方位移动，但是可以用盒模型完全取代，所以一般不用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orange;
            border: 1px solid black;
        }

        .box {
            /*margin-left: 100px;*/
            /*margin-right: 100px;*/
            /*margin-top: 100px;*/
        }

        .box {
            
            position: relative;
            /*left: 100px;*/
            /*right: 100px;*/
            /*top: 100px;*/
            /*bottom: 100px;*/
           
        }

        p {
            margin: 0;
            border: 1px solid black;
        }
    </style>

    <style>
        .box {
            margin: 10px 100px;
            position: absolute;
        }
    </style>

</head>
<body>
<div class="box">12345</div>
<p>12345</p>
</body>
</html>

猜你喜欢