css扩展引申到BFC（HTml，css底层原理）

文章目录

浏览器前缀
FC – Formatting Context（格式化上下文）
- BFC – Block Formatting Context
BFC有什么作用呢?
- BFC的作用一：解决折叠问题（权威）
- BFC的作用二：解决浮动高度塌陷（权威）
媒体查询
- 媒体查询 - 媒体类型（Media types）
- 媒体查询 – 媒体特性（Media features）
- 媒体查询 – 逻辑操作符（logical operators）
常见的移动端设备
css中单位
- CSS中的绝对单位（ Absolute length units ）
当我们聊pixel时，到底在聊些什么？

浏览器前缀

link
can i use 能够在线查看前段属性，浏览器等兼容功能
在这里插入图片描述

◼ 有时候可能会看到有些CSS属性名前面带有：-o-、-xv-、-ms-、mso-、-moz-、-webkit
在这里插入图片描述
◼ 官方文档专业术语叫做：vendor-specific extensions（供应商特定扩展）

◼ 为什么需要浏览器前缀了？
为什么加上特定的前缀浏览器才能相对应的css才能显示成功？
 CSS属性刚开始并没有成为标准，浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀；

举例: 在这里插入图片描述

◼ 上述前缀叫做浏览器私有前缀，只有对应的浏览器才能解析使用

 -o-、-xv-：Opera等
 -ms-、mso-：IE等
 -moz-：Firefox等
 -webkit-：Safari、Chrome等

◼ 注意：不需要手动添加，后面学习模块化打包工具会自动添加浏览器前缀

在打包工具之前手动打包HTML，css，JavaScript等是非常麻烦的，现在有一个webpack，里面有很多的插件，到时候写一个.browserlist的文件，写上需要适配内些浏览器，webpack里面的插件根据你的内容自动会去can i use里面查找适配的浏览器，那些浏览器css需要加上相应的前缀，那些不需要，最后将代码打包的时候，会自动添加相应的浏览器前缀。下面我们来了解bfc，网上都是根据现象来推测，小编从官方文档和大家探讨探讨！

FC – Formatting Context（格式化上下文）

◼ 什么是FC呢？
在这里插入图片描述
◼ FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的；

◼ 块级元素的布局属于Block Formatting Context（BFC）

   也就是block level box都是在BFC中布局的；

◼ 行内级元素的布局属于Inline Formatting Context（IFC）

   而inline level box都是在IFC中布局的；

BFC – Block Formatting Context

◼ block level box都是在BFC中布局的，那么这个BFC在哪里呢？

◼ MDN上有整理出在哪些具体的情况下会创建BFC：在这里插入图片描述

    根元素（<html>）
    浮动元素（元素的 float 不是 none）
    绝对定位元素（元素的 position 为 absolute 或 fixed）
    行内块元素（元素的 display 为 inline-block）
    表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值），表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
    匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、 row、tbody、thead、tfoot 的默认属性）或 inline-table）
    overflow 计算值(Computed)不为 visible 的块元素
    弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
    网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
    display 值为 flow-root 的元素

在这里插入图片描述
这个简单的代码已经内部触发生成了BFC环境，当给box盒子设置css属性，此生成了新的BFC环境。对了，display值为flow–root兼容性更差！

BFC有什么作用呢?

我们来看一下官方文档对BFC作用的描述：
在这里插入图片描述
◼ 简单概况如下：

在BFC中，box会在垂直方向上一个挨着一个的排布；
垂直方向的间距由margin属性决定；
在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；
那么这个东西有什么用呢？

解决margin的折叠问题；
解决浮动高度塌陷问题；

下面展示一个简单代码:
在这里插入图片描述
运行结果:

肯定会说两个div没有空隙是因为没有设置margin？确实是因为没有设置margin，单从内部渲染来看，我们行盒也好，div也好margin的内核逻辑就是BFC生成的。

给box1设置成css再设置一个width:50px；
在这里插入图片描述
在没有设置margin等别的值时，它是默认紧贴左边缘（紧贴包含块)，为什么这样排布呢？
是此时的BFC在帮你做排布

BFC的作用一：解决折叠问题（权威）

◼ 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）

官方文档明确的有说
 The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins
between adjacent block-level boxes in a block formatting context collapse.

那么如果我们让两个box是不同的BFC呢？那么就可以解决折叠问题
在这里插入图片描述
代码展示
两个盒子box分别设置了margin–bottom与margin–top
运行结果

会发现两个盒子之间距离发生了层叠，如果不想让它们之间发生层叠应该怎么做呢？
根据前面谈到的原理，只需新生成一个bfc环境即可

注意:设置到box里overflow:auto虽然会生成bfc环境，发现没有消除margin折叠。
这是生成的bfc环境与第二个盒子在HTML这个bfc环境里虽然生成了，可以理解为并没有在HTML这个bfc环境外生成，所以最终还是属于同一个bfc环境。

解决方式:在第一个box1外面设置一个div盒子container，container{overflow:hidden}这时候会消除margin折叠。
在这里插入图片描述

box1属于container的bfc，box2属于box2的bfc

这里的overflow:hidden我用这个属性在这里举例，并不是固定的，出来overflow:visiblity这个之外别的都可以进行脱离，别的属性大家可以去官网/MDN官网查看，小编在这里推荐看MDN这个不仅全，而且还是中文姐姐了大家语言不通问题，最主要能比官网容易理解一些。

上面这个彩色盒子与下面橘黄色盒子不属于同一个bfc，但是container整个一行与橘黄色box2盒子属于同一个bfc环境，因为他们同时在一个HTM的bfc环境（中间虽有新生成的bfc，但最终bfc还是属于HTML这个bfc环境里）

BFC的作用二：解决浮动高度塌陷（权威）

网上有很多说法，BFC可以解决浮动高度塌陷，可以实现清除浮动的效果等等。

但是从来没有给出过BFC可以解决高度塌陷的原理或者权威的文档说明；
压根没有办法解释，为什么可以解决浮动高度的塌陷问题，但是不能解决绝对定位元素的高度塌陷问题呢？

◼ 事实上，BFC解决高度塌陷需要满足两个条件：

浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）；
浮动元素的父元素的高度是auto的；

◼ BFC的高度是auto的情况下，是如下方法计算高度的
 1.如果只有inline-level，是行高的顶部和底部的距离；
 2.如果有block-level，是由最底层的块上边缘和最底层块盒子的下边缘之间的距离
 3.如果有绝对定位元素，将被忽略；
 4.如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘。
在这里插入图片描述
代码展示:
运行结果:

背景设置了orange，为什么没有显示呢？
小编前面文章已经讲过这个问题，是因为浮动元素脱离了标准流，不再向父元素属性汇报，那么用bfc也可以进行清楚浮动，还原背景颜色，虽然官方文档没有说这个问题，网友们都是用现象推测！全网说法不一！

先复习一下清除浮动方式
在这里插入图片描述

bfc消除浮动方式
只需将container里面增加overflow–hidden即可

注意bfc消除浮动不准确，父元素postion为relative，子元素postion为absolute，就不能消除了。

媒体查询

媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。

◼ 可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改你的页面。

媒体查询的使用方式主要有三种：

  方式一：通过@media和@import使用不同的CSS规则（常用）；

在这里插入图片描述

  方式二：使用media属性为<style>, <link>, <source>和其他HTML元素指定特定的媒体类型；

在这里插入图片描述

  方式三：使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态；

比较常用的是通过@media来使用不同的CSS规则，目前掌握这个即可；

媒体查询 - 媒体类型（Media types）

◼ 在使用媒体查询时，你必须指定要使用的媒体类型。

媒体类型是可选的，并且会（隐式地）应用 all 类型。

◼ 常见的媒体类型值如下：

all：适用于所有设备。
 print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。
 screen（掌握）：主要用于屏幕。
 speech：主要用于语音合成器。

◼ 被废弃的媒体类型：
 CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型(tty, tv, projection, handheld, braille, embossed, 以及 aural)；
 但是他们在Media Queries 4 中已经被废弃，并且不应该被使用；
 aural类型被替换为具有相似效果的speech。

媒体查询 – 媒体特性（Media features）

◼ 媒体特性（Media features）描述了浏览器、输出设备，或是预览环境的具体特征；
 通常会将媒体特性描述为一个表达式；
 每条媒体特性表达式都必须用括号括起来；

特征价值最小/最大描述
宽度width 长度是的渲染表面的宽度
高度height 长度是的渲染表面的高度
颜色color 整数是的每个颜色分量的位数
设备比例device-aspect-ratio 整数/整数
是的长宽比
设备高度device-width 长度是的
输出设备的高度
设备宽度device-height 长度是的输出设备的宽度
方向orientation “portrait”或“landscape”不屏幕方向
分辨率resolution 分辨率（“ dpi”，“ dpcm”或“ dppx”）是的解析度

媒体查询 – 逻辑操作符（logical operators）

媒体查询的表达式最终会获得一个Boolean值，也就是真（true）或者假（false）。
 如果结果为真（true），那么就会生效；
 如果结果为假（false），那么就不会生效；

◼ 如果有多个条件，我们可以通过逻辑操作符联合复杂的媒体查询：

 and：and 操作符用于将多个媒体查询规则组合成单条媒体查询
 not：not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。
 only：only运算符仅在整个查询匹配时才用于应用样式。
 , (逗号)：逗号用于将多个媒体查询合并为一个规则。

◼ 比如下面的媒体查询，表示：屏幕宽度大于500，小于700的时候，body背景颜色为红色；
在这里插入图片描述

常见的移动端设备

在这里插入图片描述

css中单位

前面编写的CSS中，我们经常会使用px来表示一个长度（大小），比如font-size设置为18px，width设置为100px。
◼ px是一个长度（length）单位，事实上CSS中还有非常多的长度单位。
◼ 整体可以分成两类：
 绝对长度单位（Absolute length units）；
 相对长度单位（Relative length units）；

CSS中的绝对单位（ Absolute length units ）

相对长度单位

 相对长度单位相对于其他一些东西；
 比如父元素的字体大小，或者视图端口的大小；
 使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应；

em:
在这里插入图片描述
rem:

vw/wh

相对单位相对于
em
在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width

ex
字符“x”的高度

ch
数字“0”的宽度

rem
根元素的字体大小

lh
元素的line-height
vw
视窗宽度的1%
vh
视窗高度的1%

当我们聊pixel时，到底在聊些什么？

前面我们已经一直在使用px单位了，px是pixel单词的缩写，翻译为像素。

◼ 那么像素到底是什么呢？

 像素是影响显示的基本单位。（比如屏幕上看到的画面、一幅图片）；
 pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel；
 “像素”表示“画像元素”之意，有时亦被称为pel（picture element）；

在这里插入图片描述
## 像素的不同分类（一）

100个pixel到底是多少呢？

 我们确实可以在屏幕上看到一个大小，但是这个大小代表的真实含义是什么呢？
 我们经常说一个电脑的分辨率、手机的分辨率，这个CSS当中的像素又是什么关系呢？
在这里插入图片描述
◼ 这里我们要深入到不同的像素概念中，来理解CSS中的pixel到底代表什么含义。
◼ 像素单位常见的有三种像素名称：
 设备像素（也称之为物理像素）；
 设备独立像素（也称之为逻辑像素）；
 CSS像素；