乐趣区

关于css:CSS定位及圆角矩形6

jiezi

定位

布局的外围：css 摆放盒子的地位

定位：将盒子定在某一个地位，自在的沉没其它盒子下面

定位 = 定位模式 + 边偏移

边偏移

三种布局机制的高低程序

规范流 + 浮动 + 定位

定位模式 

 选择器 {position: 属性值}

动态定位（理解）

static: 动态定位 动态定位是定位模式中的默认属性，没有边偏移，在网布布局中简直不必 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: static;
            top: 200px;
            left: 200px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

relative（理解）

绝对定位依据本身规范流的地位来进行边偏移。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 改为绝对定位 */
            position: relative;
            top: 200px;
            left: 200px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

绝对定位的两个个性

  • 持续占有原来的地位
  • 绝对于它自身的地位来进行边偏移 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        .box2 {
            position: relative;
            top: 200px;
            left: 200px;
            background-color: brown;
        }
    </style>
</head>

<body>

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

相对定位

相对定位的特点

  • 不占有原来的地位，脱离规范流
  • 相对定位以父元素的定位为准，父元素不能是动态定位，如若父元素没有定位，便以浏览器的视口为准 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 600px;
            height: 600px;
            background-color: brown;
            position: relative;
        }
        
        .box1,
        .box2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        
        .box1 {
            background-color: red;
            position: absolute;
            top: 100px;
            left: 300px
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

</html>

子绝父相

简略而言。就是子元素用相对定位，父元素用绝对定位，只有这样，才不会影响上面的规范流布局

在此案例中，两个箭头应用的是相对定位，而父元素应用的是绝对定位 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .pic {
            position: relative;
            width: 600px;
            height: 600px;
            margin: 200px auto;
        }
        
        .arr-left {
            position: absolute;
            top: 300px;
            left: 0;
        }
        
        .arr-right {
            position: absolute;
            top: 300px;
            right: 0!important;
        }
    </style>
</head>

<body>

    <div class="pic">
        <img src="./image/img-1.gif" alt="">
        <img src="./image/ 箭头_线性_左.png" alt=""class="arr-left">
        <img src="./image/ 箭头_线性_右.png" alt="" class="arr-right ">
    </div>
    < </body>

</html>

哈格达斯案例 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: relative;
            width: 310px;
            height: 190px;
            padding: 15px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }
        
        img:nth-child(2) {
            position: absolute;
            top: 0;
            left: 0;
        }
        
        img:nth-child(3) {
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./image/adv.jpg" alt="">
        <img src="./image/top.gif" alt="">
        <img src="./image/right.gif" alt="">
    </div>
</body>

</html>

固定定位

固定定位的特点

  • 脱离规范流
  • 不随滚动条滚动而滚动，只认浏览器视口 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {height: 3000px;}
        
        img {
            position: fixed;
            width: 200px;
            top: 200px;
            left: 0;
        }
        
        p {
            width: 100%;
            height: 100px;
            margin: 50px 0px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <img src="./image/img-1.gif" alt="">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</body>

</html>

新浪案例

留神在这里新浪导航是一张图片 头部以及两侧的广告栏应用的是固定定位 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .header {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #FCFCFC;
            text-align: center;
        }
        
        .content {
            width: 1020px;
            height: 1760px;
            margin: auto;
            margin-top: 44px;
        }
        
        .ad-l {
            position: fixed;
            top: 200px;
            left: 0;
        }
        
        .ad-r {
            position: fixed;
            top: 200px;
            right: 0;
        }
    </style>
</head>

<body>
    <img src="./image/ad-l.png" alt=""class="ad-l">
    <img src="./image/ad-r.png" alt=""class="ad-r">
    <div class="header">
        <img src="./image/top.png" alt=""class="top">
    </div>
    <div class="content">
        <img src="./image/box.png" alt="">
    </div>



</body>

</html>

相对定位的盒子居中对齐

原理

  • 先挪动父元素的一半 left:50%
  • 挪动本身宽度的负一半 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            left: 50%;
            margin-left: -200px;
            width: 400px;
            height: 400px;
            background-color: green;
        }
    </style>
 </head>

<body>
    <div class="box"></div>
</body>

</html>

重叠程序

应用定位布局时，通常会呈现盒子重叠的状况下，定位的盒子青出于蓝，z-index 能够扭转定位的盒子重叠程序的问题 

1.z-index 的值能够是正整数  负整数 0 等等。数值越大，盒子越靠上
2.z-index 的值不能跟单位，否则不失效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {margin: 0;
            padding: 0;
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
        
        .box2 {
            top: 100px;
            left: 100px;
            background-color: red;
            z-index: 6;
        }
        
        .box3 {
            top: 200px;
            left: 200px;
            background-color: grey;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

定位扭转 display 属性

display 是显示模式 能够通过以下模式扭转 display 属性

  • 应用 inline-block 转换行内块显示模式
  • 应用 float 转换相似行内块显示模式，然而脱离规范流
  • 应用定位模式中的 absolute 或 fixed 也能够扭转显示模式

通过以上论断得悉：加了浮动或相对定位 固定定位就不须要转换显示模式了 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            position: absolute;
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: indigo;
        }
    </style>
</head>

<body>
    <span> 尧子陌 </span>
</body>

</html>

外边距合并问题

浮动 相对定位（固定定位）都能够扭转外边距合并问题 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 600PX;
            height: 600PX;
            background-color: PINK;
        }
        
        .son {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

圆角矩形设置四个角

留神 有程序，能够简写

淘宝动态轮播图 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            position: relative;
            width: 520px;
            height: 280px;
            margin: 200px auto;
            background-color: pink;
        }
        
        li {list-style: none;}
        
        .arr-left,
        .arr-right {
            /* 设置定位的元素  能够不必转换显示模式 */
            position: absolute;
            /* 定位盒子的盒子要实现居中对齐的成果  先走父元素的一半  再走本身的负一半 */
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            color: white;
            line-height: 30px;
            text-decoration: none;
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .arr-left {
            text-align: left;
            left: 0;
            border-radius: 0px 50% 50% 0px;
        }
        
        .arr-right {
            text-align: right;
            right: 0;
            border-radius: 50% 0px 0px 50%;
        }
        /* 并集选择器个体申明 */
        
        .arr-left:hover,
        .arr-right:hover {
            color: royalblue;
            background-color: rgba(0, 0, 0, 0.8);
        }
        
        .circle {
            position: absolute;
            left: 50%;
            margin-left: -60px;
            bottom: 20px;
            width: 120px;
            height: 20px;
            background-color: pink;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.6);
        }
        
        .circle li {
            float: left;
            width: 10px;
            height: 10px;
            margin: 5px;
            background-color: white;
            border-radius: 50%;
        }
        /* 权重问题 所以要权重叠加 确保以后 li 失效 */
        
        .circle .current {background-color: red;}
    </style>
</head>

<body>
    <div class="container">
        <!-- 左按钮 -->
        <a href="#" class="arr-left">&lt;</a>
        <!-- 右按钮 -->
        <a href="#" class="arr-right">&gt;</a>
        <!-- 图片 -->
        <img src="./image/taobao.jpg" alt="">
        <!-- 底部导航栏 -->
        <ul class="circle">
            <li></li>
            <li></li>
            <li></li>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

定位总结

注意事项

  • left right 不能同时应用
  • top bottom 不能同时应用

网页布局的侧边广告栏问题

如何让一个侧边栏凑近版心对齐呢，应用固定定位，走浏览器视口的一半，再走版心的一半 + 本身的宽度 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
        * {
            margin: 0;
            padding: 0;
        }
        
        .side-nav {
            position: fixed;
            top: 50%;
            margin-top: -100px;
            left: 50%;
            margin-left: -800px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        .container {
            width: 1200px;
            height: 1800px;
            background-color: pink;
            margin: auto;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="side-nav"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>

</body>

</html>

退出移动版