Display of CSS 3: Detailed explanation of box type_html/css_WEB-ITnose

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.

    <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>    <div>div元素1</div>    <div>div元素2</div>    <span>span元素1</span>    <span>span元素2</span>

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

<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>    

• 菜单1
• 菜单2
• 菜单3
• 菜单4

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

<style type="text/css">table{border:solid 2px #00aaff;}td{border:solid 2px #ccff00;padding:5px;}</style>淡忘~浅思

A	B	C	D
E	F	G	H
I	J	K	L

你好

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

<style type="text/css">div{    display:list-item;    list-style-type:circle;    margin-left:20px;}</style>    <div>div1</div>    <div>div2</div>    <div>div3</div>    <div>div4</div>

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