web开发 css4 position BFC columns

最新推荐文章于 2024-10-16 21:45:28 发布

Sermiscry

最新推荐文章于 2024-10-16 21:45:28 发布

阅读量80

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/Sermisry/article/details/119747653

版权

web 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文详细介绍了网页布局中的定位技术，包括position的absolute、relative和sticky用法，展示了三列布局的实现，以及z-index如何控制元素的重叠顺序。同时，探讨了BFC（块格式化上下文）在解决margin塌陷问题中的应用，并简要说明了column用于实现多列布局的方法。通过实例代码，帮助读者深入理解这些关键概念。

摘要由CSDN通过智能技术生成

定位position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style type="text/css">
        img {
            /*top是距离上边的原来位置，left是距离左边的原来位置，需要position才能生效*/
            right: 20px;
            bottom: 20px;
            width: 100px;
            position: absolute;
            border: 2px solid lightblue;
        }
        #corn {
            width: 500px;
            height: 200px;
            position: relative;
            border: 2px solid pink;
        }
        /*粘滞定位 在html代码中配合<section>使用*/
        #top {
            position: sticky;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="top">
        <a href="https://www.bilibili.com">A</a>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere repellat ullam laboriosam animi veniam. Assumenda ad, repudiandae sint est quas dolor voluptates debitis, unde amet perferendis ipsum fugit esse in?</p>
    <div id="corn"><img src="../float/玉米.jpg", alt="corn"></div>
    <div id="top">
        <a href="https://www.bilibili.com">B</a>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit enim at qui repellat ipsum, corporis facere distinctio et, quisquam ipsa temporibus ea labore quaerat ullam? Dolorum rerum consequuntur consectetur dignissimos?</p>
</body>
</html>

三列布局演示

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

<head>
    <meta charset="UTF-8">
    <title>三列布局</title>
    <style type="text/css">
        /*利用position实现三列布局*/
        .left {
            background-color: pink;
            width: 33.33%;
            padding: 20px;
            position: absolute;
            left: 0;
            box-sizing: border-box;
        }

        .middle {
            background-color: cornsilk;
            width: 33.33%;
            padding: 20px;
            position: absolute;
            left: 33.33%;
            box-sizing: border-box;
        }

        .right {
            background-color: lightblue;
            width: 33.33%;
            padding: 20px;
            position: absolute;
            left: 66.66%;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <h1>三列布局演示</h1>
    <div class="left">
        <h2>这里是左侧</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem a culpa beatae saepe distinctio tempore facilis,voluptates fugiat neque maiores qui eligendi pariatur. Ea, sunt debitis. Officia necessitatibus earumconsectetur!</p>
    </div>
    <div class="middle">
        <h2>这里是中间</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet aliquid natus, ducimus repudiandae maxime veritatis ipsum est quo repellat commodi nihil laborum placeat earum laboriosam neque iste voluptatibus inventore recusandae?</p>
    </div>
    <div class="right">
        <h2>这里是右侧</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore cum enim est ab. Accusantium, ipsum sitexcepturi aperiam repellendus iusto nostrum modi dignissimos beatae eaque laboriosam, a porro ad cum?</p>
    </div>
</body>
</html>

z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重叠z-index</title>
    <style type="text/css">
        #corn {
            top: 20px;
            left: 20px;
            width: 200px;
            position: absolute;
            background-color: pink;
            z-index: 2;
        }
        #cun {
            top: 30px;
            left: 30px;
            width: 200px;
            position: absolute;
            background-color: lightblue;
            z-index: 1;
        }
        #wall {
            top: 40px;
            left: 40px;
            width: 200px;
            position: relative;
            background-color: cornsilk;
        }

        /*实现滚动条的时候lightblue也在不断变化*/
        .pink {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .lightblue {
            width: 200px;
            height: 100px;
            position: sticky;
            bottom: 50%;
            z-index: -1;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <img id="corn" src="../float/玉米.jpg">
    <img id="cun" src="../float/葱.jpg">
    <img id="wall" src="../float/刷墙.jpg">

    <div class="pink"></div>
    <div class="lightblue"></div>
    <div class="pink"></div>
    <div class="lightblue"></div>
    <div class="pink"></div>
</body>
</html>

BFC

如果满足下面任意条件,就会自动创建一个新的BFC

float属性的值不为none
position属性的值不为static或relative
overflow属性的值不为visible
display属性的值为flex，inline-flex，inline-block，table-cell或table-caption

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin塌陷</title>
    <style type="text/css">
        .container {
            background-color: pink;
            overflow: hidden;
        }
        .NewBFC {
            overflow: hidden;
        }
        p {
            background-color: lightyellow;
            margin: 10px 0;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background: pink;
            overflow: hidden;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background: lightcoral;
            margin-top: 50px;
        }

        #container {
            background: green;
            overflow: hidden;
        }
        #fudon {
            float: left;
            background: lightcoral;
            margin: 10px;
        }
        .white {
            width: 250px;
            height: 100px;
            background: pink;
            float: left;
        }
        .text {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>I am a student.</p>
        <!--不让浏览器去实现margin塌陷-->
        <!--创建一个新的BFC-->
        <div class="NewBFC">
            <p>I am a university student.</p>
        </div>
    </div><br><br>

    <!--第二个margin塌陷的例子-->
    <div class="box1">
        <div class="box2"></div>
    </div><br><br>

    <!--容纳浮动元素-->
    <div id="container">
        <!--这里p是浮动元素，脱离了文档流，那么div里面是没有东西的，所以不会出现绿色-->
        <!--如果想要绿色出现，有三种方法
        1. 把div也设置为float，大家一起脱离
        2. 在第二个p后面加上clear:both
        3. 给div后创建一个新的BFC，大家一起脱离-->
        <p id="fudon">I am a student.</p>
        <p id="fudon">I am a student.</p>
    </div>
    
	<!--阻止文本环绕-->
    <div class="white"></div>
    <div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendimaxime aliquam quidem nulla, repellendus unde pariatur consequuntur beatae. Laboriosam corrupti at, quisquam ipsum omnis aspernatur id ipsam assumenda soluta nam?</div>
</body>
</html>

column

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

<head>
    <meta charset="UTF-8">
    <title>两列布局</title>
    <style type="text/css">
        div.container {
            column-count: 2;
            column-gap: 20px;
            column-rule: black solid 5px;
        }
        div.left {
            background-color: pink;
            padding: 20px;
            box-sizing: border-box;
        }
        div.right {
            background-color: lightblue;
            padding: 20px;
            box-sizing: border-box;
        }
        div.columns {
            columns: 5 100px;
        }
        h2 {
            column-span: all;
        }
    </style>
</head>

<body>
    <h1>两列布局演示</h1>
    <div class="container">
        <div class="left">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem a culpa beatae saepe distinctio tempore facilis,voluptates fugiat neque maiores qui eligendi pariatur. Ea, sunt debitis. Officia </p>
        </div>
        <div class="right">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore cum enim est ab. Accusantium, ipsum sitexcepturi aperiam repellendus iusto nostrum modi dignissimos beatae eaque laboriosam, a porro ad cum?</p>
        </div>
    </div><br><br>

    <!--将p元素的文本拆分成5部分显示-->
    <div class="columns">
        <h2>下面的文本，可以使用column拆分成多端，如果你像让这一段不被拆分，那么使用column-span</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium saepe, totam quibusdam exercitationem laudantium nostrum earum consequatur! Placeat veniam nesciunt numquam quis sint! Dolorum laboriosam architecto nostrum eius placeat corporis.lorem ipsum dolor sit amet, consectetur adip Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium saepe, totam quibusdam exercitationem laudantiumnostrum earum consequatur! Placeat veniam nesciunt numquam quis sint! Dolorum laboriosam architecto nostrum eius placeat corporis.lorem ipsum dolor sit amet, consectetur adip</p>
    </div>
</body>
</html>