HTML css——常规流

最新推荐文章于 2022-08-17 11:10:34 发布

33的史努比

最新推荐文章于 2022-08-17 11:10:34 发布

阅读量453

点赞数

分类专栏：前端入门学习文章标签： css html css3

本文链接：https://blog.csdn.net/coising/article/details/122530550

版权

前端入门学习专栏收录该内容

88 篇文章 0 订阅

订阅专栏

常规流

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

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

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

常规流
浮动
定位

常规流布局

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

所有元素默认情况下都属于常规流布局

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

包含块(containing block): 每个盒子都有他的包含块，包含块决定盒子的排列区域。

绝大部分情况下，盒子的包含块，为其父元素的内容盒

块盒

每个块盒的总宽度必须刚好等于包含块的宽度

宽度的默认值 auto

margin 的取值也可以是auto 不过默认值为0

auto:将剩余空间吸收掉

width吸收能力强于margin 所以都是auto时，margin为0

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

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

margin:0 auto;

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

height:auto 适应内容高度

margin：auto 表示0

百分比取值

padding 宽 margin 可以取值百分比

以上的所有百分比是相对于包含块的宽度与高度无关

高度百分比：
3.1 包含块的高度取决于子元素高度，设置百分比无效

3.2 包含块的高度不取决子元素高度，百分比相对于父元素高度

上下外边距的合并

两个常规流块盒，上下外边距相邻，会合并

两个外边距取最大值

父子元素也会出现合并现象，如果不想合并，可以对父元素添加

border: 3px solid;
 或者：
padding-top: 50px;

完整代码：

<!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>Document</title>
    <style>
        body{
            margin: 0;

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

        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>

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

33的史努比

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML css——常规流

常规流盒模型：规定单个盒子的规则视觉格式化模型（布局规则）:页面中多个盒子排列规则视觉格式化模型大体上将页面中盒子分为三种方式：常规流浮动定位常规流布局文档流普通文档流常规文档流所有元素默认情况下都属于常规流布局总体规则：块盒独占一行行盒水平依次排列包含块(containing block): 每个盒子都有他的包含块，包含块决定盒子的排列区域。绝大部分情况下，盒子的包含块，为其父元素的内容盒块盒每个块盒的总宽度必须刚好等于包含块的宽度宽度的默认值 auto
复制链接

扫一扫