一、基本概念

1、基本概念：标准盒模型+怪异盒模型（IE模型）

基本组成：由margin、padding、content组成。

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

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

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

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

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

3、CSS如何设置标准模型和IE模型

如果doctype协议缺失，会由浏览器自己界定，在IE浏览器中IE9以下（IE6.IE7.IE8）的版本触发怪异模式，其他浏览器中会默认为W3c标准模式。

box-sizing: content-box  标准盒模型

box-sizing: border-box  IE盒模型

二、盒模型 垂直外边距重叠问题

1、根据盒模型解释边距重叠问题

（1）什么是外边距重叠

垂直方向上的相邻外边距会发生外边距重叠。（a必须是相邻的；b必须是垂直方向上的）

两个或是多个盒子（可能相邻也可能嵌套）的相邻边界（中间没有任何内容、补白、边框）重合在一起而形成的一个单一边界。

边距重叠发生场景：

1、父元素与子元素之间，父元素的上下外边距和子元素的上下外边距之间重叠，选择最大值去渲染。

2、空元素，如果设置了margin-top和margin-bottom，则会在两者之间取一个最大值作为最终外边距。

3、兄弟元素，兄弟元素之间的相邻外边距会取外边距的最大值而不是外边距之和。

Ⅰ父元素边界重叠

<style>

    .parent{background: #e7a1c5;}

    .child{background: #ff6875;height:100px;margin-top:10px;}

    </style>

</head>

<body>

    <div class="parent">

        <div class="child"></div>

    </div>

</body>

预想中效果是：

 实际上是：

父元素高度并不是110px，而是100px，父元素发生了高度坍塌。

原因：如果块元素的margin-top 与它的第一个子元素的margin-top之间没有border、padding、inline content、clearance来分隔；

或者块元素的margin-bottom和它最后一个子元素margin-bottom之间没有border、padding、inline content、height、min-height、max-height分隔。那么外边距就会重叠，父元素高度塌陷。

子元素多余的外边距会被父元素的外边距截取。

Ⅱ 兄弟元素的边界重叠

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .parent{overflow:hidden;width:300px;

        background: #8fdbdb;}

    .parent>p{background: #ff6875;margin:20px auto 30px;}

    </style>

</head>

<body>

    <div class="parent">

        <p>1</p><p>2</p><p>3</p>

    </div>

</body>

可以看到盒子1和2，盒子2和3之间的间距不是50px。兄弟元素垂直外边距重叠选取外边距最大值30px。

Ⅲ 空元素边距重叠

假设有一个空元素，它有外边距，但是没有边框或填充内容。在这种情况下，上外边距与下外边距就碰到了一起，外边距就会合并。

注意：给子元素设置了上外边距100px，子元素和父元素保持相对位置一起下移了100px（如果父子元素的垂直外边距相邻了，那么子元素的外边距会传递给父元素。）

三、BFC解决高度坍塌

（1）什么是BFC

（Block Formatting Context）简称BFC,块级格式化环境

开启BFC的元素会有以下特征：

1.父元素的垂直外边距不会和子元素重叠。

2.开启BFC的元素不会被浮动元素覆盖。

3.开启BFC的元素可以包含浮动的子元素。

 

（2）如何创建BFC

1、overflow不为visible

2、float不为none

3、position不为static或relative时

4、display为inline-block、table-cell、table、table-caption时

（3）BFC使用场景

详细内容：https://www.cnblogs.com/nyw1983/p/11374405.html

CSS盒模型面试知识点的更多相关文章

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

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

  2. 前端面试必备技巧（二）css盒模型及BFC

    CSS盒模型 基本概念:标准模型+IE模型及区别 CSS如何设置这两种模型? JS如何设置获取盒模型对应的宽和高? 实例题(根据盒模型解释边距重叠) BFC边距重叠解决方案 (1)BFC的基本概念:b ...

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

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

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

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

  5. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  6. 详解CSS盒模型

    原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...

  7. 详解CSS盒模型（转）

    详解CSS盒模型   阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...

  8. 【CSS】309- 复习 CSS盒模型

    点击上方"前端自习课"关注,学习起来~ 一.概念 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin).边框(border).内边距(padding ...

  9. 前端笔记（关于css盒模型知识整理）

    我以前整理的文章可能也不是特别深入.所以现在开始尝试即使多花点时间收集整理,也不只发浅层知识,这样对技术的深入理解是很有帮助的. 废话不多说,我们现在开始. 说到css盒模型,这是大多面试基础中会经常 ...

随机推荐

  1. 正则的?:pattern, ?=pattern, ?!pattern学习整理

    真正学习这次正则知识前,我是被这道题给难住了: # 目标文本 str1 = "ever1, ever2, never1, never2, never3, forever1, forever2 ...

  2. ionic3遇到的刷新页面服务器关闭的问题

    这几天为了写毕设,需要使用Ionic写手机客户端,遇到一些奇怪的问题,具体问题就是启动使用ionic serve启动服务器之后只要一刷新界面就会导致服务器关闭,报的错误如下: events.js:13 ...

  3. java中重写

    1.重写[针对父类与子类而言]---------即java的多态性[子类与父类间有相同的名称和参数,此方法就被重写Overriding:又称:方法覆盖] 子类对父类的允许访问的方法的实现过程进行重新编 ...

  4. org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents mor

    今天在用junit测试mybits程序是遇到一个问题,报错为: org.apache.ibatis.exceptions.PersistenceException: ### Error queryin ...

  5. [HDU 3712] Fiolki (带边权并查集+启发式合并)

    [HDU 3712] Fiolki (带边权并查集+启发式合并) 题面 化学家吉丽想要配置一种神奇的药水来拯救世界. 吉丽有n种不同的液体物质,和n个药瓶(均从1到n编号).初始时,第i个瓶内装着g[ ...

  6. PHP之简单工厂模式（二）

    定义 简单工厂模式,通过定义一个工厂类,负责完成类实例的创建,根据参数的不同返回不同的类实例.对外部来讲,只需传入一个正常的参数就可以获得想要的对象,而不必需要具体创建细节.创建类实例的方法通常为静态 ...

  7. tensorflow学习笔记三----------基本操作

    tensorflow中的一些操作和numpy中的很像,下面列出几个比较常见的操作 import tensorflow as tf #定义三行四列的零矩阵 tf.zeros([3,4]) #定义两行三列 ...

  8. SCAU_WeiShenWahle 之省赛任务

    每一项按顺序理解之后裸敲,每个代码最多15分钟,用模板题来测,超过15分钟算未理解 线段树 平衡树( Treap , sbt , spt ) #include <iostream> #in ...

  9. 分布式锁实现方式介绍和Zookeeper实现原理

    分布式锁实现的几种方式 基于数据库实现分布式锁(表.数据库排他锁) 基于缓存(redis,memcached,tair) 基于Zookeeper实现分布式锁 关注点: 单点问题?(集群) 失效时间?( ...

  10. wordpress数据库结构以及数据表之间的关系

    默认WordPress一共有以下11个表.这里加上了默认的表前缀 wp_ . wp_commentmeta:存储评论的元数据 wp_comments:存储评论 wp_links:存储友情链接(Blog ...