Home >Web Front-end >HTML Tutorial >Display of CSS 3: Detailed explanation of box type_html/css_WEB-ITnose
Display of CSS 3: Detailed explanation of box type_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:49958browse
In CSS, use the display attribute to define the type of box. Generally speaking, box types are divided into two categories: inline and block. For example, div defaults to block and span defaults to Inline. The default presentation mode can be modified through display.
<!DOCTYPR><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>block and inline elements</title> <style type="text/css"> div { background:#aaff00; } span { background:#ffaa00; } </style></head><body> <div>div元素1</div> <div>div元素2</div> <span>span元素1</span> <span>span元素2</span></body></html> Default div and span representation: http://jsfiddle.net/Web_Code/pt0j3b6n/embedded/result/
Use dispaly to modify, respectively Add the following rules to the above div and span styles:
//div中添加display:inline;//span中添加display:block;
The effect is as shown: http://jsfiddle.net/Web_Code/pt0j3b6n/1/embedded/result/
Are these two the only values for display? That would be wrong. Different values of display show different box types.
1. Inline-block type : It belongs to the block box type, but has the characteristics of inline box type when displayed. The default alignment for side-by-side display is bottom alignment, which can be modified with vertical-align.
Use inline-block to create a horizontal menu
<html><head><style type="text/css">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="http://www.ido321.com" target="_blank">菜单1</a></li> <li><a href="http://www.ido321.com" target="_blank">菜单2</a></li> <li><a href="http://www.ido321.com" target="_blank">菜单3</a></li> <li><a href="http://www.ido321.com" target="_blank">菜单4</a></li> </ul></body></html> Effect: http://jsfiddle.net/Web_Code/pt0j3b6n/2/embedded/result/
PS: There is a difference between inline-block and inline. The former still belongs to block, so it has height and width attributes, while the latter does not.
2. Inline-table type : It is a table-related type, supported by IE 8 and other main browsers. See below for more table-related types.
First, look at an example that does not use inline-table
<html><head><style type="text/css">table{border:solid 2px #00aaff;}td{border:solid 2px #ccff00;padding:5px;}</style></head><body>淡忘~浅思<table> <tr> <td>A</td><td>B</td><td>C</td><td>D</td> </tr> <tr> <td>E</td><td>F</td><td>G</td><td>H</td> </tr> <tr> <td>I</td><td>J</td><td>K</td><td>L</td> </tr></table>你好</body></html> The effect is like this: http://jsfiddle.net/Web_Code/pt0j3b6n/3 /embedded/result/
If you want to create the effect of text wrapping around a table, you can use inline-table and modify the table style
table{display:inline-table;border:solid 3px #00ffaa;} Text wrapping The effect comes out: http://jsfiddle.net/Web_Code/pt0j3b6n/4/embedded/result/
Summary of table related types
| 元素 | 所属类型 | 说明 |
| table | table | 此元素会作为块级表格来显示，表格前后带有换行符。 |
| tabel | 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 | 此元素会作为一个表格标题显示 |
3. list-item Type : This type can display multiple elements as a list, and add a list tag at the beginning of the element
Set all divs in the example to the list-item type, use list-style -type specifies the mark as a hollow circle
<html><head><style type="text/css">div{ display:list-item; list-style-type:circle; margin-left:20px;}</style></head><body> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div></body></html>
Effect: http://jsfiddle.net/Web_Code/pt0j3b6n/5/embedded/result/
4. Run-in type and compact type : When the element is specified as run-in or compact type, if there is a block type element after the element, Run-in type elements will be included inside block type elements, while compact type elements are placed to the left of
block elements. These two attributes have not gained popularity. A demo about run-in: http://www.zhangxinxu.com/study/201203/css-run-in.html
5. none type : change the display value When specified as none, the element will not be displayed. PS: Unlike visibility:hidden, the element with display:none will not occupy the original space, but visibility will still occupy the original space.
Original article first published: http://www.ido321.com/1300.html