zoukankan      html  css  js  c++  java
  • css详解4

    1、固定定位

    固定定位,页面内容多,页面滚动起来,才能看到固定定位效果。

    比如下面这个,随之滚动条滚动它一直在右边。比如固定导航栏,小广告,回到顶部,应用在这些地方。一直固定位置不变的。

    首先让页面能滚动起来

    <html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <p>魔降风云变</p>
        <p>魔降风云变</p>
        ...............
        <p>魔降风云变</p>
    </body>
    </html>        

    固定位置脱标,写在body的什么位置都行。我在最后一个p后面加个div

      <div class="fix">固定不变</div>

    然后给它设置样式

            .fix{
                 100px;
                height: 100px;
                background-color: red;
            }

    它现在在最下面

    把这个盒子放在很多个p标签的中间,不放到最下边 了,拖动滚动条它的位置根据页面在滚动。

     再给它设置位置固定。盒子在浏览器上找不到了。

            .fix{
                 100px;
                height: 100px;
                background-color: red;
                position: fixed;
            }

    看下面代码:

            .fix{
                 100px;
                height: 100px;
                background-color: red;
                position: fixed;
                top:0;
                left: 0;
            }

     给它给位置,拖动滚动条它的位置一直不变。并且压盖了下面的元素。现在它是在设备的左上角。

    现象:脱标;固定不变,以页面四个角为参考点

                position: fixed;
                top:0;
                right: 0;

     

                position: fixed;
                bottom:20px;
                right: -50px;

    以浏览器显示页面的四个角为原点,指定位置后滚动滚动条它相对于浏览器页面的这个位置显示不变。它的上左下右和浏览器页面对应边距离对应边属性值个位置,值可以为负,为负时是为正时的反方向移动属性值个位置。

     

    把它放在body的第一个标签,做成导航栏。并且把这个盒子宽度设为100%

            .fix{
                 100%;
                height: 100px;
                background-color: red;
                position: fixed;
                top:0px;
            }

    发生了压盖现象。

    那么内容应该往下挤盒子高度个值。

            body{margin-top:  100px}
            .fix{
                 100%;
                height: 100px;
                background-color: red;
                position: fixed;
                top:0px;
            }
    
     <div class="fix">固定不变</div>
        <p>小马过河</p>
        <p>魔降风云变</p>

    红盒子固定不变了。第二个 盒子作为内容会被压盖出不来。给body上部设置margin。这样就能显示了。

     

    下面这个可以用这个做了。

    这个也可以做左父元素,右子元素,悬浮父元素的时候空格让子元素display显示出来。默认父元素超出的子元素都是overflow: hidden;  悬浮父则overflow: visible;

    如果三角形也想出来,那么就可以用border画三角形的那个方法弄出来。

    可以用左父,右两个子。子绝父相的方法显示出来

    这时我body里面又有设置子绝父相的元素了。一个父元素设置了相对定位。

            .active{position: relative;
                background-color: yellow;}
    
    
        <p>魔降风云变</p>
        <p class="active">abc魔降风云变</p>
        <p>魔降风云变</p>

    后面设置的使用了子绝父相的父元素压盖了红色导航栏,显然是不行的

    这时需要用到z-index。它只适用于定位的元素;默认值是auto,一般属性值取数值,正数。如果它的值越大,则层级越高

           .fix{
                 100%;
                height: 100px;
                background-color: red;
                position: fixed;
                top:0px;
            }
            .active{position: relative;
                background-color: yellow;}

    那么上面都没设置用的是默认。那为什么黄色的层级大压盖了红色呢?如果都设置了定位,谁写在下面了谁层级越高。现在是要让红色层级高,因为不知道后面会用多少定位元素,那么就给红色盒子设置高点的值。

            .fix{
                 100%;
                height: 100px;
                background-color: red;
                position: fixed;
                top:0px;
                z-index: 99999;
            }

    这样红色盒子就不被z-index值低的压盖了。

    z-index:auto 可以默认为它是0,它们是一样的,那么谁在后谁层级高,能显示出来。

    下面的span行内元素设置了绝对定位,这样也是可以给这个行内元素设置宽高的。

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>魔降风云变</title>
        <style>
            .box1{
                position: absolute;
                top: 0;
                left: 0;
                 200px;
                height: 60px;
                border: 2px solid blue;
            }
            .box2{
                position: absolute;
                top: 0;
                left: 0;
                 200px;
                height: 60px;
                border: 2px solid red;
            }
        </style>
    </head>
    <body>
        <div class="father1">
            <span class="box1"></span>
        </div>
        <div class="father2">
            <div class="box2"></div>
        </div>
    </body>
    </html>
    View Code

    看不到效果:蓝框是box1 span标签  ;红色是box2, div标签。两个都是使用了绝对定位

            .box2{
                position: absolute;
                top: 20px;
                left: 0;
                 200px;
                height: 60px;
                border: 2px solid red;
            }

    现在将红框加20px的top值,红下移

    现在给蓝框加个黑色背景色,给红框加个绿色背景色 这样就看出了有压盖现象

    因为绿色盒子是在另一个的下面

    如果我给黑盒子设置z-index:10  给绿色盒子设置z-index:11,还是绿压盖了黑;

    如果我给黑盒子设置z-index:10  给绿色盒子设置z-index:6,,小于黑盒子的,那么出现了黑压盖绿

    这说明了谁的z-index数越大,谁的层级就越高,就会显示谁

    现在给两个盒子的父盒子在行内标签上设置相对定位和z-index。那么现在有种从父现象,谁的父元素z-index大,证明它的层级越高。它不会关心子盒子的z-index。上面看到的是黑压盖绿,黑的z-index大于绿。现在给它俩的父设置了z-index,绿的父大,如果显示绿压盖黑,那么证明了相对定位的父盒子z-index越大,就不再考虑各自子的z-index,父的越大子就越大

    结果如下,证明黑的绿的相对定位的父都有z-index,那么谁的父大就显示谁。这里绿的父大显示绿;从父现象

    使用场景如下,红框中的购物车z-index比下面的父的z-index要大:下面压盖的搜索框也有子绝父相的布局

    正常情况下先写黑色顶部栏再写下面搜索框的,这样相同的情况下按照先后顺序是下面的导航栏的z-index要比黑色顶部栏的大,因此这里需要调整这两个父的z-index值,让购物车的悬浮框压盖下边的

    2、圆角设置

    参考:https://book.apeland.cn/details/355/#边框属性

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
             #box{
                 200px;
                height: 200px;
                background-color: red;
             }
        </style>
    </head>
    <body>
       <div id="box"></div>
    </body>
    </html>

    先设置一个正方形

    给个边界-半径 正方形边长一般,成了圆

             #box{
                 200px;
                height: 200px;
                background-color: red;
                border-radius: 100px;
             }

    border-radius是两个方向的值,一个是水平方向,一个垂直方向的半径。比如将第二个设置为50px
             #box{
                 200px;
                height: 200px;
                background-color: red;
                border-radius: 100px 50px;
             }

    这样水平方向100,垂直方向50:

    将边半径设置为200,大小一样。

             #box{
                 200px;
                height: 200px;
                background-color: red;
                border-radius: 200px;
             }

    半径是正方形的边长和边长的一半效果一样:

    它们画圆的圆心是不同的

    验证了一下,似乎是以画出的正方形的边长到边长一半之内都是同样大小的圆。但是我们经常用边长的一半作为边界半径。

    下面看看这个小于一半的:

        <style>
             #box{
                 300px;
                height: 300px;
                background-color: red;
                border-radius: 100px;
             }
        </style>

     看看半径大于边长的似乎也可以是圆,圆的直径是边长,即使半径超过边长很多

        <style>
             #box{
                 200px;
                height: 200px;
                background-color: red;
                border-radius: 600px;
             }
        </style>

    我们经常用的是百分比来画圆:

             #box{
                 200px;
                height: 200px;
                background-color: red;
                border-radius: 50%;
             }

    圆的使用场景之一是下面小圆点:

    给圆加个边框:

             #box{
                 200px;
                height: 200px;
                background-color: red;
                border-radius: 50%;
                border: 3px solid blue;
             }

    然后悬浮在圆上的时候加个背景色:

      <style>
             #box{
                 200px;
                height: 200px;
                background-color: red;
                border-radius: 50%;
                border: 3px solid blue;
             }
           #box:hover{
              background-color: #000;
           }
        </style>

    圆使用场景之二:这样可以用圆来切头像,比如qq头像。方的变圆的。

    使用场景之三,可以做圆角

             #box{
                 200px;
                height: 200px;
                background-color: red;
                border-radius: 8px;
                border: 3px solid blue;
             }

    单个圆角的设置

    除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:

    • border-top-left-radius
    • border-top-right-radius
    • border-bottom-right-radius
    • border-bottom-left-radius
             #box{
                 200px;
                height: 200px;
                background-color: red;
                border-top-left-radius: 50px;
             }

             #box{
                 200px;
                height: 200px;
                background-color: red;
                border-top-left-radius: 50px;
                border-top-right-radius:100px;
             }

             #box{
                 200px;
                height: 100px;
                background-color: red;
                border-top-left-radius: 100px;
                border-top-right-radius:100px;
             }

        <style>
             #box{
                 200px;
                height: 100px;
                background-color: red;
                border-bottom-left-radius: 100px;
                border-bottom-right-radius:100px;
             }
        </style>

             #box{
                 200px;
                height: 100px;
                background-color: red;
                border-top-left-radius: 100px;
                border-bottom-right-radius:100px;
             }

             #box{
                 200px;
                height: 100px;
                background-color: red;
                border-top-right-radius: 100px;
                border-bottom-right-radius:100px;
             }

     

             #box{
                 100px;
                height: 200px;
                background-color: red;
                border-top-right-radius: 100px;
                border-bottom-right-radius:100px;
             }

             #box{
                 200px;
                height: 100px;
                background-color: red;
                border-left: 100px solid green;
                border-top: 100px solid green;
                border-top-right-radius: 100px;
                border-bottom-right-radius:100px;
             }

             #box{
                 200px;
                height: 100px;
                background-color: red;
                border-left: 100px solid fuchsia;
                border-top: 100px solid green;
                border-top-right-radius: 100px;
                border-bottom-right-radius:100px;
             }

             #box{
                 200px;
                height: 100px;
                background-color: red;
                border-left: 100px solid #ffffff;
                border-top: 100px solid green;
                border-top-right-radius: 100px;
                border-bottom-right-radius:100px;
             }

             #box{
                 200px;
                height: 100px;
                background-color: red;
                border-left: 100px solid blue;
                border-top: 100px solid #ffffff;
                border-top-right-radius: 100px;
                border-bottom-right-radius:100px;
             }

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
             #box0{
                 200px;
                height: 100px;
                background-color: red;
                border-top: 100px solid #ffffff;
                border-top-left-radius: 100px;
                border-bottom-left-radius:100px;
                float: left;
             }
             #box{
                 200px;
                height: 100px;
                background-color: red;
                border-left: 100px solid blue;
                border-top: 100px solid #ffffff;
                border-top-right-radius: 100px;
                border-bottom-right-radius:100px;
                float: left;
             }
        </style>
    </head>
    <body>
       <div id="box0"></div>
       <div id="box"></div>
    </body>
    </html>

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
             #box0{
                 100px;
                height: 100px;
                background-color: red;
                border-radius: 100px;
                position: relative;
                left: 150px;
    
             }
             #box1{
                 400px;
                height: 130px;
                background-color: red;
                border-top-left-radius: 200px;
                border-top-right-radius: 200px;
                /*border-radius: 100px;*/
                line-height: 130px;
                text-align: center;
                font-size: 20px;
             }
             #tui{
                height: 250px;
                 400px;
                position: relative;
             }
             #tui .left{
                height: 250px;
                 100px;
                position: absolute;
                left: 50px;
                background-color: red;
             }
             .mid{
                height: 100px;
                 100px;
                background-color: red;
                position: absolute;
                left: 150px;
                border-bottom-left-radius: 30px ;
                border-bottom-right-radius: 30px ;
             }
             .right{
                height: 250px;
                 100px;
                position: absolute;
                left:250px;
                background-color: red;
             }
           #box0 div{
               20px;
              height: 20px;
              background-color: black;
              border :1px solid blue;
              border-radius: 10px;
           }
           #box0 .yan1{
              position: absolute;
              top: 20px;
              left: 20px;
           }
             #box0 .yan2{
              position: absolute;
              top: 20px;
              left: 56px;
           }
           #box0 .zui{
              height: 30px;
               60px;
              background-color: gold;
              border-bottom-left-radius: 30px;
              border-bottom-right-radius: 30px;
              position: absolute;
              top: 51px;
              left: 19px;
           }
           #fa{
              height: 50px;
               400px;
              position: relative;
           }
           #fa .fa1{
               2px;
              height:50px;
              background-color: black;
              position: absolute;
              left: 183px;
    
           }
             #fa .fa2{
               2px;
              height:50px;
              background-color: black;
                position: absolute;
                left: 213px;
           }
           #foot{
              font-size: 20px;
              text-align: center;
              margin-top: 5px;
              color: blue;
               400px;
           }
        </style>
    </head>
    <body>
       <div id="fa">
          <div class="fa1"></div>
          <div class="fa2"></div>
       </div>
       <div id="box0">
          <div class="yan1"></div>
          <div class="yan2"></div>
          <div class="zui"> </div>
       </div>
       <div id="box1">please guess who am i ?</div>
       <div id="tui">
          <div class="left"></div>
          <div class="mid"></div>
          <div class="right"></div>
       </div>
       <div id="foot">create by mcw!</div>
    </body>
    </html>
    View Code

     

     有时间研究一下大风车

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
           div{
               200px;
              height: 200px;
              border:50px solid red;
              border-radius: 100px;
           }
        </style>
    </head>
    <body>
       <div ></div>
    </body>
    </html>

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
           div{
               200px;
              height: 200px;
              border:50px solid red;
              border-radius: 200px;
           }
        </style>
    </head>
    <body>
       <div ></div>
    </body>
    </html>

     斜线怎么画呢?

     qq头像,微信头像:

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
           img{
               200px;
              height: 200px;
              border: 2px solid red;
              border-radius: 200px;
           }
        </style>
    </head>
    <body>
    <img src="timg.gif" alt="">
    </body>
    </html>
    View Code

    原图:

     
  • 相关阅读:
    centos8 将SSSD配置为使用LDAP并要求TLS身份验证
    Centos8 搭建 kafka2.8 .net5 简单使用kafka
    .net core 3.1 ActionFilter 拦截器 偶然 OnActionExecuting 中HttpContext.Session.Id 为空字符串 的问题
    Springboot根据不同环境加载对应的配置
    VMware Workstation12 安装 Centos8.3
    .net core json配置文件小结
    springboot mybatisplus createtime和updatetime自动填充
    .net core autofac依赖注入简洁版
    .Net Core 使用 redis 存储 session
    .Net Core 接入 RocketMQ
  • 原文地址:https://www.cnblogs.com/machangwei-8/p/10961322.html
Copyright © 2011-2022 走看看