盒子模型的实现

来自CloudWiki
Cloud17（讨论 | 贡献）2017年10月3日 (二) 09:21的版本
跳转至： 导航， 搜索

盒子的构成

  • 所以页面中使用最多的盒子是可以作为容器的层（div)
  • 层中可以放置段落、表格、浮动框架等任意其他页面元素，当然也可以放置其他的层。
  • 所谓的网页布局就是通过div+css来实现的，div管框架，css管属性。
  • 试一试：在W3C编辑器上粘贴以下代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
       <title>无标题文档</title>
    </head>
    <body>
       <div class="layer1">顶部</div>
       <div class="layer2">主体</div>    
       <div class="layer3">底部</div>
    </body>
 </html>
  • 因为代码还没有完成，你现在应该看不到任何效果。

盒子布局的实现

盒子的宽度

  1. 固定值，例如：width：700px；width:80%;
  2. auto，盒子的宽度由内部内容的宽度或者浏览器窗口宽度或者该盒子所在父元素的宽度来确定。
width：auto；

盒子的高度

  1. 固定值。盒子中内容的总高度确定，则可以将盒子的高度设置为一个固定值；例如height:300px;
  2. auto。若盒子中内容的总高度并不确定，则通常将盒子的高度设置为auto，此时，盒子的高度将根据其实际内容的多少来确定。

W2-17.png 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
       <title>无标题文档</title>
       <style type="text/css">
           .layer1{width:100%; height:100px;  background:blue;color:white;text-align:center;}
           .layer2{width:100%; height:300px;color:blue;text-align:center;text-align:center;}
           .layer3{width:100%; height:30px;  background:blue;color:white;text-align:center;}           
       </style>
    </head>
    <body>
       <div class="layer1"><h1>顶部</h1></div>
       <div class="layer2"><h2>主体<h2/></div>    
       <div class="layer3">底部</div>
    </body>
 </html>
  • 我们在定义完几个盒子之后，也自然地完成了他们在页面中的上下排列。
    • 层标记<div>…</div>，对于div的定义通常包含层的宽度width、高度height、填充、边距、边框和背景等等。


返回 网页设计与开发

取自“http://www.openbrains.net/mediawiki/index.php?title=盒子模型的实现&oldid=595”