css盒子模型之宽度和高度

盒子模型的宽度width高度height;宽度和高度的单位px像素,使用%动态计算(自适应和响应式)

HTML代码

<div class="pag1"></div>
<div class="pag2"></div>
<div class="pag3"></div>
<div class="pag4"></div>
<div class="pag5"></div>
<div class="pag6"></div>
<div class="pag7"></div>
<div class="pag8"></div>
<div class="pag9"></div>

CSS样式

*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;}
div{width: 33.33%;height: 33.33%;float: left;}
.pag1{background-color: antiquewhite}
.pag2{background-color: aqua}
.pag3{background-color: aquamarine}
.pag4{background-color: darkred}
.pag5{background-color: saddlebrown}
.pag6{background-color: #FAEBD7}
.pag7{background-color: azure}
.pag8{background-color: greenyellow}
.pag9{background-color: blueviolet}

e.g补充:盒子模型自适应和响应式参考自然堂,Mobike

转载请注明：大灰牛博客 » css盒子模型之宽度和高度