CSS基础知识－盒模型/定位/浮动-优快云博客

本文详细介绍了CSS中的盒模型(BoxModel)概念，包括内容、填充、边框和空白边等组成部分，并探讨了定位(position)机制，如相对定位(relative)、绝对定位(absolute)及浮动(float)的具体应用。

1. Box Model (盒模型)

Box Model 是CSS的指定元素如何显示和交互，是CSS的基石之一。

页面上的每个元素被看成是一个矩形框，它由内容，填充(padding)，边框(border)，空白边(margin)组成。

他们之间的关系如下：

[ margin [ border [ padding [ content ] ] ] ]

margin, border, padding 都是可选的，他们的默认值为0。

2. position(定位)

a) 相对定位(relative)

相对于原位置进行移动。

eg:

#box1 {

position: relative;

left: 10px;

top: 10px;

}

原位置向下并向左各移动10px。

b) 绝对定位(absolute)

c) 浮动(float)

元素向左或向右浮动，直到碰到其他元素为止。

下面给出一个简单的新闻网页中常见的例子以供读者理解：

1 <html> 2 <head> 3 <title>Enclosing Floats</title> 4 5 <style type="text/css"> 6 7 .news { 8 background-color:#eaeaea; 9 border: solid 1px #999;10 width: 500px;11 }12 13 .news img {14 float: left;15 padding: 10px 0 10px 10px;16 width: 150px;17 height: 180px;18 }19 20 .news p {21 float: right;22 width: 300px;23 margin: 0;24 padding: 10px 10px 10px 0;25 }26 27 </style>28 29 </head>30 31 <body>32 33 <div class="news">34 <img src="news.jpg"/>35 <p>36 人民图片网6月19日报道当日9时30分，黄河小浪底大坝2个排沙洞同时开启， 37 放水量达到每秒2600立方米，形成壮丽的巨瀑景观， 38 黄河第九次调水调沙正式开始。此后小浪底水库及其下游16公里处的西霞院水库下泄流量逐日增大， 39 6月23日控制黄河花园口流量约3800立方/秒下泄。 40 </p>41 </div>42 43 </body>44 </html>

效果如下：