盒子模型-水平方向、垂直方向的布局（important!)

框模型/ 盒模型/盒子模型

 

水平布局

    • 元素在其父元素中的水平方向位置由margin-left、border-left、padding-left、width、padding-right、border-right、margin-right
      共同决定

    • 一个元素在其父元素中，水平布局必须满足：上述七个值的和=其父元素内容区的宽度
      （1）若相加结果不成立，成为过度约束，则，等式会自动调整
      （2）若七个值中没有为auto的情况，则，浏览器会自动调整margin-right使得等式成立

      • 注意：当等式不成立时，就算margin-right有设置也无效，而是会调整margin-right使等式成立。
      • 例： 
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于盒子的水平布局</title>

    <style>
       .boxOne{
           width: 600px;
           height: 200px;
           border:10px inset cadetblue;
       }
       .inner{
           width: 200px;
           height: 200px;
           background-color: lightblue;
           margin-left: 100px;   
           margin-right: 1000px;
       }
    </style>
</head>
<body>
    <div class="boxOne">
        <div class="inner"></div>
    </div>
</body>
</html>

        效果如下：

      •  

         就算margin-right设置为1000px，也会因为等式不成立，把margin-right调整为300px,而不会调整margin-left

    • 七个值中可设置为auto的有：width、margin-left、margin-right
      （1）当有某一个值为auto，则会自动调整为auto的那个值使得等式成立
      （2）若width=auto和某一个外边距=auto，则，宽度调整到最大，设置auto的外边距为0
      （3）若width=auto和两个外边距都=auto，则，宽度调整到最大，设置auto的两个外边距都为0
      （4）若width=固定值且两个外边距都=auto，则，将两外边距设置为相同的值
      （ 通常使用该方式使得某元素在其父元素中水平居中）

    • 水平居中举例：

      • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于盒子的水平布局</title>
    <style>
       .boxOne{
           width: 600px;
           height: 200px;
           border:10px inset cadetblue;
       }

       .inner{
           width: 200px;
           height: 200px;
           background-color: lightblue;
           margin: 0 auto;
       }
    </style>
</head>
<body>
    <div class="boxOne">
        <div class="inner"></div>
    </div>
</body>
</html>

        效果
        在这里插入图片描述

若子元素width大于父元素width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于盒子的水平布局</title>

    <style>
       .boxOne{
           width: 600px;
           height: 200px;
           border:10px inset pink;
       }

       .inner{
           width: 800px;
           height: 200px;
           background-color: darksalmon;
       }
    </style>
</head>
<body>
    <div class="boxOne">
        <div class="inner"></div>
    </div>
   

</body>
</html>

效果
在这里插入图片描述

垂直布局

  • 默认情况下，父元素的高度被内容撑开
  • 子元素大小超过父元素高度时，子元素会从父元素中溢出
  • 使用overflow属性：设置父元素如何处理子元素的溢出
    （1）visible默认值：子元素溢出，超出部分仍显示
    （2）hidden：子元素被裁减，超出部分不会显示

（3）auto：根据需要生成滚动条（横向或纵向）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于盒子的垂直布局</title>

    <style>
         .boxOne{
            width: 200px;
            height: 150px;
            background-color: darksalmon;
            overflow:auto;

        }
        
      
    </style>
</head>
<body>
    <div class="boxOne">
        我的少年们，别因他人沉沦享乐而感到迷茫，别为如今的潦倒而感到沮丧。
你夜以继日的努力、克制欲望的自律、孑然独行的从容，都正在带你去向更广阔的未来。
朱颜易辞镜，千金会散尽，唯有千万个日夜汇聚的思想才是这个世上最锐不可当的锋芒。
你不能就这样败在这里。 ​​​​ 
    </div>

</body>
</html>

效果图
在这里插入图片描述

 
 

 

posted @ 2020-08-09 21:19  webpon  阅读(500)  评论(0)  编辑  收藏  举报