点击上方“前端自习课”关注,学习起来~

一、概念

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)边框(border)内边距(padding)实际内容(content)四个属性。
CSS盒模型:标准模型 + IE模型

1.1 W3C盒子模型(标准盒模型)

1.2 IE盒子模型(怪异盒模型)

二、知识点

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

计算宽度和高度的不同。
标准盒模型:盒子总宽度/高度 = width/height + padding + border + margin。( 即 width/height 只是内容高度,不包含 padding 和 border 值 )
IE盒子模型:盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin。( 即 width/height 包含了 padding 和 border 值 )

2.2 CSS如何设置这两种模型

标准:box-sizing: content-box; ( 浏览器默认设置 )
IE: box-sizing: border-box;

2.3 JS如何获取盒模型对应的宽和高

(1)dom.style.width/height 只能取到行内样式的宽和高,style 标签中和 link 外链的样式取不到。
(2)dom.currentStyle.width/height (只有IE兼容)取到的是最终渲染后的宽和高
(3)window.getComputedStyle(dom).width/height 同(2)但是多浏览器支持,IE9 以上支持。
(4)dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高,大多浏览器支持。IE9 以上支持,除此外还可以取到相对于视窗的上下左右的距离。
(6)dom.offsetWidth/offsetHeight 包括高度(宽度)、内边距和边框,不包括外边距。最常用,兼容性最好。

2.4 实例题(根据盒模型解释边距重叠)

例:父元素里面嵌套了一个子元素,已知子元素的高度是 100px,子元素与父元素的上边距是 10px,计算父元素的实际高度。

CSS:

.parents {   width: 100px;   background: #FF9934;}.child {  width: 100%;  height: 100px;  background: #336667;  margin-top: 10px;}

Html:

<section class='parents'>  <div class='child'><div></section>

它的父元素实际高度是 100px 或 110px 都可以。主要看怎么父元素的盒模型如何设置。如以上代码:父元素不加 overflow: hidden,则父元素的实际高度为 100px;如加上 overflow: hidden 父元素高度为 110px,给父元素创建了 BFC,块级格式化上下文。 完整案例: https://jsbin.com/dubimoyahe/...。

2.5 BFC(边距重叠解决方案)

2.5.1 BFC基本概念

BFC: 块级格式化上下文
BFC基本概念:BFC 是 CSS 布局的一个概念,是一块独立的渲染区域,是一个环境,里面的元素不会影响到外部的元素 。
父子元素和兄弟元素边距重叠,重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。

2.5.2 BFC原理(渲染规则|布局规则):

(1)内部的 Box 会在垂直方向,从顶部开始一个接着一个地放置;
(2)Box 垂直方向的距离由 margin (外边距)决定,属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠;
(3)每个元素的 margin Box 的左边, 与包含块 border Box 的左边相接触,(对于从左到右的格式化,否则相反)。即使存在浮动也是如此;
(4)BFC 在页面上是一个隔离的独立容器,外面的元素不会影响里面的元素,反之亦然。文字环绕效果,设置 float
(5)BFC 的区域不会与 float Box 重叠(清浮动);
(6)计算 BFC 的高度时,浮动元素也参与计算。

2.5.3 CSS在什么情况下会创建出BFC(即脱离文档流)

0、根元素,即 HTML 元素(最大的一个 BFC
1、浮动( float 的值不为 none )
2、绝对定位元素( position 的值为 absolute 或 fixed )
3、行内块( display 为 inline-block )
4、表格单元( display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性 )
5、弹性盒( display 为 flex 或 inline-flex )
6、默认值。内容不会被修剪,会呈现在元素框之外(overflow 不为 visible

2.5.4 BFC作用(使用场景)

1、自适应两(三)栏布局(避免多列布局由于宽度计算四舍五入而自动换行)
2、避免元素被浮动元素覆盖
3、可以让父元素的高度包含子浮动元素,清除内部浮动(原理:触发父 div 的 BFC 属性,使下面的子 div 都处在父 div的同一个 BFC 区域之内)
4、去除边距重叠现象,分属于不同的 BFC 时,可以阻止 margin 重叠

2.6 IFC

2.6.1 IFC基本概念

IFC: 行内格式化上下文
IFC基本概念:

2.6.2 IFC原理(渲染规则|布局规则):

(1)内部的 Box 会在水平方向,从含块的顶部开始一个接着一个地放置;
(2)这些 Box 之间的水平方向的 marginborder 和padding 都有效;
(3)Box 垂直对齐方式:以它们的底部、顶部对齐,或以它们里面的文本的基线(baseline)对齐(默认,文本与图片对其),例:line-heigth 与 vertical-align

源自:https://juejin.im/post/5c90f573e51d450a7d7dfc75

声明:文章著作权归作者所有,如有侵权,请联系小编删除。

▼原创系列推荐▼1.JavaScript 重温系列(22篇全)
2.ECMAScript 重温系列(10篇全)
3.JavaScript设计模式 重温系列(9篇全)
4.正则 / 框架 / 算法等 重温系列(16篇全)

你点的每个赞,我都认真当成了喜欢

【CSS】309- 复习 CSS盒模型的更多相关文章

  1. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. css文档之盒模型阅读笔记

    前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...

  3. CSS 常用语法与盒模型分析

    CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...

  4. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  5. HTML和CSS前端教程05-CSS盒模型

    目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...

  6. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. [浅谈CSS核心概念] CSS元素类型和盒模型

    元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...

  8. CSS的两种盒模型

    盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式. 当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如: <!DOCTYPE HTML PUBLI ...

  9. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...

  10. CSS布局定位基础-盒模型和定位机制

    1. 盒模型 2. 外边距合并 3. 定位机制 4. Float 5. Position:属性有哪些取值,它们的行为是什么? 无依赖绝对定位? 6. Display:常见属性值有哪些取值? 7. 对B ...

随机推荐

  1. git Lab ssh方式拉取代码失败

    gitLab在linux上已经安装好了, 在配置项目的时候报如下异常 使用http方式没问题, 但是用ssh方式设置repository URL 提示资源库不存在. returned status c ...

  2. basename 和 dirname

    basename将目录路径去掉,返回文件的实际文件名(此处也可以是最后一级目录).如与$0一起 if [ $? -eq 0 ]; then cd - ; mv `basename $0` test1. ...

  3. SIGCHLD waitpid, 小心子进程结束事件被偷了

    原本项目中依赖子进程执行的地方,都使用jni调用java层的ProcessManager,换了c++ACE框架后,发现这些任务都很慢,调试才发现所有子进程执行的任务都必须等待到reactor超时才返回 ...

  4. opencv 4 图像处理(漫水填充,图像金字塔与图片尺寸缩放,阈(yu)值化)

    漫水填充 实现漫水填充算法:floodFill函数 简单调用范例 #include <opencv2/opencv.hpp> #include <opencv2/imgproc/im ...

  5. android 网络异步加载数据进度条

    ProgressDialog progressDialog = null; public static final int MESSAGETYPE = 0; private void execute( ...

  6. 20191121-6 Scrum立会报告+燃尽图 02

    此作业的要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/10066一.小组情况 队名:扛把子 组长:孙晓宇 组员:宋晓丽 梁梦瑶 韩 ...

  7. php+redis实现注册、删除、编辑、分页、登录、关注等功能

    本文实例讲述了php+redis实现注册.删除.编辑.分页.登录.关注等功能.分享给大家供大家参考,具体如下: 主要界面 ​ 连接redis redis.php <?php //实例化 $red ...

  8. Python执行系统命令的四种方法

    一.os.system方法 在子终端运行系统命令,可以获取命令执行后的返回信息以及执行返回的状态.执行后返回两行结果,第一行是结果, 第二行是执行状态信息,如果命令成功执行,这条语句返回0,否则返回1 ...

  9. java内存区域,jvm内存各个区域详解

    一.运行时数据区域 1.如图所示,可分为如下几个区域. 2.程序计数器 程序计数器是一块较小的内存空间,它的作用可以看做是当前线程所执行的字节码的行号指示器.字节码解释器工作时就是通过改变这个计数器的 ...

  10. 02-kubeadm初始化Kubernetes集群

    目录 部署 组件分布 部署环境 kubeadm 步骤 基础环境 基础配置 安装基础组件 配置yum源 安装组件 初始化 master 导入镜像 执行命令: 查看组件状态 查看node状态 安装flan ...