CSS盒模型

发表于 | 分类于

CSS盒模型

题目:对CSS盒模型的认识

分析

基本概念

标准模型+IE模型

区别

标准模型（浏览器默认）：width不计算padding和border

IE模型：width计算padding和border

CSS如何设置这两种模型

标准模型： box-sizing: content-box;

IE模型： box-sizing: border-box;

JS如何设置获取盒模型对应的宽和高

只能获取内联高： dom.style.width/height

浏览器渲染之后的取值，仅IE支持: dom.currentStyle.height

浏览器渲染之后的取值，兼容性较好： window.getComputedStyle(dom).width/height

根据窗口视图获取宽高： dom.getBoundingClientRect().width/height/left/top

实例题（根据盒模型解释边距重叠）

边距重叠的三种情况：父子；兄弟；空元素（兄弟与空元素一样，取最大值）

BFC（边距重叠解决方案）

BFC基本概念

BFC：块级格式化上下文

IFC：内联元素格式化上下文

BFC原理/渲染规则

1.BFC的垂直方向发生重叠

2.BFC的区域不会与浮动元素发生边距重叠

3.BFC在页面上是独立的容器，外/里不会互相影响

4.浮动元素参与BFC计算高度

创建BFC

1.float值不为none

2.overflow的值不为visible

3.display的值为table-cell,table-caption,inline-block中的任何一个

4.position的值不为relative和static（position的默认值）

应用场景

解决垂直方向的边距重叠

清除浮动

不与浮动元素重叠

源码

box.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>CSS盒模型</title>
   <style media="screen">
   html *{
           padding: 0;
      margin: 0;
   }
    </style>
</head>
<body>

<!--overflow影响height-->
<section id="sec">
    <style media="screen">
        #sec{
            background: #f00;
            /*overflow影响height*/        
            /*overflow: hidden;*/
        }
        .child{
            height:100px;
            margin-top: 10px;
            background: yellow;
        }
    </style>
    <article class="child"></article>
</section>


<!--BFC垂直方向边距重叠-->
<section id="margin">
    <style>
        #margin{
            background: pink;
            overflow: hidden;
        }
        #margin>p{
            margin: 5px auto 25px;
            background: red;
        }        
    </style>
    <p>1</p>
    <div style="overflow:hidden">
        <p>2</p>
    </div>
    <p>3</p>
</section>

<!-- BFC不与float重叠 -->
<section id="layout">
    <style media="screen">
        #layout{
            background: red;
        }
        #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
        }
        #layout .right{
            height: 110px;
            background: #ccc;
            overflow: auto;
        }
    </style>
    <div class="left"></div>
    <div class="right"></div>
</section>

<!-- BFC子元素即使是float，也会参与高度计算/清除浮动 -->
<section id="float">
    <style media="screen">
        #float{
            background: red;
            /*overflow: auto;*/
            float: left;
        }
        #float .float{
            float: left;
            font-size: 30px;
        }
    </style>
    <div class="float">我是浮动元素</div>
</section>

</body>
</html>