<!DOCTYPE html><html><head><style>
.flex-container { display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;} .flex-item { background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;}
</style></head><body> <div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div> </body></html>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
appearance允许您使一个元素的外观像一个标准的用户界面元素3box-sizing允许你以适应区域而用某种方式定义某些元素3icon为创作者提供了将元素设置为图标等价物的能力。3nav-down指定在何处使用箭头向下导航键时进行导航3nav-index指定一个元素的Tab的顺序3nav-left指定在何处使用左侧的箭头导航键进行导航3nav-right指定在何处使用右侧的箭头导航键进行导航3nav-up指定在何处使用箭头向上导航键时进行导航3outline-offset外轮廓修饰并绘制超出边框的边缘3resize指定一个元素是否是由用户调整大小3
