What are the inline elements? What are the block level elements? What are the void elements?

CSS The specification states that each element has display Property to determine the type of the element. Each element has a default display Value,
such as div default display The attribute value is“ block"，Become a "block level" element; span default display The attribute value is“ inline"，Is an "inline" element.

In line elements include: span a b i img input select strong
The block level elements are: div p h1-h6 ul table form ul ol li dl dt dd
Empty element (no content): < br > < HR > < img > < input > < link > < meta >

What is CSS Hack

Generally speaking, it is written differently for different browsers CSS,namely CSS Hack. 
CSS Hack There are three common forms:
attribute Hack,Selector Hack,conditional comments  Hack， Hack Mainly for IE browser

1. Condition Hack

<!--[if IE]>
    <p>What are you doing IE Will not see me</p>
<![endif]-->

<!--[if IE]>
<style>
    .test{color:red;}
</style>
<![endif]-->
 
<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Conditional comments are only available in IE It can only be executed under the browser. This code is in non IE Browsing is ignored as a comment.
Can pass IE Conditional annotations load different CSS,JS,HTML And server code.

2. Attribute Hack

.test{ color:#090\09; /*  For IE8+,FF */ 
*color:#f00; / * For IE7 * / 
_color:#ff0; /*  For IE6  */ }

Attribute level Hack: 
such as IE6 Can recognize underscore "" and asterisk "",
IE7 Can recognize asterisk '', but cannot recognize underscore '', and firefox Neither of them.
background-color:red9; 9 be-all ie Browser recognizable;
background-color:yellow0; 0 It's for ie8 of

3. Selector Hack

* html .test{color:#090;} /* For IE6 and earlier */
*+html .test{color:#ff0;} /* For IE7 */
.test{color:#f00;} /* For IE8+ and not IE */

such as IE6 Can identify *html .class{}，
IE7 Can identify*+html .class{}

Browser priority

FF<IE7<IE6,CSS hack
 The writing order is generally FF(FireFox Firefox) IE7 IE6

With: "#demo {width:100px;}" For example:

#demo {width:100px;} /* Executed by FIREFOX,IE6,IE7*/
* html #demo {width:120px;} /*It will be executed by IE6, and the previous definitions will be overwritten by later ones, so #demo width is 120px in IE6; */
*+html #demo {width:130px;} /* Will be executed by IE7*/
So finally,#The width of the demo is interpreted in three browsers as: FIREFOX:100px; ie6:120px; ie7:130px;

IE8+ Latest properties css hack: 
"9"　example:"border:1px 9;"there"9"Can distinguish all IE and FireFox.(Only for IE9 Hack)
"0"　IE8 distinguish, IE6,IE7 No.
"*"　IE6,IE7 Can identify.IE8,FireFox No.
"_"　IE6 Can identify"_",IE7,IE8,FireFox No.

Differences between src and href

Href identifies the hypertext reference, which is used on elements such as link and a. href is the association between the reference and the page, and establishes the connection between the current element and the referenced resource
src refers to a reference resource and replaces the current element. It is used on img, script and iframe. src is an indispensable part of the page content.

src is the abbreviation of source. It refers to the location of external resources. The internal resources will be moved to the location of the current label in the document; When requesting src resources, the resources it points to will be downloaded and applied to the current document, such as js script, img picture, frame and other elements.

When the browser parses this sentence, it will pause the downloading and processing of other resources until the resource is loaded, compiled and executed. The same is true for elements such as pictures and frames, which is similar to the nesting of the resources pointed to by the element in the current tag. This is why it is necessary to put js at the bottom instead of the head. When the browser parses this sentence, it will recognize the document as a css file, download it, and will not stop processing the current document. This is why it is recommended to use the link method to load css instead of using

The difference between link and @ import

Both of them refer to CSS externally, but there are some differences:

1. difference:
   link is an XHTML tag. In addition to loading CSS, it can also define RSS and other transactions@ import belongs to CSS category and can only load CSS
2. difference:
   When link references CSS, it is loaded at the same time when the page is loaded@ import requires the page to be loaded after the page is fully loaded
3. difference:
   link is an XHTML tag without compatibility problems@ import is in CSS2 1, which is not supported by lower versions of browsers
4. difference:
   ink supports using Javascript to control DOM to change style; @ import does not support this