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 的一致性进展，该页面显示了每个浏览器的兼容性分数。
1、通过verticle-align:middle实现CSS垂直居中。
通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。
2、通过display:flex实现CSS垂直居中。
随着越来越多浏览器兼容CSS中的flexbox特性，所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。
通过display:flex实现CSS垂直居中的方法是给父元素display:flex而子元素align-self:center
这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。
3、通过伪元素:before实现CSS垂直居中。
具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。
4、通过display:table-cell实现CSS垂直居中。
给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中。
5、通过隐藏节点实现CSS垂直居中。
创建一个隐藏节点#hide，使得隐藏节点的height值为剩余高度的一半即可。
这种方法也适用于CSS水平居中，原理一样。
6、已知父元素高度通过transform实现CSS垂直居中。
给子元素的position:relative，再通过translateY即可定位到垂直居中的位置。
7、到垂直居中的位置。
8、通过line-height实现CSS垂直居中。
设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。
