<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.div1 {
width: 300px;
height: 200px;
padding: 50px;
border: 1px solid blue;
box-sizing: content-box;
}
.div2 {
width: 300px;
height: 200px;
padding: 110px;
border: 1px solid red;
box-sizing: border-box;
}
.boss {
display: flex;
height: 200px;
}
.box1 {
flex: 2;
background-color: pink;
}
.box2 {
flex: 8;
background-color: orange;
}
.box3 {
flex: 2;
background-color: green;
}
.flex-container {
display: flex;
/* //flex-direction: row | row-reverse | column | column-reverse */
/* flex-direction: column-reverse; */
align-items: stretch;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
/* margin: 10px; */
}
.flex-item1 {
background-color: pink;
}
.flex-item2 {
background-color: orange;
}
.flex-item3 {
background-color: green;
}
</style>
</head>
<body style="height: 2000px;">
<!-- 1.标准盒子模型 box-sizing: content-box;-->
<!-- 1.IE盒子模型||怪异盒子模型 box-sizing: border-box;-->
<div class="div1"></div>
<div class="div2"></div>
<div class="boss">
<div class="box1">11111</div>
<div class="box2">22222</div>
<div class="box3">33333</div>
</div>
<div class="flex-container">
<div class="flex-item flex-item1">flex item 1</div>
<div class="flex-item flex-item2">flex item 2</div>
<div class="flex-item flex-item3">flex item 3</div>
</div>
<!-- flex 属性用于指定弹性子元素如何分配空间 -->
<!-- flex-direction 属性指定了弹性子元素在父容器中的位置
flex-direction: row | row-reverse | column | column-reverse
row横向从左到右排列（左对齐），默认的排列方式。
row-reverse 反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column 纵向排列
column-reverse 反转纵向排列，从后往前排，最后一项排在最上面。
-->
<!-- align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch
- flex-start：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
-
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
-
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
-->
<!-- 密钥 -->
<!-- localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。 -->
<!-- <div id="result"></div>
<div id="ids"></div> -->
<!-- sessionStorage.setItem(key, value) ：存储数据
sessionStorage.getItem(key) ：获取数据
sessionStorage.removeItem(key) ：删除数据
sessionStorage.clear() ：删除所有数据 -->
<!-- localStorage.setItem(key,value) ：存储数据
localStorage.getItem(key) ：获取数据
localStorage.removeItem(key) ：删除数据
localStorage.clear() ：清空数据 / 删除所有数据 -->
</body>
<script type="text/javascript">
// localStorage.sitename="计应2班";
// document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
// sessionStorage.age = "18";
// document.getElementById("ids").innerHTML="年龄：" + sessionStorage.age;
</script>
</html>