“盒子模型的实现”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（创建页面，内容为“== 盒子模型的实现 == === 组成盒子的元素=== *尽管段落p也是盒子，但是在其内部不能放置任何其他块级元素的内容。 *所以页…”）
 
第74行： 第74行：
 
}
 
}
 
</style></nowiki>
 
</style></nowiki>
 +
 +
返回 [[网页设计与开发]]

2017年10月2日 (一) 07:39的版本

盒子模型的实现

组成盒子的元素

  • 尽管段落p也是盒子，但是在其内部不能放置任何其他块级元素的内容。
  • 所以页面中使用最多的盒子是可以作为容器的层，尤其是整个网页的布局都是通过div+css来实现的。
  • 层中可以放置段落、表格、浮动框架等任意其他页面元素，当然也可以放置其他的层。
  • 层标记<div>…</div>，对于div的定义通常包含层的宽度width、高度height、填充、边距、边框和背景等等。

盒子的宽度

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

用盒子进行布局

  • 布局
    元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
  • 这个例子使用了四个 <div> 元素来创建多列布局：
<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright W3School.com.cn
</div>

</body>

 <style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>
返回 网页设计与开发
取自“http://www.openbrains.net/mediawiki/index.php?title=盒子模型的实现&oldid=571”