我把干货都放在了代码里,说明全在注释上,希望可以帮到有需要的人。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
width: 100%;
height:100%;
}
/*理解-webkit-box-flex的用法*/
.parent1{
/*首先定义父元素display:-webkit-box; 这个属性必须给父元素,所有的属性都是用来控制子元素的*/
display: -webkit-box;
-webkit-box-pack: center; /*让元素水平居中,还有其他属性,官方文档有解释*/
-webkit-box-align: center; /*让元素垂直居中,包含其他属性,官方文档有解释*/
margin: 0 auto;
width: 100%;
height: 100%;
}
.child1{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: red;
-webkit-box-flex:1;
/*box-flex里面可以添加任意数字包括小数,可以让整个子元素针对父元素的宽度按百分比例进行划分*/
}
.child2{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-c