CSS——水平布局和垂直布局

布局样式

- - 水平布局
  - 垂直布局

水平布局

子元素在其父元素中水平方向的位置由以下几个属性共同决定：
在这里插入图片描述
为了理解方便理解画了个图，图上一共有子元素的七个属性，而这七个元素的和则必须等于父元素的width

<head>
    <meta charset="UTF-8">
    <title>Surymy</title>
    <style>
        .box1{
            width:280px;
            height:200px;
            background-color:rgb(204, 220, 243);

        }
        .box2{
            width:200px;
            height:100px;
            background-color:rgb(235, 201, 247);
            padding:20px;
            border:10px orange solid;
            margin:0 20px;
        }
    </style>
</head>

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

七个数值相加情况是：
20+10+20+200+20+10+margin-right=280，刚好是相等的，在图中也可以看出来：
（因为前边的数据加起来已经等于父元素的宽度了，所以这里的margin-right的值就是0）
在这里插入图片描述

但不可能每一次结果都刚好相等，如果出现不相等的情况，比如下边例子把父元素的宽度改成600，这种情况就叫做过度约束。

<head>
    <meta charset="UTF-8">
    <title>Surymy</title>
    <style>
        .box1{
            width:600px;
            height:200px;
            background-color:rgb(204, 220, 243);

        }
        .box2{
            width:200px;
            height:100px;
            background-color:rgb(235, 201, 247);
            padding:20px;
            border:10px orange solid;
            margin:0 20px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">Surymy</div>
    </div>
</body>

七个数值相加情况是：
20+10+20+200+20+10+margin-right=600，如果想让等式是相等的，在图中也可以看出来，这里的margin-right的数值就发生了变化，变成了320。
在这里插入图片描述

结论：
就像上篇博客—— CSS——盒子模型的第三部分说的，margin-right 具有一定的特殊性，这个特殊性就指的是，当上述等式不相等时，浏览器会根据等式的情况来自动调整margin-right的大小。具体调整规则如下：

七个值都没有设置为auto的情况下，则浏览器自动调整，改变margin-right的值使等式满足。
上一条的前提条件提到了可选值auto，这里边有三个属性可设置为auto，分别是width、margin-left、margn-right。
-当width或margin-left属性设置为auto时，浏览器会自动调整auto的值使等式成立。
-如果width和其中一个margin设置为auto，则width会设置为最大值，而设置为auto的margin属性为0，
-如果width和两个外边距都设置为auto，则元素会在父元素中居中。
常用的居中属性设置就是：width:50px; margin:0 auto;

垂直布局

默认情况下，父元素的高度被内容打开。

    <style>
        .box1{
            background-color:#baf;
        }
        .box2{
            width:100px;
            height:200px;
            background-color:#bfa;
        }
           </style>
           
    <div class="box1">
        <div class="box2"></div>
        <!-- <div class="box2"></div> -->
    </div>

在这里插入图片描述

子元素在父元素的内容区排列，但是如果子元素的大小超过了父元素，一般情况下则会溢出。

<style>
        .box3{
            height:200px;
            width:200px;
            background-color:#abc;
            /* overflow: auto; */
        }
        .box4{
            height:400px;
            width:100px;
            background-color:#abe;
        }
    </style>

    <div class="box3">
        <div class="box4">Surymy</div>
    </div>

在这里插入图片描述
3.解决方案：设置一个overflow属性。
语法：在子元素的样式设置中添加一句：overflow:可选值即可。
这个属性的可选值有：

默认值 visible：子元素会在父元素溢出，在父元素外部显示（如上图）。
overflow:hidden：裁减溢出的部分（会导致子元素内容缺失）。
overflow:srcoll：生成水平、垂直两个方向的滚动条，可查看完整内容（但此时并不需要水平方向的滚动条）。
overflow:auto：根据需要生成滚动条。