Detailed tutorial on converting between inline and block-level elements-HTML Tutorial-php.cn

On January 5, 2015, I went to an Internet startup company in Beijing for an interview. I felt the atmosphere of young people working together there. The recruitment column said that they wanted to have several years of web front-end work experience. I relied on my little ability to go ahead without overestimating my abilities. As a result, the interviewer asked me many questions that I had been exposed to. However, unfortunately, I only had a general understanding of those knowledge points, but I knew very little about the actual application of these knowledge points. During the interview, I was embarrassed because I always felt like I was wasting people's time.

This question was when the interviewer asked me box model. Since I need to talk about the top, bottom, left and right margins, in order to explain it better, I gave an example of inline Elements and block-level elements, but people still ask "What methods can be used to convert inline elements and block-level elements?" What a shame! I only answered <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>, so I looked for relevant books, read the source codes of several websites, and then summarized it.

Block-level elements and inline elements

Block-level elements will expand to the same width as the element.
Inline elements "shrink wrap" their contents and wrap them as tightly as possible.
(The above two summaries are from the book "CSS Design Guide")

The default css style

The height of a block-level element is the height of its content, and its width will expand to the same width as the parent element. As a result, the block-level element will occupy its own line and cannot accommodate other block-level elements and inline elements behind it.
The height of an inline element is the height of its content, and its width will shrink and wrap its content. A strange point: There is a certain distance between inline elements. When viewing it using the console, this distance is not counted as a box model. If I use <a href="http://www.php.cn/wiki/931.html" target="_blank">margin</a>:0;padding:0 it will not clear this distance,? ? Please tell me!

css modification

Replacement element: Replacement element is the browser based on the element's tag and attribute, to determine the specific display content of the element. For example, the browser will read the picture information and display it based on the value of the src attribute. However, if you view the (X)HTML code, you will not be able to see the actual image. Content; Another example is that the type attribute of <input> determines whether to display an input box or a radio button, etc. Quoted from here
Non-replacement elements: such as p a span p these, that is Its content is displayed directly to the user (such as a browser).
So inline elements are divided into inline replacement elements img input, and inline non-replacement elements span a...For both There is a difference in css modification.
Inline non-replaced elements: their width and height settings are invalid. You can set the inner and outer margins and borders, but the vertical settings will not affect the document flow layout, so set the vertical inner and outer margins. Margins have no effect. Vertical borders are visible to us, but they do not occupy the document flow. Therefore, the above inline element sets a border with a width of 10px, which will not cause the lower element to move downward.
Inline replacement elements, in addition to the characteristics of juxtaposing inline elements, can set the inner and outer margins, width and height that affect the document flow layout. And setting the height is equivalent to setting the line height, which will be vertically centered
line-height Although inline non-replacement elements do not have width and height, they can use line -height to set the height, but the strange thing is that although the line height can affect the document flow layout of inline elements, its border will still wrap its content, ignoring the upper and lower white space caused by the line height.
margin The margin of inline elements, which will not be merged (replacement, non-replacement). Unlike block-level elements, top and bottom, left and right margins will be combined.
Block-level elements can set their height and width, and they can also set their borders, inner and outer margins, and the setting results affect the document flow layout effect.
Note that modifying width will not cause the inline elements below it to move upward.
Inline elements, can the height of inline elements be set? Of course not! This answer is of course too absolute.
Elements are divided into replacement elements and non-replacement elements. Almost all replaced elements are inline elements.

Conversion between inline elements and block-level elements

display:none; The element will not be displayed, nor will the document flow position originally occupied by the element be retained.
display:block;Convert to block-level elements.
display:inline;Convert to inline elements.
display:inline-block;Convert to inline block-level elements.
The above four are the ones I commonly use. In fact, there are many more

The conversion between the two types of element realization forms can be easily achieved through display:block; and display:inline; .
However, there are many times when we need to use display:inline-block; to convert inline elements or block-level elements. However, this element is a new attribute of css2. This attribute is not supported for versions below IE7, so some compatible methods are needed. I will write an article soon
##displayBlock-level elements default to display:block; inline non-replacement elements (a, span) default to display:inline;; Inline replacement element (input) defaults to display:inline-block;
float<a href="http://www.php.cn/wiki/919.html" target="_blank"></a>When the inline After the element is set to float
:left/right, the display attribute of the element in the row will be assigned the block value and has the float feature. The inexplicable white space between inline elements is removed.
position<a href="http://www.php.cn/wiki/902.html" target="_blank"></a>When positioning inline elements, position:absolute, with position:fixed. Will make the original inline elements become block-level elements.

[Note] Through the above settings, you can set the width, height, and inner and outer margins for inline non-replaced elements. However, when replacing, you need to pay attention to the fact that converting to block-level elements is only a side effect of float and position. Their own effects will also interfere with the layout effect.
When we introduced block-level elements before, we said that the width of block-level elements will
inheritits parent elements. However, this effect will only occur if display:block; is set for inline elements. Other conversions will not bring this effect by default.

It is recommended that friends type and compare by themselves in
Editor, and then they will be impressed.

【Related recommendations】

Free html online video tutorial

html Development Manual

php.cn Original HTML5 Video Tutorial

The above is the detailed content of Detailed tutorial on converting between inline and block-level elements. For more information, please follow other related articles on the PHP Chinese website!