一、基本概念

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. lnmp 安装yarn

    Linux 安装 curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/y ...

  2. Gradle之Android Gradle Plugin 主要流程分析(二)

    [Android 修炼手册]Gradle 篇 -- Android Gradle Plugin 主要流程分析 预备知识 理解 gradle 的基本开发 了解 gradle task 和 plugin ...

  3. IIS安全狗问题

    1.没有安装以前网站运行正常,安装IIS全狗以后,ajaxpro2出现,找不到任何问题,卸载安全狗以后正常. 2.很久以前遇到的一个问题,有一款NET的cms系统,也是安装了安全狗以后不正常,忘记了c ...

  4. selenium：css_selector定位详解（css selector和xpath的比较）

    selenium使用css selector和xpath的比较 selenium提供的定位方式(常用) ID NAME CLASS CSS SELECTOR XPATH   推荐的定位方式的优先级 优 ...

  5. SpringBoot 使用 RestTemplate 调用exchange方法 显示错误信息

    SpringBoot使用RestTempate SpringBoot使用RestTemplate摘要认证 SpringBoot使用RestTemplate基础认证 SpringBoot使用RestTe ...

  6. GraphQL入门有这一篇就足够了

    GraphQL入门有这一篇就足够了:https://blog.csdn.net/qq_41882147/article/details/82966783 版权声明:本文为博主原创文章,遵循 CC 4. ...

  7. 2019 CSP-S初赛游记

    2019-10-19 ——这个注定要被载入史册的日子 作为一名初中生,和lpy大佬一同参加提高组的比赛,而今年普及组和提高组的时间竟然不一样,于是——凌晨六点半,来到了pdyz和高中生一起坐车去. 高 ...

  8. 一分钟搭建 Web 版的 PHP 代码调试利器

    一.背景   俗话说:"工欲善其事,必先利其器".作为一门程序员,我们在工作中,经常需要调试某一片段的代码,但是又不想打开繁重的 IDE (代码编辑器).使用在线工具调试代码有时有 ...

  9. 剑指offer-对称二叉树-树-python

    题目描述 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的.   # -*- coding:utf-8 -*- # class TreeNo ...

  10. oracle数据库中的存储过程

    存储过程是一组为了完成特定功能的sql语句集,是一段sql代码片段,经编译后存储在数据库中,用户通过指定存储过程的名字并给出参数(如果存储过程存在参就给出,不存在就不用给出参数)来执行它.因为它是一段 ...