html盒子宽高 css盒子模型之宽度和高度

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

HTML代码

*lt;div class="pag1">*lt;/div>

*lt;div class="pag2">*lt;/div>

*lt;div class="pag3">*lt;/div>

*lt;div class="pag4">*lt;/div>

*lt;div class="pag5">*lt;/div>

*lt;div class="pag6">*lt;/div>

*lt;div class="pag7">*lt;/div>

*lt;div class="pag8">*lt;/div>

*lt;div class="pag9">*lt;/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