css盒模型

image.png

w3c的盒模型：宽高只针对content宽高。
IE的盒模型：宽高针对的是content+padding+border的宽高。

box-sizing: content-box w3c模型
box-sizing: border-box IE模型

js获取：
getElementById("aaa").style.width/height 【内联】
dom.currentStyle.width/height (渲染以后的结果只支持IE)
window.getComputedStyle(dom).width/height
dom.getBoundingClientRect().width/height(计算viewport绝对位置左顶点)

BFC(块级格式化上下文)：
1、父子元素的边距重叠
2、兄弟元素的边距重叠

BFC的生成

float的值不为none；
overflow的值不为visible；
display的值为inline-block、table-cell、table-caption；
position的值为absolute或fixed；
看到有人把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC。

https://www.jianshu.com/p/76484dff1cb5

http://blog.csdn.net/riddle1981/article/details/52126522

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 盒模型</title>
    <style>
        html *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <p style="font-size: 30px">overflow 规定当内容溢出元素框时发生的事情</p>
    <section id="sec">
        <style>
            #sec {
                background: red;
                overflow: hidden;
            }
            #child {
                height: 100px;
                margin-top: 10px;
                background: yellow;
            }
        </style>
        <article id="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; background: pink;">
            <p style="margin: 5px auto 25px; background: red;">2</p>
        </div>
        <p>3</p>
    </section>

    <!-- bfc不与float重叠 -->
    <section id="layout">
        <style>
            #layout {
                background: red;
            }
            #layout .left {
                float: left;
                width: 100px;
                height: 100px;
                background: pink;
            }

            #layout .right {
                height: 110px;
                background: orange;
                overflow: hidden;
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
    </section>
        <style>
            #float {
                background: red;
                overflow: hidden;
            }
            #float .float {
                float: left;
                font-size: 30px;
            }
        </style>
    <section id="float">
        <div class="float">我是浮动元素</div>
    </section>
</body>
</html>

最后编辑于：2018.01.17 09:34:53