【CSS】309- 复习 CSS盒模型
点击上方“前端自习课”关注,学习起来~
一、概念
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
之间的水平方向的 margin
,border
和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盒模型的更多相关文章
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- css文档之盒模型阅读笔记
前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...
- CSS 常用语法与盒模型分析
CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- HTML和CSS前端教程05-CSS盒模型
目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...
- css和css3弹性盒模型实现元素宽度(高度)自适应
一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
- [浅谈CSS核心概念] CSS元素类型和盒模型
元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...
- CSS的两种盒模型
盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式. 当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如: <!DOCTYPE HTML PUBLI ...
- CSS Display属性与盒模型
由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...
- CSS布局定位基础-盒模型和定位机制
1. 盒模型 2. 外边距合并 3. 定位机制 4. Float 5. Position:属性有哪些取值,它们的行为是什么? 无依赖绝对定位? 6. Display:常见属性值有哪些取值? 7. 对B ...
随机推荐
- Maven系列第9篇:多环境构建支持,核心开发必备!
maven系列目标:从入门开始开始掌握一个高级开发所需要的maven技能. 这是maven系列第9篇. 整个maven系列的内容前后是有依赖的,如果之前没有接触过maven,建议从第一篇看起,本文尾部 ...
- 关于 “'sqlite3' 不是内部或外部命令.....”问题
学习django 按书上的 执行 manage.py dbshell 时, 报“'sqlite3' 不是内部或外部命令,也不是可运行的程序 或批处理文件.” 也就是指,环境变量中没有“sqlite3 ...
- 在lldb调试中调用c++函数 - 如何使用QuartzCore里面的日志消息
承接上一篇,上一篇讲到可以在lldb调试中调用QuartzCore.framework里的CA::Render::Object::show方法来是观察CA::Render模块内的类的信息,但是在lld ...
- C++控制台闪回;编译器警告C4305,C4244
这是我以前解决问题时,收集在印象笔记里的内容,为了以后整理方便,把它转移至这里.以下内容,均来自微软官方网站相关. 问题:C++控制台闪回 解决办法: 1,在程序结尾添加system( ...
- TensorFlow在windows 下的安装
前言:从2015年谷歌将tensorflow开源后,这位用于深度学习的强大神器便把Caffe,Keras,Torch7等这一票人全部干掉,github上的star和fork是一路飙升,几乎是它们的总和 ...
- odoo12 修行基础篇之 添加明细字段 (二)
前一篇介绍了如何在视图和表单中添加字段.本节内容,我们讨论下如何在明细中加字段. 我想在销售页面明细中增加税额字段,这在表sale.order.line中已经存在,在此仅用来演示. odoo的明细一般 ...
- 【论文阅读】A practical algorithm for distributed clustering and outlier detection
文章提出了一种分布式聚类的算法,这是第一个有理论保障的考虑离群点的分布式聚类算法(文章里自己说的).与之前的算法对比有以下四个优点: 1.耗时短O(max{k,logn}*n), 2.传递信息规模小: ...
- Vue之组件及组件通信
组件之全局组件 //注意:需要在Vue实例化之前注册全局组件,使用Vue.component("组件名",{ template:`组件模板` }) Vue.component(&q ...
- 7. 彤哥说netty系列之Java NIO核心组件之Selector
--日拱一卒,不期而至! 你好,我是彤哥,本篇是netty系列的第七篇. 简介 上一章我们一起学习了Java NIO的核心组件Buffer,它通常跟Channel一起使用,但是它们在网络IO中又该如何 ...
- OSI案例详解+ARP+DNS
案例,淘宝买东西 DNS 域名的作用其实就是相对ip地址来说更好记忆和识别,DNS就是根据域名解析出ip 一次请求,DNS解析的过程 1.在浏览器输入一个域名,操作系统首先会检查自己的本地hosts文 ...