《CSS网站布局实录》学习笔记（五）
第五章 CSS内容排版
5.1 文字排版
5.1.1 通栏排版
进行网页通栏排版时，只要直接将段落文字放置于p或者其他对象中，再对段落文字应用间距、行距、字号等样式控制，便形成了排版雏形。
5.1.2 分栏排版
CSS2技术对普通段落文字不能够直接实现分栏排版，如果需要实现类似报纸那样的双栏或者三栏排版，则必须借助于二列布局那样的两个div浮动定位而形成二列控件，然后再将文字分别填充此二列之中。XHTML代码如下：
1 <div id="layout"> 2 <div class="col">...</div> 3 <div class="col">...</div> 4 </div>
对于二列式排版，在包含容器#layout中放置了两个div。CSS代码如下：
1 [css] 2 3 p { 4 line-height: 180px; 5 font-size: 12px; 6 } 7 8 #layout { 9 width: 700px; 10 margin: 0px auto; 11 } 12 13 .col { 14 width: 300px; 15 padding: 0 10px; 16 float: left; 17 }
直接对用于分栏的.col编写宽度、内边距，向左浮动，从而实现了二栏式排版要求，这与二列式布局的原理是一致的。
使用CSS2分栏排版并非很好的解决，将文字分成两段放置在两个div中，并不能很好地保证以后的扩展性。对于段落CSS3已经提供了分栏属性column-count和column-width。
5.2 图文混合排版
传统的表格式布局中，往往通过插入一个表格，再在表格中插入图片，并对表格应用align属性来控制图片居中、居左或居右显示。而在CSS布局中，会有更多的实现效果。
5.2.1 图片基础控制
text-align属性用于控制对象里的内容居中显示，应用这个属性后，img对象在div中也能保持居中状态。在实际应用中，有时会使文字绕图片排版，这时就可以使用浮动定位的方法，通过设定对象的float属性来使文字内容流入对象的旁边。
5.2.2 不规则文字环绕
一种特殊的文字环绕排版方式，即希望文字能够沿着图片不规则边缘进行环绕。但是div和img都是以方块形式被插入到页面中，而且浏览器也没有办法识别图片的边缘，这时就需要使用一些技巧性的手段。
因为图片本身是方块状的，排版无法改变其状态，所以单独插入图片在段落中是行不通的，只有将图片以背景形式放置在文本中。背景与文本是二层挂你想，使用div对象来创建接近不规则的性质，需要插入一些div在段落之前。 XHTML代码如下：
1 <div id="layout"> 2 <h1>CSS FAQ</h1> 3 <div id="11"></div> 4 <div id="12"></div> 5 <div id="13"></div> 6 <div id="14"></div> 7 <div id="15"></div> 8 <div id="16"></div> 9 <div id="17"></div> 10 <div id="18"></div> 11 <div id="19"></div> 12 <p>...</p> 13 </div>
这里插入了9个div对象，并且保持其内容为空的状态，希望9个div方块各自拥有自己的宽高，最终形成一个类似于不规则的边缘效果。CSS代码如下：
1 [css] 2 3 #11, #12, #13, #14, #15, #16, #17, #18, #19 { 4 float: left; 5 clear: left; 6 } 7 8 #11 { width: 0px; height: 20px; } 9 #12 { width: 100px; height: 38px; } 10 #13 { width: 150px; height: 20px; } 11 #14 { width: 220px; height: 38px; } 12 #15 { width: 240px; height: 38px; } 13 #16 { width: 240px; height: 38px; } 14 #17 { width: 190px; height: 38px; } 15 #18 { width: 150px; height: 40px; } 16 #19 { width: 120px; height: 20px; }
首先9个方块都采用了float: left;进行排列，同时每个方块又采用clear: left;，使其左边不允许出现浮动对象，这样每个div之间都不会互相浮动。由于文本没有clear属性，所以就贴近所有div的右边。
5.3 全图排版
使用CSS布局进行全图排版的核心在于，对浮动定位的控制，而且具有很好的灵活性，可以通过CSS随时改变全图排版的样式。XHTML代码如下：
1 <div id="layout"> 2 <div> 3 <img src="sun.jpg" width="100" height="69" /> 4 <h2>Title: Sun</h2> 5 <h3>Date: 2014-4-29</h3> 6 <div> 7 <div> 8 <img src="wind.jpg" width="100" height="69" /> 9 <h2>Title: Wind</h2> 10 <h3>Date: 2014-4-29</h3> 11 <div> 12 <div> 13 <img src="cloud.jpg" width="100" height="69" /> 14 <h2>Title: Cloud</h2> 15 <h3>Date: 2014-4-29</h3> 16 <div> 17 <div> 18 <img src="rain.jpg" width="100" height="69" /> 19 <h2>Title: Rain</h2> 20 <h3>Date: 2014-4-29</h3> 21 <div>
在上述代码中，以#layout作为主容器，并使用div来放置图片。使用div的目的在于。方便控制图片的宽度。除了添加图片还可以添加一些其他信息，如图片名称与拍摄时间等。CSS代码如下：
1 [css] 2 3 #layout div { 4 border: 1px solid #aaa; 5 margin: 3px; 6 padding: 2px; 7 width: 126px; 8 height: 126px; 9 text-align: center; 10 float: left; 11 overflow: hidden; 12 } 13 14 h2, h3 { 15 font-size: 11px; 16 font-family: arial; 17 margin: 0px; 18 padding: 0px; 19 } 20 21 h3 { 22 font-weight: normal; 23 color: #777; 24 }
在上述CSS代码中，给每个#layout下的div图片区域加上了1px的边框线，并且全部采用float: left;让图片可以顺序排列，设置外边距可以控制与其他图像的间距效果；设置div的宽度和高度，使其排列变得整齐有序；设置padding内边距使得图片与边缘有一定的空间；为了保证因文本过长而导致div被拉高的问题发生，可以设置overflow: hidden;来访问内容扩大的对象；最后在设置文字的样式。
5.4 表格排版
5.4.1 充分使用表格标签
在传统的表格式布局设计中，往往使用的是表格的3个标签table、tr和td。XHTML还提供了许多表格专用标签，前一章已讲述，这里就不再说明了。
5.4.2 表格样式控制
表格的样式与其他对象的样式没什么区别。还是使用margin、padding、border、background等属性来对表格进行操作。
5.4.3 表单表格设计
由于表单中的排版也是通过表格来实现的，因此可以简单地通过表格的样式设计来完成表单设计。