1 CSS布局秘籍-任督二脉BFC/IFC( 三 ) _生活百科

orientation（屏幕方向）@import导入外部css样式，支持媒体查询@import url(example.css) screen and (width:800px);

文章插图

/* 媒体查询：在大尺寸模式启用flex布局 ， 横向排列 */@media screen and (min-width: 40em) {.nav ul {display: flex;}.nav li {flex: 1;}}

响应式布局-代码示例（Codepen）
03、CSS的格式化上下文所有元素都是一个盒子Box ，盒子Box是页面布局的基本单位，盒子的不同类型决定了他的布局方式。一个页面由各种盒子的组合、嵌套形成。这些盒子各不相同，有些是横排，有些竖排，有些是弹性，有些是网格，那他们是如何布局的呢？这就必须要了解的一个概念——格式化上下文。
格式化上下文（Formatting Contexts），就是把页面内容分为多个不同的格式化上下文（区域），每个格式化上下文都是一个独立的渲染（布局）区域，存放同类型的盒子。根据盒子的不同，格式化上下文分为多种（四种）类型，每种类型有自己的渲染规则，决定了其内部子元素的定位、排列方式。
格式化上下文简述BFC：块级格式化上下文Block fomatting context ，由块级盒子组成的上下文区域，纵向排列。需要重点了解的，浮动float布局的各种坑就靠他来填了。IFC：内联级格式上下文Inline formatting context ，内联格式上下文，就是横向布局的内联盒子，由内联盒子构成FFC：弹性盒格式化上下文Flexible Formatting Contex ，就是flex布局的弹性盒子，申明flex（或inline-flex）布局就是创建了一个FFC弹性盒子格式上下文。GFC：网格格式化上下文Grids Formatting Context ，就是grid（或inline-grid）布局的盒子，二维网格布局，使用很方便。不过由于兼容性问题（很多属性不支持IE），使用还不广泛，不过现代浏览器基本都支持了。实际上这些格式上下文也是相互嵌套的，各自负责各自区域进行渲染（布局）。