@ Winter Winter the Great God's CSS job problem

Block-level elements

① always start on a new line;
② height, row height, margin and inner margin can be controlled;
The ③ width defaults to 100% of its container unless a width is set.
④ it can accommodate inline elements and other block elements

Inline-level elements

① and other elements are on one line;
The ② is high, the row height and the margin and the inner margin cannot be changed;
The width of the ③ is the width of its text or picture, and cannot be changed.
④ inline elements can only hold text or other inline elements

Replace element

A replacement element is a browser that displays specific content based on the elements and attributes of its tag.

For example: <input/> type= "Text" is, this is a text input box, another time, the browser display is not the same

X , <input>, <textarea>, <select>, <object> in HTML are all replacement elements, none of which have actual content.

Non-replacement elements

X Most elements of HTML are non-replaceable elements that they tell the browser directly and display.

such as <p>wanmei.com</p>

The browser will display the content directly.

Block container

I didn't find the information.

Include Block

root element
By default, the HTML element is the containing block, and some browsers set the body as the containing block.

The non-root element is divided into two situations:

1, for non-root elements not set position:absolute such as Position:relative position:static
In this case, the containing block is set to the edge of the most recent block-level element content area, and note is the edge of the content area, not the margin and padding edge.

2, the use of position:absolute absolute positioning elements,
In this case, the containing block settings in the nearest postion are not static ancestor elements (here the ancestor elements can be block-level elements, but also inline elements)
A, if the ancestor element is a block-level element, the containing block is set to the padding edge of the block-level element
Along
b, if the ancestor element is an inline element, contains the content edge of the block set to that inline element

Positioning :
Relative to is the initial position in the document flow relative to the element.
"Absolute" is relative to the nearest positioned ancestor element.

Absolute positioning overrides other elements on the page, and the stacking order can be controlled by the Z-index property.

relative positioning in a flow layout:
The flow layout is the default layout, natural from left to right, top to bottom.
If the element is position:relative and coordinates are set, the element is offset in the original position as the coordinate

Block-level context

http://lllt.iteye.com/blog/1440532 Here are demo examples

Block formatting context is a concept in the CSS 2.1 specification that determines how elements are positioned on their content, as well as their relationships and interactions with other elements.

In the element that created the Block formatting Context, its child elements are placed one after the other. Their starting point in the vertical direction is the top of a containing block, and the vertical distance between the two adjacent elements depends on the ' margin ' attribute. The vertical margins of adjacent block-level elements in the block formatting Context are collapsed (collapse).

The above is a related concept and a little explanation about BFC, quoted by: W3help

The use of BFC:

A non-BFC element that ignores the height value of the child element for which float is added, and the top bottom margin is collapsed with the margins of the child elements, and the outer float element affects itself and the layout of its child elements.

Triggering BFC is an effective way to solve these three problems. This is why Overflow:hidden can be used to clear floating problems.

Conditions for triggering BFC:

1. The value of "float" is not "none"
2. The value of "overflow" is not "visible"
3. The value of "display" is "Table-cell"
4. "Table-caption", or "Inline-block"
5. The value of "position" is neither "static" nor "relative"

The above is the general answer on the network, but does not give the characteristics of the relevant elements after the specific triggering, and how to use

In-line context

http://www.w3help.org/zh-cn/kb/010/

Row box (line boxes)

Relative to the block formatting context, the box (boxes) is arranged horizontally, one by one, and the beginning is the top of the containing block, in the context of the inline formatting. The Margin,border and padding in the horizontal direction are preserved between the boxes. Boxes can be aligned in a vertical direction in different ways: their top or bottom alignment, or the baseline of the text in which they are aligned. A rectangular area containing those boxes, which forms a row, called a line box.

Example code:

<p style= "Background-color:silver; font-size:30px; " >text1<span style= "border:3px solid blue;" >text in Span</span>great1<em style= "border:3px solid red;" >thx a lot</em>bee<strong style= "border:3px solid green;" >give Me 5!</strong>aloha!</p>

In the above code, there are no line breaks and spaces, forming a total of 7 inline boxes.

：

The width of the row box is determined by its containing block 1 and the floating element therein. The determination of height is determined by the row height calculation rule.

Discussion on the problem of whitespace caused by line wrapping in HTML

For HTML built-in inline-level labels and form element labels, line breaks in the source code in several consecutive inline-level labels are interpreted as a space in the browser.
Includes IE and ff. This space is treated as a blank node (NodeType equals 3 nodes, which is the text node).
Display:inline is used for block-level tags built into HTML;
For line breaks between HTML built-in block-level tags, FF is treated as a blank node (which can be obtained with JS), and IE ignores this line break.
This line break has no effect on the IE and FF pages, and there are no spaces.