好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS基础学习十四:盒子模型补充之display属性设置_html/css_WEB-ITnose

我在 CSS基础学习十三:盒子模型的i博文只是阐释了CSS盒子模型,并没有过多的使用实例来演示。这篇博文

就来做一些盒子模型知识的补充。这一部分对于网页总体布局还是蛮重要的,过去大多数使用HTML中的table元素和

框架标签来进行网页的整体布局,现在我们使用最多的是DIV+CSS网页布局。所以一定要掌握好盒子模型,记住

content,border,padding和margin各自在盒子中的作用和使用方式。

先来看一个完整元素的盒子模型实例:

     CSS盒子模型演示  /*去掉浏览器缺省设置*/body {padding:0px;margin:0px;}/*设置盒子的宽度和高度以及边框*/div {border:#FF0000 solid 2px;width:300px;height:200px;}#div_1 {background-color:#00FF00;padding:20px 50px;}#div_2 {background-color:#0000FF;margin:20px;}#div_3 {background-color:#FF00FF;}   

第一个盒子

查看更多关于CSS基础学习十四:盒子模型补充之display属性设置_html/css_WEB-ITnose的详细内容...

  阅读:42次