CSS盒模型

题目：谈谈你对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;
            }

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

智能推荐

CSS盒模型

盒模型拓展到了一些概念，该篇不只是单纯的对怎样产生一个盒模型来介绍的。首先CSS中元素分为块级元素和行内元素从语义上理解块级元素在网页中霸占一行不与其他元素并列。这是CSS中块级元素与行内元素的分类，那么盒子在CSS中用处很多，我们在未转换的情况下只能对块级元素添加盒子，盒子属性：width（宽）、height（高）、padding（填充）、border（边框）、margin（盒子间距）那...

CSS 盒模型

盒模型的定义：盒模型是页面设计和布局时用到一种思维模型。盒模型由，Margin (外边距), Border (边框) ，Padding(内边距／填充) 和Content（内容）组成。其中外边距margin是透明的，不会遮挡周边的其他元素。标准盒模型里，用CSS对元素设置width 和 height 属性时，设置的其实是content 部分的宽和高，元素实际占位空间，还需要加上Pa...

CSS盒模型详解

CSS盒模型常见问题： 1. 基本概念：标准模型+IE模型 2. 标准模型和IE模型区别 3. CSS如何设置这两种模型 4. JS如何设置获取盒模型对应的宽和高 &nbs...

理解CSS盒模型

CSS盒模型是网页布局中一个很重要的概念，在前端面试题中也会经常出现。本文将从以下几个方面讲解CSS盒模型： CSS盒模型的概念标准盒模型和IE盒模型元素的实际宽高计算更改盒模型模式一、CSS盒模型的概念在网页中，所有的HTML元素都可以看做一个盒子。那么CSS盒模型其本质上就是一个盒子，它封装HTML元素，包括：外边距（margin），边框（border），内边距（padding），和...

CSS盒模型

1.元素的分类：HTML的标签元素大体被分为三种不同的类型：块状元素、内联元素（行内元素）和内联块状元素。常用的块状元素有：<div>、<p>、<h1>……<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote&...

CSS盒模型

智能推荐

猜你喜欢