常规流

最新推荐文章于 2023-02-25 23:31:28 发布

081&33

最新推荐文章于 2023-02-25 23:31:28 发布

阅读量254

点赞数

本文链接：https://blog.csdn.net/weixin_51398691/article/details/113822691

版权

常规流

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中的多个盒子排列规则。

视觉格式化模型：大体上将页面中盒子的排列分为三种方式：

1：常规流
2：浮动
3：定位

常规流布局

常规流，文档流，普通文档流，常规文档流

所有标签，默认情况下，都属于常规流布局

总体规则：块盒独占一行，行盒水平依次排列

包含块（containing block）：每个盒子都有它的包含块（活动区域），包含块决定了盒子的排列区域。

绝大部分情况下：盒子的包含块，为其父标签的内容盒。(父标签移动，子标签也跟着移动，因为活动范围为父标签的内容盒，父标签就是body的内容盒，浏览器给body有个默认样式，margin有8px）。

<style>
        .parent{
            background: lightblue;
            width: 300px;
            height: 200px;
            border: 2px solid red;
            padding: 30px;
        }
        .child{
            border: 2px solid;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>
</html>

块盒

1.每个块盒的总宽度，必须刚好等于包含块（父标签的内容盒）的宽度。

宽度的默认值auto

margin的取值也可以是auto，默认值是0

auto：将剩余空间吸收掉

当width与margin同时都是auto是，width的吸收能力强于margin。

若宽度，边框，内边距，外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收。

在常规流中，块盒在其包含块中居中：先可以定宽,然后左右margin设置为auto，如下：

.parent{
            background: lightblue;
            width: 300px;
            height: 200px;
            border: 2px solid red;
            padding: 30px;
        }
        .child{
            border: 2px solid;
            height: 100px;
            background: red;
            width: 100px;
            margin-left: auto;
            margin-right: auto;
            or:margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
     
        </div>

    </div>
</body>
</html>

块内一个盒子超出外面那个盒子，方法：
在这里插入图片描述

    .parent{
            background: lightblue;
            width: 300px;
            height: 200px;
            border: 2px solid red;
            padding: 30px;
            margin: 30px;
        }
        .child{
            border: 2px solid;
            height: 100px;
            background: red;
            /* width: 100px; */
            /* margin-left: auto;
            margin-right: auto; */
            width: auto;
            margin-left: -59px;
            margin-right: -59px;
            }

2.每个块盒垂直方向上的auto值

height：只要不设置，就为auto，适应内容的高度（内容有多高，height多高）。

margin：设置为auto或不设置，表示0。

3，百分比取值
padding，宽高，margin可以取值为百分比。

以上的所有百分比相对于包含块的宽度。

高度的百分比：

1，包含块的高度是否取决于子标签的高度：若父标签未设置高度，子标签设置为50%，此时设置无效（父标签未设置，为auto，你多高我多高，子标签你多高我是你的50%，所以矛盾）。

2.包含块的高度不取决于子标签的高度：（父标签高度1000px,子标签50%，此时相对于父标签的一半）

4.上下外边距的合并

两个常规流块盒（父子·，兄弟），上下外边距相邻，会进行合并。

两个外边距取最大值：

 <style> 
    body{
        margin: 0;
    }
    div{
        padding: 20px;
        border: 3px solid;
        margin: 50px;
    }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit assumenda dolorum officiis accusamus ab voluptate voluptatum quasi nisi veniam! Dolorum, delectus perspiciatis? Temporibus sequi optio fuga recusandae inventore dolores consequatur ullam odio illo harum aliquam ipsa repellendus quos, sed vero eaque! Inventore rem tempora dignissimos aliquid, ea consequatur voluptates dolorum.
    </div>
    <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate quibusdam, rem deleniti accusamus facere perspiciatis dolorum accusantium exercitationem dignissimos, dolores officiis dolorem fuga modi. Praesentium perferendis perspiciatis molestiae facilis vitae fugit inventore id explicabo incidunt? Vitae magnam qui sapiente eligendi ullam architecto accusantium nam officiis asperiores, ab ex pariatur eum!
    </div>
</body>
</html>

如果遇到这种情况，两种解决办法
在这里插入图片描述

源代码
  <style>
        body{
            margin: 0;
        }
        .parent{
            background: lightblue;
            height: 300px;
            margin-top: 50px;
        }
        .child{
            height: 100px;
            background: red;
            margin-top: 50px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="parent">   
<div class="child">

</div>
    </div>
</body>
</html>

1.加边框
 body{
            margin: 0;
        }
        .parent{
            background: lightblue;
            height: 300px;
            margin-top: 50px;
            border: 2px solid;
        }
        .child{
            height: 100px;
            background: red;
            margin-top: 50px;
            width: 200px;
        }

    body{
            margin: 0;
        }
        .parent{
            background: lightblue;
            height: 300px;
            margin-top: 50px;
            /* border: 2px solid; */
            padding-top: 50px;
        }
        .child{
            height: 100px;
            background: red;
            /* margin-top: 50px; */
            width: 200px;
        }

如图改变：
在这里插入图片描述

081&33

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
常规流

常规流盒模型：规定单个盒子的规则视觉格式化模型（布局规则）：页面中的多个盒子排列规则。视觉格式化模型：大体上将页面中盒子的排列分为三种方式：1：常规流2：浮动3：定位常规流布局常规流，文档流，普通文档流，常规文档流所有标签，默认情况下，都属于常规流布局总体规则：块盒独占一行，行盒水平依次排列包含块（containing block）：每个盒子都有它的包含块（活动区域），包含块决定了盒子的排列区域。绝大部分情况下：盒子的包含块，为其父标签的内容盒。...
复制链接

扫一扫