CSS HTML tags main type: block Element (block), inline element (inline)

Issue background

When some HTML tags use box model properties, some properties fail?    Block element exclusive row (whether to add width), the element before and after the other content to wrap directly applicable box model of all CSS properties of the row element is not exclusive row, multiple rows of elements can be rendered in a row part of the applicable CSS box model properties: • Width, height settings are not valid • Margin settings: Effective, up or down invalid

Common block elements

Tags                              Description <div>                              boxes 
Common inline labels
Label Description <span> Small combo (small box) <a> Hyperlinks <strong> Highlights <em> General emphasis
Block element VS Inline element
• Block elements can be nested in block elements, or nested inline elements • Inline elements cannot be nested in block elements, only nested inline elements • The block element itself is a box, and the elements of the rows need to be replaced and changed into boxes
Element State transitions:
Display+block block element Inline element Inline-block itself is an inline element, but has a box model attribute; Applies to a row of elements, a scene that needs to be set as a box model none; no physical space reserved
Example (display use):
1) Create a hyperlink to a button mode
Knowledge Point: a {display:block;} Make a label have box model properties
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
650) this.width=650; "Src=" Https://s2.51cto.com/oss/201711/12/ec021e573686035dd9bf0bc49c73a695.jpg-wh_500x0-wm_3 -wmp_4-s_779795300.jpg "title=" 3.JPG "style=" Float:none; alt= "Ec021e573686035dd9bf0bc49c73a695.jpg-wh_"/>650) this.width=650; "Src=" https://s2.51cto.com/oss/201711/12/86b0331ee1403ca1bde54d2c7f20fc42.jpg-wh_500x0-wm_3-wmp _4-s_4019256659.jpg "style=" Float:none; "title=" 2.JPG "alt=" 86b0331ee1403ca1bde54d2c7f20fc42.jpg-wh_ "/>
2) navigation bar (using Inline-block)
<! doctype html public  "-//w3c//dtd xhtml 1.0 transitional//en"   "HTTP// Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
650) this.width=650; "Src=" Https://s4.51cto.com/oss/201711/12/021902a02b9e942cc0c0d46a40954e87.jpg-wh_500x0-wm_3 -wmp_4-s_3134220657.jpg "title=" 1.JPG "alt=" 021902a02b9e942cc0c0d46a40954e87.jpg-wh_ "/>
3) The default is only the title, the mouse is moved up to have content (using Display:none;): Explicit hiding, not preserving physical space
<! doctype html public  "-//w3c//dtd xhtml 1.0 transitional//en"   "HTTP// Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
650) this.width=650; "Src=" Https://s2.51cto.com/oss/201711/12/3d1b2a3d4308e51787d4533ce35df68f.jpg-wh_500x0-wm_3 -wmp_4-s_821363543.jpg "title=" 5.JPG "alt=" 3d1b2a3d4308e51787d4533ce35df68f.jpg-wh_ "/>
650) this.width=650; "Src=" Https://s1.51cto.com/oss/201711/12/7cad24db7097e63d2b6cd41edf6bebe2.jpg-wh_500x0-wm_3 -wmp_4-s_661653539.jpg "title=" 6.jpg "alt=" 7cad24db7097e63d2b6cd41edf6bebe2.jpg-wh_ "/>
This article from "Kong Love to Eat fish" blog, declined reprint!
CSS HTML tags main type: block Element (block), inline element (inline)