盒子模型的宽度width高度height;宽度和高度的单位px像素,使用%动态计算(自适应和响应式)
1 <div class="pag1"></div> 2 <div class="pag2"></div> 3 <div class="pag3"></div> 4 <div class="pag4"></div> 5 <div class="pag5"></div> 6 <div class="pag6"></div> 7 <div class="pag7"></div> 8 <div class="pag8"></div> 9 <div class="pag9"></div>
1 *{margin: 0;padding: 0;} 2 html,body{width: 100%;height: 100%;} 3 div{width: 33.33%;height: 33.33%;float: left;} 4 .pag1{background-color: antiquewhite} 5 .pag2{background-color: aqua} 6 .pag3{background-color: aquamarine} 7 .pag4{background-color: darkred} 8 .pag5{background-color: saddlebrown} 9 .pag6{background-color: #FAEBD7} 10 .pag7{background-color: azure} 11 .pag8{background-color: greenyellow} 12 .pag9{background-color: blueviolet}