标签：
14.1 使用边距
<?xml version = "1.0" encoding = "UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en"> <head> <title>Color Blocks</title> <style type = "text/css"> div { width: 250px; height: 100px; border: 5px solid #000000; color: black; font-weight: bold; text-align: center; } div#d1 { background-color: red; margin: 15px; } div#d2 { background-color: green; margin: 15px; } div#d3 { background-color: blue; } div#d4 { background-color: yellow; margin: 15px; } </style> </head> <body> <!-- 样式单边距(margin)使你能够在网页上的元素的矩形区域外部添加空隙,需要记住的是,margin属性处理的是元素外面的间距 --> <div id = "d1">DIV #1</div> <div id = "d2">DIV #2</div> <div id = "d3">DIV #3</div> <div id = "d4">DIV #4</div> </body> </html>
14.2 填充元素
<!-- 填充(padding)和边距类似,为元素添加额外的空间,但是这些空间所在的位置有很大不同 padding-top: 设置上填充 padding-right: 设置右填充 padding-bottom: 设置下填充 padding-left: 设置左填充 padding: 通过单个属性设置上,下,左,右填充 -->
14.3 保持对齐
14.4 理解Float属性
<?xml version = "1.0" encoding = "UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en"> <head> <title>Coloc Blocks</title> <style type = "text/css"> body { margin: 0px; } div { width: 250px; height: 100px; border: 5px solid #000000; color: black; font-weight: bold; margin: 25px; } div#d1 { background-color: red; float: left; } div#d2 { background-color: green; float: left; } div#d3 { background-color: blue; float: left; } </style> </head> <body> <div id = "d1">DIV #1</div> <div id = "d2">DIV #2</div> <div id = "d3">DIV #3</div> </body> </html>
14.5 总结
<!-- margin,padding,float -->
标签：
原文地址：http://www.cnblogs.com/revoid/p/5585631.html
