Display of CSS 3: Box Type Details

Display of CSS 3: Box Type Details

In CSS, the display attribute is used to define the type of the box. In general, there are two types of boxes: inline and block. For example, div is block by default, and span is Inline by default. You can use display to modify the default display mode.

     
     Block and inline elements    Div element 1 div element 2 span element 1 span element 2

The default div and span representations: http://jsfiddle.net/Web_Code/pt0j3b6n/embedded/result/

Use dispaly to add the following rules to the div and span styles described above:

// Add display: inline to div; // Add display: block to span;

Effect: http://jsfiddle.net/Web_Code/pt0j3b6n/1/embedded/result/

Are there only two display values? That's wrong. Different values of display show different box types.

1. inline-block type: It belongs to the block box type, but it has the inline Box Type Characteristics During display. The default alignment mode is bottom align, which can be changed with vertical-align.

Use inline-block to create a horizontal menu

    
 
 
        
  
  
Menu 1
        
  
  
Menu 2
        
  
  
Menu 3
        
  
  
Menu 4
    
 
 

Effect: http://jsfiddle.net/Web_Code/pt0j3b6n/2/embedded/result/

PS: there is a difference between inline-block and inline. The former is still a block, so it has a high-width attribute, while the latter does not.

2. inline-table Type: It is a table-related type, which is supported by IE 8 + and other primary keys browsers. For more table-related types, see the following document.

First, let's look at an example of inline-table not used.

Forgetting ~ Simple thinking
 
 
    
  
  
 
   
 
    
A
 
    
B
 
    
C
 
    
D
 
   
 
   
 
    
E
 
    
F
 
    
G
 
    
H
 
   
 
   
 
    
I
 
    
J
 
    
K
 
    
L
 
   
 
  
 
 
Hi!

The effect is like this: http://jsfiddle.net/Web_Code/pt0j3b6n/3/embedded/result/

If you want to make a Text wrap table effect, you can use inline-table to modify the table style.

table{display:inline-table;border:solid 3px #00ffaa;}

Text surround effect is coming out: http://jsfiddle.net/Web_Code/pt0j3b6n/4/embedded/result/

Summary of table-related types

Element	Type	Description
Table	Table	This element is displayed as a block-level table with a line break before and after the table.
Tabel	Inline-table	This element is displayed as an inline table with a line break before and after the table.
Tr	Table-row	This element is displayed as a table row.
Td	Table-cell	This element is displayed as a table cell.
Th	Table-cell	This element is displayed as a table cell.
Tbody	Table-row-group	This element is displayed as a group of one or more rows.
Thead	Table-header-group	This element is displayed as a group of one or more rows.
Tfoot	Table-footer-group	This element is displayed as a group of one or more rows.
Col	Table-column	This element is displayed as a cell column.
Colgroup	Table-column-group	This element is displayed as a group of one or more columns.
Caption	Table-caption	This element is displayed as a table title.

3. list-item type: This type can display multiple elements as a list and add the list tag at the beginning of the element.

Set all div in the example to list-item type, and use list-style-type to specify the tag as a hollow circle.

    div1    div2    div3    div4

Effect: http://jsfiddle.net/Web_Code/pt0j3b6n/5/embedded/result/ 4. run-in and compact types: When an element is specified as the run-in or compact type, if the element is followed by a block element, the element of the run-in type will be included in the block element, the compact type is placed on the left of the block element. These two attributes are not widely used. A demo about run-in: http://www.zhangxinxu.com/study/201203/css-run-in.html

5. none type: After the value of display is set to none, the modified element is not displayed. PS: Unlike visibility: hidden, the display: none element does not occupy the original space, while visibility still occupies the original space.

First: http://www.ido321.com/1300.html

Next article: CSS: seven units you may not know