一、定宽/高 + 自适应
实现方案：
。position
。flex
1.position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>code</title>
<style type="text/css">
html,body,.parent{margin: 0;height: 100%;overflow: hidden;}//overflow: hidden;无滚动条
body{color: white;}
.top{position: absolute;top: 0;left: 0;right: 0;height: 100px;background: blue;}//没有relative，top相对于body定位；若给parent加一个position:relative;则top相对于parent定位
.left{position: absolute;left: 0;top: 100px;bottom: 50px;width: 200px;background: red;}
.right{position: absolute;left: 200px;top: 100px;right: 0;bottom: 50px;background: pink;overflow: auto;}
.right .inner{min-height: 1000px;}//设置很高，结合overflow: auto;出现滚动条
.bottom{position: absolute;left: 0;right: 0;bottom: 0;height: 50px;background: black;}
</style>
</head>
<body>
<div class="parent">
<div class="top">top</div>
<div class="left">left</div>
<div class="right"><div class="inner">right</div></div>
<div class="bottom">bottom</div>
</div>
</body>
</html>```
IE6不兼容
###2.flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>code</title>
<style type="text/css">
html,body,.parent{margin: 0;height: 100%;overflow: hidden;}
body{color: white;}
.parent{display: flex;flex-direction: column;}//display: flex;则parent是整个flex的容器
.top{height: 100px;background: blue;}
.bottom{height: 50px;background: black;}
.middle{flex:1;display: flex;}//flex:1;则middle占据top和bottom的剩余空间；②display: flex;让middle成为中间flex布局的容器
.left{width: 200px;background: red;}
.right{flex: 1;overflow: auto;background: pink;}//right占据middle除left外剩余空间
.right .inner{min-height: 1000px;}//加上right的overflow: auto;则滚动scroll
</style>
</head>
<body>
<div class="parent">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div>
<div class="right">
<div class="inner">right</div>
</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>```
二、百分比作为布局方式
三、自适应
flex
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex自适应</title>
<style>
html,body,.parent{margin: 0;height: 100%;overflow: hidden;}
body{color: white;}
.parent{display: flex;flex-direction: column;}
.top{background: blue;}
.bottom{background: black;}
.middle{flex: 1;display: flex;}
.left{background: red;}
.right{flex: 1;overflow: auto;background: pink;}
.right .inner{min-height: 1000px;}
</style>
</head>
<body>
<div class="parent">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div>
<div class="right">
<div class="inner">right</div>
</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>```
##四、总结
##讨论：实现一个弹窗
>已知HTML结构和效果图如下：
<div class="a">
<div class="b">Hello World</div>
</div>
假设以上父元素称为A，子元素称为B
请写出CSS以实现以下弹窗需求：弹窗（B）固定在浏览器窗口中间，弹窗背景色为白色，弹窗宽高由其内容决定，弹窗四周为黑色半透明（0.5透明度）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现一个弹窗</title>
<style>
*{margin: 0;padding: 0;}
html,body{height: 100%;}
.a{width: 100%;height: 100%;background-color: rgba(0,0,0,.5);}
.b{background-color: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
</style>
</head>
<body>
<div class="a">
<div class="b">Hello World,
Welcome to the new world!</div>
</div>
</body>
</html>```
Q1: Markdown 中引用块语法？
A: >即可。
