盒模型有两种，W3C 和IE 盒子模型

  1. W3C定义的盒模型包括margin、border、padding、content，元素的宽度width=content的宽度

  2. IE盒模型与W3C盒模型的唯一区别就是元素的宽度，元素的width=border + padding + content

  3. IE定义的盒模型较为合理，所以在css3中新增了box-sizing，包含两个属性content-box和border-box。

  4. content-box 元素的width = content

  5.  border-box 元素的width = border + padding + content

1. 对于行内元素 margin-top/margin-bottom对于上下元素无效，margin-left/margin-right有效！ 对于相邻的块级元素margin-top和margin-bottom两者叠加按照一定的规则

（1） 都是整数 margin值取两者的最大值

        （2） 都是负数 margin值取最小值

        （3）两者正负相反，margin值取两者之和

标准盒模型和IE模型的区别

标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

标准盒模型下盒子的大小  = content + border + padding + margin

怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度

怪异盒模型下盒子的大小=width（content + border + padding） + margin

2. 根据盒模型解释边距重叠：

BFC（边距重叠解决方案）：

  • bfc的基本概念：

BFC 全称为 块格式化上下文 (Block Formatting Context) 。

  • bfc的原理：

1.BFC，这个元素的垂直方向的边距会发生重叠。
2.bfc的区域不会与浮动元素的box重叠
3.计算bfc高度的时候浮动元素也会参与计算
4.bfc在页面上是一个独立的容器，外面的元素不会影响里面的元素

  • 怎么创建bfc：

　　　　根元素

1.float属性不为none

2.position为absolute或fixed

3.display为inline-block, table-cell, table-caption, flex, inline-flex

4.overflow不为visible

  • bfc的使用场景有哪些？

BFC解决兄弟元素垂直方向边距重叠 （给子元素增加了父元素div）外边距将不会重叠：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>获取盒子宽高</title>

    <style>

        #box1{

        color: white;

        font-size:50px;

        text-align: center;

        line-height:185px;

        width:300px;height:185px;

        background: plum;

        margin:99px;

    }

        #box2{width:300px;

        height:185px;

        background:pink;

        color: white;

        font-size:50px;

        text-align: center;

        line-height:185px;

        margin:99px;

        }

    </style>

</head>

<body>

    <div id="box1">盒子一</div>

    <div style="overflow:hidden"><div id="box2">盒子二</div><div>

</body>

</html>

效果图：

BFC如何解决父元素和子元素的边距重叠 !

可以在父元素中开启BFC，尽量使用overflow：hidden；

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

        #a{

          width:100px;

          height: 100px;

          overflow: hidden;

          background-color: yellowgreen;

          /*display:inline-block;*/

          margin:auto;

        }

        #b{ width:50px;

          height: 50px;

          margin:25px;

          background: pink;}

      </style>

</head>

<body>

  <div id="a"><div id="b"></div></div>

</body>

</html>

用BFC解决之前：

父元素的margin和子元素的margin相互重叠

解决之后：

父元素的margin和子元素的margin将不再相互重叠

BFC不与float重叠（给没有浮动的盒子创建BFC设置 overflow: hidden;）进行页面布局！

<style type="text/css">

        #a{

          width: 100px;

          height: 100px;

          float:left;

          background: red;

        }

        #b{

          background-color: blue;

          height: 200px;

          overflow:hidden;

        }

        </style>

        <body>

        <div id="a"></div>

        <div id="b"></div>

        </body>

没用创建BFC之前会出现元素重叠问题：

这种方式也可以用来去做文字环绕图片效果！

开启了BFC之后元素不再重叠就可以悠闲去进行网页排版了：

这些方法都可以创建 bfc

1.float属性不为none

　　float属性模式是display：inline-block；模式类型为行内块元素！

2.position为absolute或fixed

3.display为inline-block, table-cell, table-caption, flex, inline-flex

4.overflow不为visible

CSS盒模型以及如何解决边距重叠问题的更多相关文章

  1. css盒模型。边框和内外边距

    css盒模型: 外边距 边框 内填充 内容 盒模型分为两种: 标准盒模型: 怪异盒模型(IE盒模型): 边框:border border: 10px solid blue;表示设置10像素蓝色实线条的 ...

  2. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  3. 7.css盒模型

    所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...

  4. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  5. 干货篇：揭开CSS盒模型神秘的面纱

    写博客可以对学习内容进行总结.分享和交流(面对面的技术分享会也不错)... 如果是单纯的记录,印象笔记完全够了. 步入正题,盒模型是web布局核心,掌握基础知识,以后实战中会如鱼得水~ 概念与历史 C ...

  6. CSS盒模型的深度思考及BFC

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...

  7. 每日分享！介绍Css 盒模型！

    如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...

  8. 面试汇总——说一下CSS盒模型

    本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...

  9. CSS盒模型的介绍

    CSS盒模型的概念与分类      CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和 ...

随机推荐

  1. Sentinel Cluster流程分析

     前面介绍了sentinel-core的流程,提到在进行流控判断时,会判断当前是本地限流,还是集群限流,若是集群模式,则会走另一个分支,这节便对集群模式做分析. 一.基本概念  namespace:限 ...

  2. Redis 搭建一主二从三哨兵高可用集群

    1.单个redis服务搭建请参考:redis服务搭建 2.在/usr/local下创建目录redis-cluster,并在redis-cluster下创建 6379.6380.6381目录以及data ...

  3. Web前端开发的应用和前景——web 1.0到web 3.0

    Web前端开发的应用和前景--web 1.0到web 3.0 Web1.0:(只读时代) 以静态.单向阅读为主,网站内信息可以直接和其他网站信息进行交互,能通过第三方信息平台同时对多家网站信息进行整合 ...

  4. 虚拟现实研究经典问卷Presence Questionnaire (PQ) 详细介绍

    虚拟现实(VR)是一种沉浸式体验,它的作用就是将用户完全包裹在一个人为构建出的(数字)虚拟世界中,让用户在这个新环境中得到不一样的体验,或完成一些现实中不能完成的任务.所以让体验者相信“我身处此中”非 ...

  5. 谷歌助力，快速实现 Java 应用容器化

    原文地址:梁桂钊的博客 博客地址:http://blog.720ui.com 欢迎关注公众号:「服务端思维」.一群同频者,一起成长,一起精进,打破认知的局限性. Google 在 2018 年下旬开源 ...

  6. 解决使用MUI时mui-slider-item高度不一致的自适应问题

    今天在写一个MUI项目的时候,发现使用slider时,最高的mui-slider-item会把mui-slider-group撑开,而其他的mui-slider-item下面会出现很大的空白. 百度了 ...

  7. 记录一次redis cpu异常升高的排插思路

    好久没有写博客  现在重新捡起来  记录工作中遇到的问题  方便以后在遇到类似的问题也有一个参考. 背景:有一天生产服务器redis  cpu 频繁报警    单核cpu 所以在想是不是业务量上来了. ...

  8. Xshell、Xftp 5、6 解决“要继续使用此程序,您必须应用最新的更新或使用新版本”

    今天打开Xshell.Xftp,突然弹出“要继续使用此程序,您必须应用最新的更新或使用新版本”. 后来经过一番搜索发现,XShell配置文件中写入了强制升级时间,这个版本是2017年12月27日发布的 ...

  9. Js获取宽高度的归纳集锦总结

    首先,先吓唬一下我们的小白们!在js中的描述宽高的可以细分有22种.属性根据不同的兼容性也分为五种 window.innerWidth //除去菜单栏的窗口宽度,与浏览器相关 window.inner ...

  10. Kubernetes+Docker+Istio 容器云实践

    随着社会的进步与技术的发展,人们对资源的高效利用有了更为迫切的需求.近年来,互联网.移动互联网的高速发展与成熟,大应用的微服务化也引起了企业的热情关注,而基于Kubernetes+Docker的容器云 ...