学习笔记（三）

CSS盒模型

基本概念

margin、border、padding、content、标准模型、IE模型

标准模型：宽高即content的宽高

IE模型：宽高包含padding、border的宽高

css如何设置这两种模型？

浏览器默认的是标准模型，可通过box-sizing来设置，content-box指标准模型，border-box指IE模型

如何获取盒模型对应的宽高

1. dom.style.width/height：只能获取内联样式的宽高
2. dom.currentStyle.width/height：较为准确，获取渲染后的宽高，但是只有IE支持
3. window.getComputedStyle(dom).width/height：与二原理相似，兼容性好
4. dom.getBoundingClientRect().width/height：计算元素的绝对位置，方法获取到的有四个元素（left、top、bottom、right）

BFC（解决边距重叠问题）

基本概念：块级格式化上下文

原理（bfc渲染规则）

1. 在bfc垂直方向的边距会发生重叠
2. bfc的区域不会与浮动元素重叠（清除浮动）
3. bfc在页面上是一个独立的元素，与外面的元素互不影响
4. 计算bfc高度的时候，浮动元素也会参与

如何创建bfc

1. float值除以none
2. position属性改变，不为默认static
3. display属性与table相关
4. overflow不为visible

使用场景

1. 边距重叠

	<section id="margin">
        <style>
            #margin{
                background-color: crimson;
                overflow: hidden;
            }
            #margin>p{
                background-color: darkgreen;
                margin: 20px auto 10px;
            }
        </style>
        <p>1</p>
        <div style="overflow: hidden;">
            <p>2</p>
        </div>
        <p>3</p>
    </section>

2. 左右布局

	<!-- 左右布局 -->
    <section id="lr">
        <style>
            #lr .left{
                float: left;
                height: 200px;
                width: 30%;
                background-color: darkorange;
            }
            #lr .right{
                height: 250px;
                background-color: darkred;
                overflow: hidden;
            }
        </style>
        <article class="left"></article>
        <article class="right"></article>
    </section>

3. 清除浮动
   BFC子元素即使是float也会参与到高度计算

  	<!-- 清除浮动 -->
    <section id="float">
        <style>
            #float{
                background-color: cadetblue;
                /* 方法一：overflow: hidden; */
                /* 方法二： */float: left;
            }
            #float .left{
                float: left;
                font-size: 40px;
            }
        </style>
        <div class="left">左浮动</div>
    </section>