CSS盒模型

最新推荐文章于 2025-01-02 14:49:38 发布

WWWln1234

最新推荐文章于 2025-01-02 14:49:38 发布

阅读量120

点赞数

分类专栏：盒子模型文章标签：盒子模型 CSS

本文链接：https://blog.youkuaiyun.com/sinat_32308611/article/details/89661354

版权

盒子模型专栏收录该内容

1 篇文章

订阅专栏

1.标准模式下的盒模型

宽度和高度都是设定的css中的width和height的值

2.IE模式下的盒模型

宽度 = 设定的css中的width值 + padding-left + padding-right + border-left +border-right

高度 = 设定的css中的height值 + padding-top+padding-bottom + border-top + border-bottom

3.标准模型和IE模型的区别

计算宽度和高度的不同

4.CSS如何设置这两种模型

#wrap{
    /*IE模型*/
    box-sizing: border-box;
    /*标准模型*/
    box-sizing: content-box;
}

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

1.elem.style.width/height

只能获取到内联样式的宽和高，不能取到style标签中的和外联的样式

2.elem.currentStyle.width/height

拿到的是三种样式通过浏览器渲染后的、及时运行时的结果，相对准确，但是IE8支持

3.window.getComputedStyle(elem,null).width/height

火狐和谷歌支持

4.elem.getBoundingClientRect().width/height/left/top

也是拿到及时运行的渲染的结果，是计算一个元素的绝对位置，以viewport的左顶点为基准

兼容性代码：

//获取任意一个元素的任意一个样式属性的值
function getStyle(elem,attr){
    return window.getComputedStyle?window.getComputedStyle(elem,null)[attr]:elem.currentStyle[attr];
}

6.实例题

1.边距重叠

父元素与子元素：若margin-top或margin-bottom都为正(负)值谁的外边距绝对值大选谁，若一负一正则两者之和
兄弟元素：若margin-top或margin-bottom都为正(负)值谁的外边距绝对值大选谁，若一负一正则两者之和
空元素:空元素的margin-top和margin-bottom会取一个最大值作为边距
BFC元素内部垂直方向上会发生边距重叠

<section class="sec">
    <style>
        .sec {
            background: red;
            /*给父级元素加上overflow:hidden可以显示高度为110px*/
            /*overflow: hidden;*/
        }

        .child {
            height: 100px;
            margin-top: 10px;
            background: green;
        }
    </style>
    <p style="height:20px">这是兄弟元素p，高度20px</p>
    <article class="child">
        这是子元素，切记若父元素有内容，比如高度为20px的p标签，则不会出现边距重叠问题
    </article>
</section>
<section class="bro">
    <style>
        .bro {
            margin-top: 20px;
        }

        .bro p {
            margin-bottom: 10px;
            background: red;
            height: 20px;
        }

        .bro article {
            margin-top: 5px;
            background: green;
            height: 20px;
        }
    </style>
    <p>这是兄弟元素p，下外边距为10px，边距重叠之后的结果为10px，即若都为正(负)值谁的外边距绝对值大选谁，若一负一正则两者之和</p>
    <article>
        这是兄弟元素article，上外边距为5px
    </article>
</section>
<section class="empt-wrap">
    <style>
        .empt-wrap {
            background: red;
        }

        .empt-wrap .empt {
            height: 0;
            margin-top: 10px;
            margin-bottom: 20px;
            background: green;
        }

        .empt-wrap p {
            height: 20px;
        }
    </style>
    <article class="empt"></article>
    <p>空元素的margin-top和margin-bottom会取一个最大值作为边距</p>
</section>
<section id="margin">
    <style>
        #margin {
            background: pink;
            overflow: hidden;
        }

        #margin > p {
            margin: 5px auto 25px;
            background: red;
        }
    </style>
    <p>1</p>
    <p>2BFC原理:BFC元素垂直方向上发生边距重叠</p>
    <p>3</p>
</section>

2.BFC概念

BFC就是块级格式化上下文

原理：

BFC元素的垂直方向上会发生边距重叠
BFC元素内部的元素不会影响外面的元素，外面的元素也不会影响内部的元素
BFC元素在计算高度的时候，内部的浮动元素的高度也会计算
BFC元素与浮动元素的盒子不会发生重叠

如何创建一个BFC：

float属性不为none
position属性不为static和relative
display属性不为table-开头的
overflow不为visible

BFC的使用场景：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        html * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<section id="margin2">
    <style>
        #margin2 {
            background: pink;
            overflow: hidden;
            margin-top: 20px;
        }

        #margin2  p {
            margin: 5px auto 25px;
            background: red;
        }

        #margin2 > .bfc {
            overflow: hidden;
        }
    </style>
    <p>1</p>
    <div class="bfc">
        <p>2BFC垂直方向边距重叠解决：在第二个p元素上加一个父级容器，给父级容器创建BFC</p>
    </div>
    <p>3</p>
</section>
<section id="layout">
    <style>
        #layout{
            background: red;
            margin-top: 20px;
        }
        #layout .left{
            float:left;
            width:300px;
            height: 200px;
            background: green;
        }
        #layout .right{
            height:210px;
            overflow:auto;
            background:pink;
        }
    </style>
    <div class="left"></div>
    <div class="right">
        BFC原理：BFC元素的区域不会与浮动元素的box重叠
        现在需要将.right转为一个BFC
    </div>
</section>

<section id="float">
    <style>
        #float{
            background: red;
            margin-top: 20px;
            /*float: left;*/
            overflow: auto;
        }
        #float .float{
            float: left;
        }
    </style>
    <div class="float">
        我是浮动元素，BFC原理：BFC元素在进行高度计算的时候内部的浮动元素也会参与运算
        作用：可以清除浮动
    </div>
</section>
</body>
</html>