css盒模型理解

懵懂听风雨

2019-07-01

css盒模型概念

css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
css盒模型理解

图中element元素是实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了盒子模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。那么：

总宽度 = 元素（element）的width + padding的左边距和右边距的值 + border的左右宽度 + margin的左边距和右边距的值；
总高度 = 元素（element）的height + padding的上下边距的值＋ border的上下宽度 + margin的上下边距的值。

css外边距合并(叠加)

两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .top{
            width:400px;
            background: #0ff;
            height:100px;
            margin:30px 30px;
        }
        .bottom{
            width:400px;
            height:100px;
            margin:50px 30px;
            background: #ddd;
        }
    </style>
</head>
<body>
    <section class="top">
        <h1>上</h1>
        margin-bottom:30px;
    </section>
    <section class="bottom">
        <h1>下</h1>
        margin-top:50px;
    </section>

</body>
</html>

css盒模型理解

需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。

边距合并解决方案(BFC)

BFC其英文拼写为 Block Formatting Context 直译为“块级格式化上下文”

元素产生BFC的条件

float属性不为none（脱离文档流）
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inine-flex
overflow不为visible

BFC元素所具有的特性

在BFC中，盒子从顶端开始垂直地一个接一个地排列。
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。
在BFC中，每一个盒子的左外边距（margin-left）会触碰到容器的左外边缘（border-left），对于从右往左的格式来说，会触碰到右边缘。
BFC不会与浮动盒子产生交集，而是紧贴浮动元素边缘。
计算BFC高度BFC时，自然也会检测浮动的子盒子高度。

应用场景

自适应两栏布局
清除内部浮动
防止垂直margin重叠

上面边距合并例子调整：

<section class="top">
        <h1>上</h1>
        margin-bottom:30px;
    </section>

 <!-- 给下面这个块添加一个父元素，在父元素上创建bfc -->
 <div style="overflow:hidden">
   <section class="bottom">
       <h1>下</h1>
         margin-top:50px;
    </section>
</div>

css盒模型理解

关于bfc的应用的案例这里就不在一一举出了，大家去网上找一些其他的文章看一下。

box-sizing属性介绍

box-sizing : content-box|border-box|inherit

content-box(标准盒子),默认值,可以使设置的宽度和高度值应用到元素的内容框。盒子的宽高只包含内容。总宽度=margin+border+padding+width;总高度=margin+border+padding+height
border-box(IE盒子),设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容。总宽度=margin+width; 总高度=margin+height
inherit , 规定应从父元素继承 box-sizing 属性的值

偷两张图贴起来~

css盒模型理解