Summary by front-end engineers

ArticleDirectory

• Block-level
• Inline-level

Basic HTML knowledge

1. What is DTD? Differences between HTML and XHTML
2. Differences between block-level elements and intra-block elements:

Block-level

Address | BLOCKQUOTE | body | dd | Div | DL | dT | fieldset | form | frame | frameset | H1 | H2 | H3 | H4 | H5 | H6 | noframes | ol | p | ul | center | dir | HR | menu | pre | del | ins | form | table | NoScript

Inline-level

A | abbr | acronym | B | BDO | big | BR | cite | code | dfn | em | I | IMG | input | KBD | label | q | SAMP | select | small | SPAN | strong | sub | sup | textarea | TT | Var

Basic CSS knowledge

Selector

Type Selector
Descendant Selector
Id Selector
Class Selector
Pseudo class
General Selector

Priority

Cross-browser Policy

# Demo {
Background: red;/* For Firefox */
Border: 2px solid black;/* For Firefox */
* Background: Blue;/* For IE7 */
* Border: 2px solid green;/* For IE7 */
_ Background: green;/* For IE6 */
_ Border: 2px solid red;/* For IE6 */
}
Note: * is for IE (including IE6 and IE7); '_' is for IE6.
The order is: first Firefox, then IE7, then IE6

Key points related to CSS

1. The DTD of CSS triggers the weird mode, standard mode, and near standard mode.
2. The box model of CSS is different. (In Weird Mode)
3. Floating mode.
4. Positioning methods (general positioning, stream positioning, relative positioning, and absolute positioning)
5. Differences in the default style of some tags (UL/Li.

How to solve different page display in IE and CSS

1. Check whether the strange mode is triggered due to the lack of DTD.
2. Check whether the default style of IE or Firefox is not cleared.
3. Check whether the browser will automatically correct the script because a tag is not closed or the nesting is incorrect. Different browser correction methods are different. (If the problem persists, use the Verify function of the webdeveloper plug-in to w3.org for confirmation)