CSS3学习系列之盒样式（一）
- 盒的基本类型
在css中，使用display属性来定义盒的类型，总体上来说，css中的盒分为block类型与inline类型
- inline-block类型
inline-block类型是在css2.1中追加的一个盒类型，属于block类型的一种，但是显示时它具有inline类型盒的特点，例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>inline-block类型div元素的示例</title> <style> div.inlineblock{ display:inline-block; background-color: #00aaff; width: 300px; } div.inline{ display: inline; background-color: #00ff00; width: 300px; } </style> </head> <body> <div> <div class="inlineblock">inline-block类型</div> <div class="inlineblock">inline-block类型</div> </div> <div> <div class="inline">inline类型</div> <div class="inline">inline类型</div> </div> </body> </html>
- 使用inline-block类型来执行行分列显示
在css2.1之前，如果需要在一行中并列显示多个block类型的元素，则需要使用float属性或position属性，但这样会使样式变得比较复杂，因此在css2.1中，追加了inline-block类型。例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>将div元素并列显示示例</title> <style> div#a, div#b { display: inline-block; width: 200px; } div#a { background-color: #0088ff; } div#b { background-color: #00ccff; } div#c { width: 400px; background-color: #ffff00; } </style> </head> <body> <div id="a">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div> <div id="b">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div> <div id="c">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div> </body> </html>
- 使用inline-block来先水平菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用inline-block类型实现水平菜单的示例</title> <style> ul { margin: 0; padding: 0; } li { display: inline-block; width: 100px; padding: 10px 0; background-color: #00ccff; border: solid 1px #666666; text-align: center; } a { color: #000000; text-decoration: none; } </style> </head> <body> <ul> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> <li><a href="#">菜单4</a></li> </ul> </body> </html>
- inline-table类型
table元素属于block类型，所以不能与其他文字处于同一行中，但是如果将table元素修改成inline-table类型，就可以让表格与其他文字处于同一行中了。
- list-item类型
如果在display属性中将元素的类型设定为list-item类型，可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记。例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>list-item类型使用示例</title> <style> div { display: list-item; list-style-type: circle; margin-left: 30px; } </style> </head> <body> <ul> <div>示例div1</div> <div>示例div2</div> <div>示例div3</div> <div>示例div4</div> </ul> </body> </html>
- run-in类型与compact类型
将元素指定为run-in类型或compact类型的时候，如果元素后面还有block类型的元素，run-in类型的元素将被包含在block类型的元素内部，而compact类型的元素将被放置在block类型的元素左边。谷歌还不支持例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>run-in类型与compact类型使用示例</title> <style> dl#runin dt{ display: run-in; border: solid 2px red; } dl#compact dt{ display: compact; border: solid 2px red; } dd{ margin-left: 100px; background-color: yellow; } </style> </head> <body> <ul> <dl id="runin"> <dt>名词一</dt> <dd>关于"名词一"的名词解释</dd> </dl> <dl id="compact"> <dt>名词二</dt> <dd>关于名词二的解释</dd> </dl> </ul> </body> </html>
- 表格相关的类型
CSS3中所有表格相关的元素对应的display的类型值：
|
元素 |
所属类型 |
说明 |
|
table |
table |
代表整个表格 |
|
table |
Inline-table |
代表整个表格，可以被指定为table类型或inline-table类型 |
|
tr |
table-row |
代表表格中的一行 |
|
td |
table-cell |
代表表格中的单元格 |
|
th |
table-cell |
代表表格中的列标题 |
|
tbody |
table-row-group |
代表表格中所有行 |
|
thead |
table-header-group |
代表表格中的表头部分 |
|
tfoot |
table-footer-group |
代表表格中的脚注部分 |
|
col |
table-column |
代表表格中的一列 |
|
colgroup |
table-column-group |
代表表格中所有列 |
|
caption |
table-caption |
代表整个表格的标题 |
完整例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css 3中完整表格的构成示例</title> <style> .table { display: table; border: solid 3px #00aaff; } .caption { display: table-caption; text-align: center; } .tr{ display: table-row; } .td{ display: table-cell; border:solid 2px #aaff00; } .thead{ display: table-header-group; background-color: #ffffaa; } </style> </head> <body> <div class="table"> <div class="caption">字母表</div> <div class="thead"> <div class="td">1st</div> <div class="td">2nd</div> <div class="td">3rd</div> <div class="td">4th</div> <div class="td">5th</div> </div> <div class="tr"> <div class="td">A</div> <div class="td">B</div> <div class="td">C</div> <div class="td">D</div> <div class="td">E</div> </div> <div class="tr"> <div class="td">F</div> <div class="td">G</div> <div class="td">H</div> <div class="td">I</div> <div class="td">J</div> </div> </div> </body> </html>
