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

3次阅读

共计 8034 个字符，预计需要花费 21 分钟才能阅读完成。

布局的外围：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>

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

<!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 属性

应用 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>

正文完

css

发表至： css

2020-08-03

0

关于css:原生CSS嵌套简介

关于vue.js:vue中怎么把背景铺满全屏

关于css:横向滚动的flex布局-最右侧marginright-失效

关于css:给我一个你不用tailwindcss的理由

关于人工智能:PerfDog-WEB端使用手册

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

定位

边偏移

三种布局机制的高低程序

定位模式

动态定位（理解）

relative（理解）

绝对定位的两个个性

相对定位

子绝父相

哈格达斯案例

固定定位

新浪案例

相对定位的盒子居中对齐

重叠程序

定位扭转 display 属性

外边距合并问题

圆角矩形设置四个角

定位总结

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

站内搜索