美文网首页
CSS盒模型

CSS盒模型

作者: 陈裔松的技术博客 | 来源:发表于2018-11-26 18:01 被阅读0次

题目:谈谈你对CSS盒模型的理解

基本概念:标准模型和IE模型

微信图片_20181126172514.png
微信图片_20181126174908.png

标准模型和IE模型的区别:计算宽高的方式不同

  • 标准模型:content
  • IE模型:content + border + padding

CSS如何设置这两种模型:box-sizing

  • 标准模型(浏览器默认):box-sizing:content-box
  • IE模型:box-sizing:border-box

js如何获取盒模型对于的宽和高

  1. dom.style.width/height // 仅适用于内联样式,也就是说嵌入样式和外联样式是不适用的
  2. dom.currentStyle.width/height // 仅IE浏览器支持,兼容性较差
  3. window.getComputedStyle(dom).width/height // Chorme和Firefox都支持,兼容性较好
  4. dom.getBoundingClientRect().width/height

BFC (Block Fromatting Context)

BFC学习:https://www.cnblogs.com/libin-1/p/7098468.html

基本概念,什么是BFC

BFC的意思是块级格式化上下文 (Block Fromatting Context)

BFC的原理(渲染规则)
  1. BFC在页面上是一个独立的容器,外面的元素不会影响里面的元素,反之里面的元素也不会影响外面的元素
  2. BFC元素的区域,不会与浮动元素的box重叠
  3. 计算BFC高度的时候,浮动元素也会参与计算
如何创建BFC

浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。
为了便于理解,我们换一种方式来重新定义BFC。一个HTML元素要创建BFC,则满足下列的任意一个或多个条件即可:

  1. float的值不是none。
  2. position的值不是static或者relative。
  3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  4. overflow的值不是visible
BFC的使用场景
  1. 第一个使用场景:解决垂直方向边距重叠问题
    先来看问题,从显示结果上可以看到,第一个p元素和第二个p元素之间,还有第二个p元素和第三个p元素之间,边距已经发生了重叠。彼此之间的间距是20px,而不是相加之后的30px。
  • 【问题】html
    <section id="margin">
        <p>第一个p元素</p>
        <p>第二个p元素</p>
        <p>第三个p元素</p>
    </section>
  • 【问题】css
        #margin{
            background-color: pink;
            overflow: auto;
        }
        #margin p{
            margin: 10px auto 20px;
            background-color: red;
        }
  • 【问题】显示结果


    微信图片_20181126233755.png

如果不想让第二个p元素的边距与上下相邻的元素发生重叠,该怎么做呢?其实,只需要为第二个p元素添加一个BFC的父元素就可以了。
我们来看下面的修改方案,从显示结果可以看到,三个p元素之间的间距已经变成30px了,也就是说,第二个p元素的边距已经不再与相邻的元素重合了。这是因为第二个p元素所在的父元素,是一个BFC元素(overflow: auto),它是一个独立的容器,高度包括子元素(也就是第二个p元素)的边距,且不受到外界其他元素的影响。

  • 【方案】html(为第二个p元素添加了BFC父元素)
    <section id="margin">
        <p>第一个p元素</p>
        <div style="overflow:hidden">
            <p>第二个p元素</p>
        </div>
        <p>第三个p元素</p>
    </section>
  • 【方案】css(没有变化)
        #margin{
            background-color: pink;
            overflow: auto;
        }
        #margin p{
            margin: 10px auto 20px;
            background-color: red;
        }
  • 【方案】显示结果


    微信图片_20181126235108.png
  1. 第二个使用场景:使BFC不与float重叠
    先来看问题,从显示结果上可以看到,左边的元素是浮动的,而右边的元素由于比左边的高一点点(10px),那些多出来的部分会包裹在左边元素的下面。这个现象是左边元素的浮动属性造成的,浮动元素会脱离文档流。
  • 【问题】html
    <section id="layout">
        <div class="left">left</div>
        <div class="right">right</div>
    </section>
  • 【问题】css
        #layout{
            background-color: pink;
        }
        #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #layout .right{
            height: 110px;
            background-color: yellow;
        }
  • 【问题】显示结果


    微信图片_20181127001607.png

这显然不是我们想要的布局效果,怎样才能让右边元素自然的显示为一个方块呢?答案是,只要设置右边元素设为BFC元素就可以了。
我们来看下面的修改方案,从显示结果可以看到,右边元素的样式就比较舒服了,是我们想要的效果。这是因为右边元素被设置为BFC元素(overflow: hidden)之后,就不会再与浮动元素的box重叠了。

  • 【方案】html(没有变化)
    <section id="layout">
        <div class="left">left</div>
        <div class="right">right</div>
    </section>
  • 【方案】css(右边元素添加了overflow: hidden)
        #layout{
            background-color: pink;
        }
        #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #layout .right{
            height: 110px;
            background-color: yellow;
            overflow: hidden;   /* 增加了这个属性*/
        }
  • 【方案】显示结果


    微信图片_20181127003837.png
  1. 第三个使用场景:计算浮动元素的高度,清除浮动
    先来看问题,从显示结果上可以看到,父元素的背景颜色并没有显示,这是因为父元素的高度为0。而高度为0的原因,是因为子元素是浮动的,所以父元素在计算高度的时候,并没有把这个浮动的子元素高度计算进去,导致父元素本身的高度为0。
  • 【问题】html
    <section id="float">
        <div class="float">我是浮动元素</div>
    </section>
  • 【问题】css
        #float{
            background-color: pink;
        }
        #float .float{
            float: left;
            font-size: 30px;
        }
  • 【问题】显示结果


    微信图片_20181127085054.png

我们来看下面的修改方案,可以看到父元素的背景颜色已经显示出来了。
其实这就是清除浮动背后的原理,设置父元素为BFC元素。

  • 【方案】html(没有变化)
    <section id="float">
        <div class="float">我是浮动元素</div>
    </section>
  • 【方案】css
        #float{
            background-color: pink;
            overflow: hidden;  /* 增加了这个属性*/
        }
        #float .float{
            float: left;
            font-size: 30px;
        }
  • 【方案】显示结果


    微信图片_20181127085535.png

清除浮动总结:https://www.cnblogs.com/nxl0908/p/7245460.html

相关文章

  • 6.3盒模式

    盒模型 什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可...

  • 盒模型

    什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可以设置宽...

  • CSS盒模型

    CSS盒模型的认识 标准模型 和 IE模型 CSS盒模型包括content,padding,border,marg...

  • Css盒模型以及Bfc的应用场景

    CSS盒模型: 一 基本概念: 分为标准模型+IE模型。 二 标准盒模型和IE盒模型的区别。CSS如何设置这两种盒...

  • CSS 盒模型总结

    概念 CSS盒模型 包含:content padding border margin 类型 CSS盒模型分为 标准...

  • HTML/CSS 04-css盒模型

    css盒模型的组成部分,css margin,css padding,css盒子的实际大小 目录: 一、盒模型的组...

  • html+css 12

    开篇十二章 1、css布局模型 清楚了CSS 盒模型的基本概念、 盒模型类型,...

  • 1.CSS盒模型

    css盒模型 css中,Box Model叫盒子模型;盒模型规定了 元素内容(content)、内边距(paddi...

  • 前端知识点之谈一谈css盒模型、BFC

    知识点:--css 盒模型--标准模型和 IE 模型--BFC 谈一谈 css 盒模型、BFC 是面试中常见的问题...

  • CSS盒模型作业

    前言:本章主要讲CSS盒模型,CSS盒模型是CSS中most import 的一个概念,如果我们想学好CSS,那么...

网友评论

      本文标题:CSS盒模型

      本文链接:https://www.haomeiwen.com/subject/rqabqqtx.html