CSS盒模型

最新推荐文章于 2022-08-28 15:25:52 发布

zhanghuali2019

最新推荐文章于 2022-08-28 15:25:52 发布

阅读量508

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/zhanghuali0210/article/details/82347680

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

题目：谈谈你对CSS盒模型的认识

回答知识点：（1）标准模型 + IE模型（2）标准模型和IE模型的区别（3）CSS如何设置这两种模型（4）JS如何设置获取盒模型对应的宽和高（5）实例题（根据盒模型解释边距重叠）（6）BFC(编剧重叠解决方案)

一、CSS盒模型

1、标准模型：width = content

2、IE模型：width = content + padding + border

二、CSS如何设置这两种模型

用CSS3里面的：

box-sizing:content-box;    //标准盒模型
box-sizing:bordr-box;      //IE盒模型

//浏览器默认的是标准盒模型

三、JS如何设置获取盒模型对应的宽或者高

dom.style.width/height      //只能获取内联样式的宽或高
dom.currentStyle.width/height   //只有IE支持，内联、样式表、外联都可以获取到
window.getComputedStyle(dom).width/height  //兼容firforx和chorm,可以获取到三种CSS样式
dom.getBoundingClientRect().width/height   //dom.getBoundingClientRect()适用的场所是计算一个元素的位置，相对于视窗的左顶点的一个绝对位置，拿到的值有left、top、width、height四个值。

四、根据盒模型解释边距重叠：

边距重叠的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html *{
            padding:0;
            margin:0;
        }
    </style>
</head>
<body>
    <!--BFC垂直方向编剧重叠-->
    <section id="margin">
        <style>
            #margin{
                background: pink;
                overflow: hidden;
            }
            #margin>p{
                margin: 5px auto 25px;     //上边距是5px 下边距是25px
                background: red;
            }
        </style>
        <p>1</p>
        <p>2</p>   <!--p1和p2，p1的下边距和p2的上边距重叠，根据编剧重叠原则，然后取他们的最大值-->
        <p>3</p>
    </section>
</body>
</html>

那么如何解决这种编剧重叠问题呢？解决方式就是给子元素增加一个父元素，给父元素创建一个BFC。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html *{
            padding:0;
            margin:0;
        }
    </style>
</head>
<body>
    <!--BFC垂直方向编剧重叠-->
    <section id="margin">
        <style>
            #margin{
                background: pink;
                overflow: hidden;
            }
            #margin>p{
                margin: 5px auto 25px;     /*上边距是5px 下边距是25px*/
                background: red;
            }
        </style>
        <p>1</p>
        <div style="overflow: hidden;">
            <p>2</p>
        </div>   <!--p1和p2，p1的下边距和p2的上边距重叠，根据编剧重叠原则，然后取他们的最大值-->
        <p>3</p>
    </section>
</body>
</html>

五、BFC（边距重叠解决方案）

1、BFC（块级格式化上下文）的基本概念

2、BFC的原理

3、如何创建BFC

float的值不为none
position的值不为static或者reletive
display的值为inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不为visiable

4、BFC使用场景

1、BFC不与float重叠。

两栏布局，左边固定宽度，右边自使用，左边高度100px，右边高度110px

    <section id="layout">
        <style media="screen">
            #layout{
                background: red;
            }
            #layout .left{
                float:left;
                width:100px;
                height:100px;
                background: deeppink;
            }
            #layout .right{
                height:110px;
                background: gray;
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
    </section>

效果显示：

右侧灰色部分超出的高度部分已经侵占了左侧的部分，我们怎么解决呢？那就是给右侧的元素创建一个BFC。我们修改right为如下：

            #layout .right{
                height:110px;
                background: gray;
                overflow: auto;
            }

此时的效果为：

2、BFC子元素即使是float也会参与计算。（清除浮动背后的原理）

   <section id="float">
        <style media="screen">
            #float{
                background: red;
            }
            #float .float{
                float:left;
                font-size:30px;
            }
        </style>
        <div class="float">我是浮动元素</div>
    </section>

此时这样的布局，我们不能看见父元素的背景元素，只能看见子元素内容，原因是，子元素浮动，父元素并没有把子元素的高度计算在内，导致父元素高度为0.

我们该如何解决呢？我们可以给父元素创建一个BFC，代码如下：

            #float{
                background: red;
                /*overflow: auto;*/
                float:left;
            }

zhanghuali2019

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型

题目：谈谈你对CSS盒模型的认识回答知识点：（1）标准模型 + IE模型（2）标准模型和IE模型的区别（3）CSS如何设置这两种模型（4）JS如何设置获取盒模型对应的宽和高（5）实例题（根据盒模型解释边距重叠）（6）BFC(编剧重叠解决方案)一、CSS盒模型1、标准模型：width = content2、IE模型：width = content + ...
复制链接

扫一扫

专栏目录