css详解4

Myth丶恋晨 2022-10-02 15:57 153阅读 0赞

## 1、固定定位 ##

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

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

![1286512-20190601224616193-683824522.png][]

首先让页面能滚动起来

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

![1286512-20190601225125196-37457499.png][]

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

然后给它设置样式

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

它现在在最下面

![1286512-20190601225602728-596892996.png][]

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

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

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

看下面代码：

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

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

现象：脱标；固定不变，以页面四个角为参考点

![1286512-20190601230223154-1088145617.png][]

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

![1286512-20190601230618203-1438448013.png][]

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

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

![1286512-20190601230800670-417259505.png][]

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

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

发生了压盖现象。

![1286512-20190601231710367-569446174.png][]

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

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

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

![1286512-20190601232050651-602230127.png][]

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

![1286512-20190601232613048-1619353312.png][]

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

![1286512-20190601232639670-1498825381.png][]

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

![1286512-20190601233125298-343422027.png][]

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

![1286512-20190601233306434-595067487.png][]

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

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

![1286512-20190601233841943-1214806842.png][]

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

![1286512-20190601233856303-1470885190.png][]

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

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

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

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

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

![1286512-20190601235003586-45559308.png][]

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

![1286512-20190601235328797-169545361.png][]

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>魔降风云变</title>
        <style>
            .box1{
                position: absolute;
                top: 0;
                left: 0;
                width: 200px;
                height: 60px;
                border: 2px solid blue;
            }
            .box2{
                position: absolute;
                top: 0;
                left: 0;
                width: 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>

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

![1286512-20190615165439508-78569317.png][]

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

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

![1286512-20190615165833127-1094309437.png][]

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

![1286512-20190615170157262-183438690.png][]

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

![1286512-20190615170326765-1521792607.png][]

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

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

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

![1286512-20190615170642770-1778852182.png][]

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

![1286512-20190615171158057-1391413219.png][]

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

![1286512-20190615173641024-1861398911.png][]

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

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

![1286512-20190615173831961-1372354503.png][]

## 2、圆角设置 ##

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

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

先设置一个正方形

![1286512-20190603143446658-1880487162.png][]

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

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

![1286512-20190603143701850-689600411.png][]

border-radius是两个方向的值，一个是水平方向，一个垂直方向的半径。比如将第二个设置为50px

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

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

![1286512-20190603143949100-1725641902.png][]

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

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

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

![1286512-20190603144156102-1763903220.png][]

它们画圆的圆心是不同的

![1286512-20190603144429185-1410985200.png][]

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

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

![1286512-20190603145136527-1152388970.png][]

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

![1286512-20190603145322542-347598910.png][]

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

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

![1286512-20190603145421165-414431247.png][]

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

![1286512-20190603145525528-1875500519.png][]

给圆加个边框：

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

![1286512-20190603145629066-2086945279.png][]

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

![1286512-20190603145757181-354838635.png][]

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

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

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

![1286512-20190603150043543-1124130895.png][]

**单个圆角的设置**

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

*  border-top-left-radius
 *  border-top-right-radius
 *  border-bottom-right-radius
 *  border-bottom-left-radius

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

![1286512-20190603174110798-225686795.png][]

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

![1286512-20190603174313410-1336816401.png][]

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

![1286512-20190603174526819-2146670393.png][]

![1286512-20190603174459469-368544378.png][]

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

![1286512-20190603174623492-1106800013.png][]

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

![1286512-20190603174856483-1266227186.png][]

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

![1286512-20190603174826942-1245625736.png][]

#box{
                width: 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;
             }

![1286512-20190603175148781-24264121.png][]

#box{
                width: 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;
             }

![1286512-20190603175421450-69489890.png][]

#box{
                width: 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;
             }

![1286512-20190603175525153-1985655421.png][]

#box{
                width: 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;
             }

![1286512-20190603175626173-565589168.png][]

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
             #box0{
                width: 200px;
                height: 100px;
                background-color: red;
                border-top: 100px solid #ffffff;
                border-top-left-radius: 100px;
                border-bottom-left-radius:100px;
                float: left;
             }
             #box{
                width: 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>

![1286512-20190603180039394-1605756868.png][]

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
             #box0{
                width: 100px;
                height: 100px;
                background-color: red;
                border-radius: 100px;
                position: relative;
                left: 150px;
    
             }
             #box1{
                width: 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;
                width: 400px;
                position: relative;
             }
             #tui .left{
                height: 250px;
                width: 100px;
                position: absolute;
                left: 50px;
                background-color: red;
             }
             .mid{
                height: 100px;
                width: 100px;
                background-color: red;
                position: absolute;
                left: 150px;
                border-bottom-left-radius: 30px ;
                border-bottom-right-radius: 30px ;
             }
             .right{
                height: 250px;
                width: 100px;
                position: absolute;
                left:250px;
                background-color: red;
             }
           #box0 div{
              width: 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;
              width: 60px;
              background-color: gold;
              border-bottom-left-radius: 30px;
              border-bottom-right-radius: 30px;
              position: absolute;
              top: 51px;
              left: 19px;
           }
           #fa{
              height: 50px;
              width: 400px;
              position: relative;
           }
           #fa .fa1{
              width: 2px;
              height:50px;
              background-color: black;
              position: absolute;
              left: 183px;
    
           }
             #fa .fa2{
              width: 2px;
              height:50px;
              background-color: black;
                position: absolute;
                left: 213px;
           }
           #foot{
              font-size: 20px;
              text-align: center;
              margin-top: 5px;
              color: blue;
              width: 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>

![1286512-20190603192711234-332097220.png][]

有时间研究一下大风车

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

![1286512-20190603193449359-1392284850.png][]

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

![1286512-20190603193528367-1540189956.png][]

斜线怎么画呢？

qq头像，微信头像：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

![1286512-20190603194348953-993203746.png][]

原图：

![1286512-20190603194445890-1247974143.png][]

转载于:https://www.cnblogs.com/machangwei-8/p/10961322.html

[1286512-20190601224616193-683824522.png]: /images/20220109/88177a6393694edaa078562d50001bf8.png
[1286512-20190601225125196-37457499.png]: /images/20220109/596b51b8cd00411f90a82146a6389597.png
[1286512-20190601225602728-596892996.png]: /images/20220109/68dccebe0f5042949c68dc7702a39431.png
[1286512-20190601230223154-1088145617.png]: /images/20220109/4cdcd41f803c4d18b180bfce56d8fcb8.png
[1286512-20190601230618203-1438448013.png]: /images/20220109/12cc71d362984b76a695344bee403cab.png
[1286512-20190601230800670-417259505.png]: /images/20220109/84123fc92aa847b6b8d9799513f50c27.png
[1286512-20190601231710367-569446174.png]: /images/20220109/ac3516a5c9b04e2eb9f20ffca34642b3.png
[1286512-20190601232050651-602230127.png]: /images/20220109/d44b25c65de440cba90b720c3aa679c8.png
[1286512-20190601232613048-1619353312.png]: /images/20220109/3620168d2abb473fba1fcb5bb000fc08.png
[1286512-20190601232639670-1498825381.png]: /images/20220109/3b3b372e38dc4a59861257c6156ae73b.png
[1286512-20190601233125298-343422027.png]: /images/20220109/ec110f37d8384ed49f33836b16d991e9.png
[1286512-20190601233306434-595067487.png]: /images/20220109/9a86cf42d7694ddfb41dc43dc26c48e6.png
[1286512-20190601233841943-1214806842.png]: /images/20220109/28f3dc8b60794c1f8a75a61b0f2b4e1d.png
[1286512-20190601233856303-1470885190.png]: /images/20220109/0782f887747141f8a2ca38dd595f9e60.png
[1286512-20190601235003586-45559308.png]: /images/20220109/c877b29e5ace4562a73c2479e80b9306.png
[1286512-20190601235328797-169545361.png]: /images/20220109/c18618c45d1c4098a07fa0930c6f11bc.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220109/5825b896072b480fbb201487e11d77f3.png
[1286512-20190615165439508-78569317.png]: /images/20220109/9843c93722124fe980c44652317764fe.png
[1286512-20190615165833127-1094309437.png]: /images/20220109/ecd7df0ccc4c495c983cc998618a2aaf.png
[1286512-20190615170157262-183438690.png]: /images/20220109/4147f6ae762640278cfbe17fa42335c6.png
[1286512-20190615170326765-1521792607.png]: /images/20220109/dc4cf3dbe19943088a60bbb89cca47bd.png
[1286512-20190615170642770-1778852182.png]: /images/20220109/7b61c8cae70e450386a8913741edb3bb.png
[1286512-20190615171158057-1391413219.png]: /images/20220109/6ef6d490e23a4afabb2516193c7c09e3.png
[1286512-20190615173641024-1861398911.png]: /images/20220109/60f21b68176c4032a289095513d064b0.png
[1286512-20190615173831961-1372354503.png]: /images/20220109/25286c9ed6614a72929db4b4fdd8fcb8.png
[1286512-20190603143446658-1880487162.png]: /images/20220109/000eac912c2f462bb7bbba7b500dd066.png
[1286512-20190603143701850-689600411.png]: /images/20220109/9db1cf2dc20d44e8b536d6ccb7e7aeb6.png
[1286512-20190603143949100-1725641902.png]: /images/20220109/affd6d7ea12c4a1ba0c81b872ad1dff1.png
[1286512-20190603144156102-1763903220.png]: /images/20220109/598356e6142a403b8a6a05cf5e6db3fc.png
[1286512-20190603144429185-1410985200.png]: /images/20220109/64305dbd8fed4caea5ffad740927a24b.png
[1286512-20190603145136527-1152388970.png]: /images/20220109/6b596f2b7a6e45fe85323933b9e0b1c5.png
[1286512-20190603145322542-347598910.png]: /images/20220109/e980fbb04231455782e6f573b6f80014.png
[1286512-20190603145421165-414431247.png]: /images/20220109/d14d63601ec7481da2c6c7d20b5a4a87.png
[1286512-20190603145525528-1875500519.png]: /images/20220109/6774fbd0c89b4155be876a444a17c594.png
[1286512-20190603145629066-2086945279.png]: /images/20220109/04dd32142eff41cb96991c9d3eb0f072.png
[1286512-20190603145757181-354838635.png]: /images/20220109/56a7de14b8ec4e6e991c0f3d289525f0.png
[1286512-20190603150043543-1124130895.png]: /images/20220109/3389b1f7b4af4668a2f7cdac3e159576.png
[1286512-20190603174110798-225686795.png]: /images/20220109/56214b69980b43c0a868ba4b70123d62.png
[1286512-20190603174313410-1336816401.png]: /images/20220109/1bc95c7f69dc42ed8ee3d962e74997f8.png
[1286512-20190603174526819-2146670393.png]: /images/20220109/a95325e3b8084b098f47769cb9e2d742.png
[1286512-20190603174459469-368544378.png]: /images/20220109/6ceffd90280947228b617f95d1d7e06a.png
[1286512-20190603174623492-1106800013.png]: /images/20220109/44c37bbf07db406f9a8da850728031b9.png
[1286512-20190603174856483-1266227186.png]: /images/20220109/dbc1b59962284ac0ac5b086d3e05e197.png
[1286512-20190603174826942-1245625736.png]: /images/20220109/1c73b4a98a664b7680450cc7dac84b98.png
[1286512-20190603175148781-24264121.png]: /images/20220109/453f0288af8e4d868da684197f701019.png
[1286512-20190603175421450-69489890.png]: /images/20220109/5b6eebfacd374e0e9b0f82647e8477a2.png
[1286512-20190603175525153-1985655421.png]: /images/20220109/cec1ea60d97b40ec8f46a54a7601cf20.png
[1286512-20190603175626173-565589168.png]: /images/20220109/f3ca3ae47297447fa3892f6cfa5bf519.png
[1286512-20190603180039394-1605756868.png]: /images/20220109/e002ad2e19664723adfc7dff6af0f2d0.png
[1286512-20190603192711234-332097220.png]: /images/20220109/343b27bda47e410493c291c68d932820.png
[1286512-20190603193449359-1392284850.png]: /images/20220109/895240b34ec142f58f51285e951d6cfa.png
[1286512-20190603193528367-1540189956.png]: /images/20220109/903b6b5c244c484884ce8520a883591f.png
[1286512-20190603194348953-993203746.png]: /images/20220109/b14a8e0a779b42e1b167a17e5de3bf11.png
[1286512-20190603194445890-1247974143.png]: /images/20220109/081cead4b8604ff29f3becbab0dd895b.png