css盒子模型

有思想的小胡子

已于 2022-03-04 15:18:17 修改

阅读量78

点赞数

分类专栏： CSS 文章标签： css css3

于 2022-03-02 13:01:01 首次发布

本文链接：https://blog.csdn.net/qq_38367703/article/details/123224034

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、W3C标准盒模型（content-box）
使用：

box-sizing: content-box  //默认值content-box

盒子范围包含：margin padding border content
设置的width 、height 是 conent的width、height
W3C标准盒模型
二、IE盒模型/怪异盒模型（border-box）
使用：

box-sizing: border-box

盒子范围包含：margin padding border content
设置的width 、height 是包含 content、border 和 padding
IE盒模型
三、margin垂直方向边距重叠（margin-top、margin-bottom）

<body>
    <p>box-sizing: content-box</p>
    <div class="border1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <p>box-sizing: border-box</p>
    <div class="border2">
        <div>11</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
    </div>
</body>

    <style>
        .border1,.border2{
            background-color: rgb(19, 19, 34);
        }
        .border1 div{
            border: 1px solid red;
            background-color: aquamarine;
            height: 50px;
            width: 50px;
            box-sizing: content-box;
            margin-top: 50px;
            text-align: center;
            line-height: 50px;
        }
        .border2 div{
            border: 1px solid saddlebrown;
            background-color: antiquewhite;
            height: 50px;
            width: 50px;
            box-sizing: border-box;
            margin-top: 50px;
            text-align: center;
            line-height: 50px;
        }
    </style>

css盒模型对比
参考关于css中外边距（margin）出现重叠的状况及解决方法
三、布局
盒子模型，是DOM元素的抽象定义。盒子模型里，元素有margin、border、padding、content，分为块元素和内联元素两种。
块级元素（block）：块级元素会一个接一个地被垂直放置，起点是包含块的顶部。
内联元素（inline）：内联元素会一个接一个地水平排列，起点是包含块的顶部。
了解更多布局相关知识：css布局-文档流（Normal Flow）、BFC

有思想的小胡子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css盒子模型

一、W3C标准盒模型（content-box）使用：box-sizing: content-box盒子范围包含：margin padding border content设置的width 、height 是 conent的width、height二、IE盒模型/怪异盒模型（border-box）使用：box-sizing: border-box盒子范围包含：margin padding border content设置的width 、height 是包含 content、bor
复制链接

扫一扫