Pc端浮动、定位布局

最新推荐文章于 2024-05-20 21:08:03 发布

樊小勇

最新推荐文章于 2024-05-20 21:08:03 发布

阅读量361

点赞数 1

分类专栏：前端基础总结

本文链接：https://blog.csdn.net/weixin_42396884/article/details/89307679

版权

前端基础总结专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文总结了PC端布局中浮动和定位的常见方法，包括两列和三列布局、相对定位、绝对定位、固定定位的应用，以及z-index的使用。特别讨论了在项目实践中如何有效清除浮动，提供了一种常用的清除浮动技巧。

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

前言

pc端的布局大致是靠浮动，和定位来实现的，在这里我总结了一点点方法。

两列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>两列布局</title>
    <style>
        .one{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            float: left;
        }
        .tow{
            width: 200px;
            height: 300px;
            border: 1px solid green;
            float: right;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="tow"></div>
</body>
</html>

三列布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>三列布局</title>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        border: 1px solid;
        float: left;
      }
      .box2 {
        height: 200px;
        width: 200px;
        border: 1px solid;
        float: right;
      }
      .box3 {
        height: 200px;
        overflow: hidden;
        border: 1px solid;
      }
      /* 如果按照左中右的顺序来的话这个三列布局是实现不了的，中间的会被两端的把位置都占了
        所以可以把中间的换到最后去，设置fbc，然后就能实现了*/
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>
</html>

相对定位和绝对定位

1.元素p任意放置位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
            }
            
            div {
                /*设置参照物,相对定位*/
                position: relative;
                height: 400px;
                width: 800px;
                background: gray;
            }
            
            p {
                /*设置为绝对定位,可以通过left,right,top,bottom*/
                position: absolute;
                height: 100px;
                width: 100px;
                background: green;
                left: 20px;
                right: 20px;
                
                /*top: 20px;*/
                bottom: 20px;
            }
        </style>
    </head>
    <body>
        
        <div class="box">
            <p>
                
            </p>
            
        </div>
    </body>
</html>

2.子元素在父元素内居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div {
                width: 400px;
                height: 400px;
                border: 1px solid;
                position: relative;
            }
            
            p {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -50px;
                margin-left: -50px;
                width: 100px;
                height: 100px;
                background: green;
            }
        </style>
    </head>
    <body>
        <div>
            <p>
                
            </p>
        </div>
    </body>
</html>

固定定位

1.返回顶部按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a {
                position: fixed;
                bottom: 15px;
                right: 15px;
            }
        </style>
    </head>
    <body>
        
        <a href="#">返回顶部</a>
    </body>
</html>

2.蒙层制作(固定定位)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div {
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                background: #000;
                opacity: 0.7;
            }
        </style>
    </head>
    <body>
        <div>
            
        </div>
        <ul>
            <li>xxxxxxxxxxxxxxxxxxx</li>
            <li>xxxxxxxxxxxxxxxxxxx</li>
            <li>xxxxxxxxxxxxxxxxxxx</li>
            <li>xxxxxxxxxxxxxxxxxxx</li>
            <li>xxxxxxxxxxxxxxxxxxx</li>
            <li>xxxxxxxxxxxxxxxxxxx</li>
            <li>xxxxxxxxxxxxxxxxxxx</li>
            <li>xxxxxxxxxxxxxxxxxxx</li>
            <li>xxxxxxxxxxxxxxxxxxx</li>
            <li>xxxxxxxxxxxxxxxxxxx</li>
        </ul>
    </body>
</html>

z-index

通过z-index调整定位元素的优先级别

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div {
                position: fixed;
            }
            
            .box1 {
                background: gray;
                height: 100px;
                width: 100px;
                z-index: 3;
            }
            .box2 {
                background: green;
                height: 200px;
                width: 200px;
                z-index: 2;
            }
            .box3 {
                background: yellow;
                height: 300px;
                width: 300px;
            }
        </style>
    </head>
    <body>
        
        <div class="box1">
            box1
        </div>
        
        <div class="box2">
            box2
        </div>
        
        <div class="box3">
            box3
        </div>
    </body>
</html>

浮动和清除浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*让.left在左边,让.right在右边*/
            div {
                width: 200px;
                height: 200px;
                background: green;
                border: 1px solid;
            }
            
            .left {
                /*左浮动*/
                float: left;
            }
            
            .right {
                /*右浮动*/
                float: right;
                background: gray;
                width: 300px;
                height: 300px;
            }
            
            .main {
                /*清除浮动*/
                clear: both;
                height: 400px;
                width: 100%;
                background: orange;
            }
            
        </style>
    </head>
    <body>
        <div class="left">
            左边
        </div>
        
        <div class="right">
            右边
        </div>
        
        
        <div class="main">
            
        </div>
        
    </body>
</html>

项目中常用清除浮动的技巧

定义一个清除浮动的class

.clear:after {
    display: block;
    content: '';
    clear: both;
    visibility: hidden;
}

若某个元素使用了浮动，就给它的父元素添加这个class代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            .left {
                float: left;
                height: 100px;
                width: 100px;
                background: #008000;
            }
            .clear:after {
                display: block;
                content: '';
                clear: both;
                visibility: hidden;
            }
            
            .main {
                height: 150px;
                background: gray;
            }
        </style>
    </head>
    <body>
        <div class="box clear">
            <div class="left">
                左边
            </div>
            
        </div>
        
        <div class="main">
            
        </div>
    </body>
</html>