flex-box 弹性布局可以实现的效果：自适应布局，效果图如下：
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>flex box 弹性布局 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
html,body{height:100%margin:0}/*需要添加高度控制，否则无法撑满整个屏幕*/
body{
display:-webkit-box
-webkit-box-orient:vertical/*按照垂直方向上进行自适应处理*/
}
.content{-webkit-box-flex:1/*分配剩余的所有空间*/} .header{height:50pxmin-width:500px}/*顶部模块高度定死*/
.logo{width:100pxheight:50pxbackground:#99f}/*为区分模块，设置了背景色 logo部分固定宽高*/
.nav{height:50pxbackground:#ccc}/*nav模块不固定宽度*/
.content{min-height:100px}/*为防止之后的调整窗口大小是出现影响视觉效果的问题，特设置最小高度*/
.content,.header{display:-webkit-box/*为content,header部分也添加box的展示模式*/}
.nav{-webkit-box-flex:1}
.con2{-webkit-box-flex:1}
.con1{width:200pxbackground:#f99}/*固定宽度，高度不定*/
.con2{min-width:200pxbackground:#999}/*同上的min-height*/
.con3{width:100pxbackground:#9f9}/*固定宽度，高度不定*/
.footer{height:50pxmin-width:500pxbackground:#ccc}/*固定高度*/
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<div class="header">
<div class="logo">logo部分，宽高固定</div>
<div class="nav">nav部分，高度固定，宽度自适应</div>
</div>
<div class="content">
<div class="con1">内容初始化第1模块</div>
<div class="con2">内容初始化第2模块</div>
<div class="con3">内容初始化第3模块</div>
</div>
<div class="footer">底部，宽度不定，高度固定</div>
</body>
</html>
几大浏览器巨头将合作建立网页新标准
几大浏览器巨头将合作建立网页新标准，谷歌、微软、苹果、Mozilla已经同意共同合作，致力于改善其网络浏览器的互操作性和用户体验。几大浏览器巨头将合作建立网页新标准。
几大浏览器巨头将合作建立网页新标准1Google、Mozilla、微软和苹果旗下都拥有各自的浏览器产品，近期它们宣布将展开合作，在由软件咨询公司 Bocoup、Igalia 的协助之下，未来将使网页设计内容在各个浏览器上以更一致的形式呈现。
几家公司在这项合作中建立作为网页设计参考依据的 Interop 2022 标准，降低网页在不同浏览器呈现时的差异。在这之前，已经有 W3C、IETF 等网页标准作为参考，但在不同标准之间仍然存有兼容性的落差，尤其随着网络技术的持续进步，甚至加入更多新的设计方式，各标准涵盖的项目或许会不太一样。
Interop 2022 标准将检视各浏览器在 15 个平台规范测试套件的兼容表现，其中包含堆叠图层、色彩空间与 CSS 色彩功能等网页描述设计，同时也纳入苹果 Safari 浏览器兼容性检视，借此让更多设计者能更方便确认网页内容是否能在 Safari 等浏览器上正常显示。
以目前公布的兼容表现来看，Mozilla Firefox 现行稳定版本有较高兼容性，Google Chrome 与 Microsoft Edge 兼容性表现居中，苹果 Safari 则较差。
不过在尚未推出正式版本的. Safari Technology Preview 版本中，兼容性表现已经得到明显提升，超越 Chrome Dev 与 Microsoft Edge Dev 版本，而 Firefox Nightly 版本的兼容性表现依然最高。
几大浏览器巨头将合作建立网页新标准2据外媒报道，苹果、Google、微软和Mozilla，以及软件顾问公司Bocoup和Igalia已经同意共同合作，致力于改善其网络浏览器的互操作性和用户体验。
这些公司制定了一项名为Interop 2022的新标准，该标准主要针对市面上主流的四大浏览器：Safari、Chrome、Edge和Firefox，改善15个网络平台规范中的表现，以及目前正在调查的三个未完全指定的功能。
这些功能包括：层叠图层、色彩空间和CSS色彩功能、新视口单位、滚动和子网格。
简单的来说，通过该标准，Web开发人员不必考虑多个浏览器之间的兼容差异，只要标准互通，页面实现的效果是是一致的。
其实，这并不是浏览器巨头第一次合作了，这些公司就合作开展了一个名为“Combat 2021”的项目，于2019年开始筹划，去年正式出现。
它专注于五个痛点：CSS FleXbox、CSS Grid、position:sticky、landscape-ratio和CSS transforms，但苹果和其WebKit团队并不包含在其中。
还有此前宣布将成立新的WebExtensions Community Group（WECG）组织，这些巨头也借此制订了一些共通的浏览器标准。
该组织的首要目标将是订出统一的浏览器延伸工具标准，让同一个浏览器扩展插件，可以一次适用Safari、Chrome、Edge及Firefox四大浏览器。
几大浏览器巨头将合作建立网页新标准3谷歌、微软、苹果和 Mozilla 基金会宣布共同努力提高浏览器的互操作性，以确保 Chrome、Edge、Safari 和 Firefox 提供同样可靠和一致的 Web 体验。
web.dev 上的一篇文章详细介绍了新的互操作性标准，称为 Interop 2022。该标准的最终目标是帮助解决开发“痛点”，让开发者专注于构建网络体验，而不是受困于解决浏览器中的各种不一致问题。
Interop 2022 是一个基准测试，专注于现代浏览器的 15 个不同领域。谷歌、微软、苹果、Mozilla、Bocoup 和 Igalia 达成合作，确保他们的浏览器在这些领域的行为保持一致，包括：
Cascade Layers（级联层）、Color Spaces and Functions（色彩空间 / 函数）、Dialog Element（对话框元素）、滚动条控件、表单控件等等。
了解到，这是浏览器四巨头的首次合作。2021 年，谷歌和微软合作推出了 Compat 2021 标准，今年终于扩大到了苹果和 Mozilla。
开发人员和用户可以在 Interop 2022 仪表板查看 Chrome、Edge、Safari 和 Firefox 的一致性进展，该页面显示了每个浏览器的兼容性分数。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲，弹性盒改进了块模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。许多设计师会发现弹性盒容易上手。弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中的顺序是独立的，通过使用弹性盒，定位子元素变得更加简单，复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素，而不是基于代码的声明和导航顺序。
"display: block" 生成一个块元素盒。
"display: flex" 的行为类似于块元件（ block element）和根据本flexbox模型布置出其含量。
更多：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Flexible_boxes
![[译] styled-components v3.1.0](/aiimages/%5B%E8%AF%91%5D+styled-components+v3.1.0.png)
