【CSS3系列】第九章 · 响应式布局和BFC

写在前面

---

        Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

        如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

---

目录

写在前面

1. 响应式布局

1.1 媒体类型

1.2 媒体特性

1.3 运算符

1.4 常用阈值

1.5 结合外部样式的用法

 2. BFC

2.1 什么是BFC

2.2 开启了BFC能解决什么问题

2.3 如何开启BFC

结语

---

【往期回顾】

【CSS3系列】第七章 · 过渡和动画

【CSS3系列】第六章 · 2D和3D变换

【CSS3系列】第五章 · web 字体

【CSS3系列】第四章 · CSS3新增渐变

【CSS3系列】第三章 · CSS3新增边框和文本属性

【CSS3系列】第二章 · CSS3 新增盒模型和背景属性

【CSS3系列】第一章 · CSS3新增的三种基本属性

---

【其他系列】

【HTML5系列】

【HTML4系列】

【CSS2系列】

【Java基础系列】

---

1. 响应式布局

---

1.1 媒体类型

    
    
    


    
新年快乐

---

1.2 媒体特性

    
    
    


    
你好啊

---

1.3 运算符

 

    
    
    


    
你好啊

---

1.4 常用阈值

在实际开发中，会将屏幕划分成几个区间，例如：

---

1.5 结合外部样式的用法

用法一 ：

用法二：

@media screen and (max-width:768px) {
    /*CSS-Code;*/
}
@media screen and (min-width:768px) and (max-width:1200px) {
    /*CSS-Code;*/
}

---

 2. BFC

---

2.1 什么是BFC

W3C 上对 BFC 的定义：

• 浮动、绝对定位元素、不是块盒子的块容器（如 inline-blocks 、 table-cells 和 table-captions ），以及 overflow 属性的值除 visible 以外的块盒，将为其内容建立新的块格式化上下文。

MDN 上对 BFC 的描述：

• 块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

更加通俗的描述：

• BFC 是 Block Formatting Context （块级格式上下文），可以理解成元素的一个“特异功能”。
• 该 “特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能”被激活。
• 所谓激活“特异功能”，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。

---

2.2 开启了BFC能解决什么问题

1. 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。

2. 元素开启 BFC 后，自己不会被其他浮动元素所覆盖。

3. 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

---

2.3 如何开启BFC

• 根元素
• 浮动元素
• 绝对定位、固定定位的元素
• 行内块元素
• 表格单元格： table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
• overflow 的值不为 visible 的块元素
• 伸缩项目
• 多列容器
• column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
• display 的值，设置为 flow-root

---

结语

---

本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力