CSS盒模型面试知识点
一、基本概念
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盒模型面试知识点的更多相关文章
- 面试汇总——说一下CSS盒模型
本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...
- 前端面试必备技巧（二）css盒模型及BFC
CSS盒模型 基本概念:标准模型+IE模型及区别 CSS如何设置这两种模型? JS如何设置获取盒模型对应的宽和高? 实例题(根据盒模型解释边距重叠) BFC边距重叠解决方案 (1)BFC的基本概念:b ...
- CSS盒模型的深度思考及BFC
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- 详解CSS盒模型
原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...
- 详解CSS盒模型（转）
详解CSS盒模型 阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...
- 【CSS】309- 复习 CSS盒模型
点击上方"前端自习课"关注,学习起来~ 一.概念 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin).边框(border).内边距(padding ...
- 前端笔记（关于css盒模型知识整理）
我以前整理的文章可能也不是特别深入.所以现在开始尝试即使多花点时间收集整理,也不只发浅层知识,这样对技术的深入理解是很有帮助的. 废话不多说,我们现在开始. 说到css盒模型,这是大多面试基础中会经常 ...
随机推荐
- WebMvcConfigurer 与 WebMvcConfigurationSupport避坑指南
我们知道,在Spring Boot 2.0后用自己的的配置类继承WebMvcConfigurerAdapter时,idea会提示这个类已经过时了. 通常情况下我们会采用下面两种代替方案: 实现WebM ...
- cocos2dx基础篇(13) 编辑框之二CCEditBox
[3.x] (1)去掉"CC" (2)设置虚拟键盘的编辑类型 > EditBoxInputMode 变为强枚举 EditBox::EditBoxInputMode // SI ...
- jenkins初级使用篇
1.jenkins的初级使用 1.1 介绍 创建一个项目 可以看到当前登陆用户及用户权限 可以查看到所有构建过的项目的历史 系统管理 My Views:视图功能,我们可以自己创建一个自己的视图 系统管 ...
- Bean与Map的转换 和 Map与Bean的转换
package com.JUtils.beanConvert; import java.beans.BeanInfo; import java.beans.IntrospectionException ...
- MySQL-快速入门（6）连接查询、子查询、正则表达式查询、数据的插入删除更新
1.内连接查询:inner join ... on 只有满足条件的记录才能够出现在结果关系中,即完全相等.自连接查询是一种特殊的内连接查询. 2.外连接查询: 1>左外连接 / 左连接:返回包括 ...
- D-多连块拼图
多连块是指由多个等大正方形边与边连接而成的平面连通图形. – 维基百科 给一个大多连块和小多连块,你的任务是判断大多连块是否可以由两个这样的小多连块拼成.小多连块只能平移,不能旋转或者翻转.两个小多连 ...
- Vue:Elementui中的Tag与页面其它元素相互交互的两三事
前言 公司系统在用elementui做后台开发,不免遇到一些需要自己去根据原有的功能上,加一些交互的功能.今天来介绍下我在用elementUi里的Tag标签与多选框交互的过程,东西听上去很简单,但就是 ...
- GeoAdapter实现WMS、WMTS、ArcGIS MapService的区域权限授权管理
背景: 在实际GIS应用中,我们经常会发布GIS地图服务,然后供WebGIS调用.在某些特殊情况下,需要对服务进行区域授权,特定的用户只能够浏览特定范围内的地图数据.通常情况下大家采用的实现方式是使用 ...
- PyTorch环境配置及安装
环境配置 温馨提示:为了更好的教程体验,提供视频.阅读地址 Youtube: https://www.youtube.com/playlist?list=PLgAyVnrNJ96CqYdjZ8v9Yj ...
- es7.2版本安装ik分词
(一)到官网下载https://github.com/medcl/elasticsearch-analysis-ik对应版本的ik(直接下载releases版本,避免maven打包!!!如果不是这个版 ...