布局方式的总结-CSDN博客

本文链接：https://blog.csdn.net/2301_77260619/article/details/130124569

布局方式多样，简单可以分为三种盒子布局，浮动布局，定位布局。

第一种：盒子布局

关系示意图如下：

盒子布局常用margin (外边距), border (边框)，padding (内边距)，content (内容区域)来表示

其最内部分及content 所占高度由height属性决定，内容所占宽度由width属性决定。

浏览器默认给外边距和内边距设置一定的初值，可以对margin和padding的值来改变其样式，其代码如下:

*{              /*通用选择器，选择所有元素*/
    margin:0;  /*外边距清0*/
    padding:0; /*内边距清0*/
}

margin-top、margin-right、 margin-bottom和margin-left四个属性对上外边距、右外边距、下外边距和左外边距分别设置。

margin外边距合并有以下原则:

(1)块级元素的垂直相邻外边距会合并，且其垂直相邻外边距合并之后的值为上元素的下
外边距和下元素的上外边距的较大值。
(2)行内元素实际上不占上下外边距，行内元素的左右外边距不会合并。
(3)浮动元素的外边距不会合并。

第二种：浮动布局

在CSS中，通过float属性可以实现元素的浮动，而且可以定义是向哪个方向浮动。

在CSS中任何元素都可以浮动，开且浮动元素会生成一个块级框，而不论本身是何种元素。

float属性值及说明
属性值	说明
left	向左浮动
right	向右浮动
none	默认值。元素不浮动，并会显示在其文本中出现的位置
inherit	规定应该从父元素继承float 属性的值

注意：如果浮动取值是Left的话（左浮），会对后面的元素产生一定的影响

clear属性规定元素的哪一侧不允许出现浮动元素。在CSS中是通过自动为清除元素(即设置了clear属性的元素)增加上外边距实现的。

总结：

例如：图像的左侧和右侧均不允许出现浮动元素。

img{
    float:left;     /* 左浮动*/
    clear:both;     /* 左右两侧都不允许出现浮动*/
}

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>浮动布局</title>

     <style>
     .box1{
      width: 200px;
        height: 200px;
        border: 1px solid black;
        background-color: red;
        float: left;
    }

    .box2{
 
        width: 200px;
        height: 200px;
        border: 1px solid black;
        background-color: blue;
    }
    .box3{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        background-color:green;
    }
 </style>
</head>
<body>

    <div class="box1">这是第一个div</div>
    <div class="box2">这是第二个div</div>
    <div class="box3">这是第三个div</div>
</body>

第三种：定位布局

定位可分为静态定位，相对定位，绝对定位，固定定位

属性：position ------ 设置对象的定位

static	静态定位	没有设置位置）默认
absolute	绝对定位	将对象从文档流中分离出来，设置left top right bottom这四个方向去设置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是body
relative	相对定位	对象不从文档流中分离出来，设置left top right bottom这四个方向去设置相较于自身的相对定位
fixed	固定定位	当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>定位布局</title>

    <style>

        .box1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
            /* position:absolute;
           top: 100px;
           left: 200px; */

       }
        .box2{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: blue;            position: relative;
            left: 200px;
       }
        .box3{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color:green;
       }
    </style>
</head>
<body>

    <div class="box1">这是第一个div</div>

    <div class="box2">这是第二个div</div>

    <div class="box3">这是第三个div</div>
</body>
</html>

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>定位布局</title>

    <style>

        .main{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 200px;
            position: relative;
       }
        .box1{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: red;
            position:absolute;
            top: 100px;
            left: 200px;
       }
        .box2{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: blue;
            /* position: relative;
           left: 200px; */

       }
        .box3{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color:green;
       }
    </style>
</head>
<body>

    <div class="main">

        <div class="box1">这是第一个div</div>

        <div class="box2">这是第二个div</div>

        <div class="box3">这是第三个div</div>

    </div>

    

</body>
</html>