Xpress front-end record --------- HTML5 + CSS Series 5.0

Element Type

A, XHTML elements classified
according to two types of classification css display, XHTML elements are divided into: massive elements, inline elements

1. massive element (block element) 

1) the element is displayed in the form of massive blocks on the page, the term block is displayed as a rectangular area elements

Under 2) by default, will occupy the bulk element row layman's terms, two adjacent elements do not block the phenomenon of tile; by default, will block elements are arranged in order from top to bottom.

3) a bulk element can define their own width and height. 

4) as a block element container ships are other elements, it can accommodate other inline elements and other block elements. We can call this a metaphor for the container box.

 

2. inline elements (inline element) (or inline elements)

1) forms inline element is always within the line by one display;

 

 

2) inline elements without their shape, can not define its width and height, its display width, height can be determined according to the height and width comprising content, which means a minimum content presentation will be a rectangular shape;

3) Inline elements will follow the basic rules of the box model, can be defined as padding, border, margin and other properties, but individual properties can not be displayed correctly; (padding-top:; margin-top / bottom :;) 

Conventional inline elements

a - b - bold (not recommended)                            

i - italic em - inclined                  

span - used within an associated container, the text block is defined

strong - highlighted in bold

sub - subscript sup - underline superscript u

 

3, the variable element

The context is determined that the element is a block element or inline elements.

 For example:  the Button - Button del - delete text

4, the element type of conversion

Box model can be changed by the default display type display attribute

1) display attributes and attribute values ​​(attribute values ​​18)

属性值:block/inline/inline-block/none/list-item/table-header-group/table-footer-group....

Action: the type of the search target attribute is set or cartridge element to be generated model (to change the current element type)

Description: the role of each attribute value

1) Block display block: Similar add line breaks after the element, that other elements not displayed at its rear side by side.

2) inline displayed inline: Inline elements on one line can be displayed side by side.

3) When the float element attribute set, it is equivalent to the added element display: inline-block; attribute;

4) the block elements Inline-block line displays: the linking element within the display element, but the content elements to display block, the inline objects before and displayed in the same row. (This is the only element type supports vertical-align property) img input select

5) none elements and that the region is not displayed.

6) list-item: converting an element to a list. li default type

 

1, most of the block elements display the attribute value default Block, where li is the default list-item.

2, the majority of display attribute value default inline elements inline, wherein img, input, default inline-block.

 

An element disposed in a horizontal and vertical center container,

You must change the default display attribute value inline-block; and a peer element, and (ruler) (sibling elements [ruler] style to vertical-align: middle; width: 0; height: 100%; display: inline- block;). 

Three conditions: 

1: must be added to the container (parent element) text-align: center;

2: the current element to be transferred in a row within the block elements (display: inline-block;) to give the current element plus vertical-align: middle;

3: (no carriage return) after the current element and a peer element span; and span for vertical-align: middle; width: 0; height: 100%; display: inline-block

 

Guess you like

Origin www.cnblogs.com/hudunyu/p/11427447.html