首页手记学习CSS盒模型

学习CSS盒模型

标签：

Html/CSS

大纲

css盒模型
标准模型和IE模型的区别
BFC
BFC应用场景

一、CSS盒模型包含有什么？

margin
padding
border
content
盒模型是有两种标准的，一个是标准模型，一个是IE模型

二、标准模型和IE模型的区别

标准模型的宽高不包括padding和border
IE模型的宽高包括padding和border

三、CSS如何设置这2种模型？

/*设置标准模型，浏览器默认*/
box-sizing: content-box;
/*设置IE模型*/ 
box-sizing: border-box;

四、JS如何设置盒模型对应的宽和高？

//获取高度的话只能获取内嵌（行内）样式，也就是写在元素上面的样式
dom.style.width/height 
// 只有IE支持，拿到的是渲染后的属性
dom.currentStyle.width/height 
// 兼容性好
window.getComputedStyle(dom).width/height 
// 获取到一个元素的绝对位置
dom.getBoundingClientRect().width/height 
// 返回元素的宽高度（包括元素宽度、内边距和边框，不包括外边距）
dom.offsetWidth/offsetHeight

五、BFC

BFC的基本概念
BFC的特性
如何创建BFC
BFC的应用场景

六、BFC的基本概念

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

七、BFC特征

BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素
内部的Box会在垂直方向上一个接一个的放置
同一个BFC的两个相邻Box的margin会发生重叠，垂直方向上的距离由margin决定
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动元素也参与计算

八、创建BFC方法

根元素
float的值不为none
position的值不为static或者relative
display的值table-cell, table-caption, inline-block, flex, 或者inline-flex中的其中一个
overflow的值不为visible（hidden，auto，scroll）

九、BFC的使用场景

场景1：自适应两栏布局

<article class="box-column">
    <style>
        .box-column {
            background: red;
        }

        .left {
            width: 200px;
            height: 200px;
            float: left;
            background: blue;
        }

        .right {
            /* 问题：会发生重叠*/
            /* 根据特性：bfc的区域不会与float的元素区域重叠*/
            /* 清除浮动*/
            /* 解决办法：创建BFC*/
            overflow: hidden;
            
            height: 300px;
            background: pink;
        }
    </style>
    <div class="left">left</div>
    <div class="right">right</div>
</article>

场景二：解决margin边距重叠

<style>
    .box1, .box2 {
        width: 100px;
        height: 200px;
    }

    .box1 {
        background: red;
        margin-bottom: 100px;
    }

    .box2 {
        margin-top: 110px;
        background: pink;
    }
</style>
<!--实际上2个盒子的margin发生重叠，取最大margin值-->
<div class="box1">1</div>
<div class="box2">2</div>


<!--解决方法：创建一个BFC-->
<!--防止垂直 margin 重叠-->
<!--同一个BFC的两个相邻Box的margin会发生重叠，垂直方向上的距离由margin决定-->
<!--创建一个新的BFC-->
<div class="box1">1</div>
<div style="overflow: hidden">
    <div class="box2">2</div>
</div>

场景三：计算盒子包括浮动元素的总高度

<section id="float">
    <style>
        #float {
            background: red;
            /*创建BFC*/
            /*计算bfc的高度时，浮动元素也参与计算*/
            /*BFC子元素即使是float也会参与高度计算*/
            overflow: hidden;
        }

        .float {
            float: left;
            font-size: 30px;
        }
    </style>
    <div class="float">
        i am float element.
    </div>
</section>