1. Differences between IE box and standard box:
Think of elements as a box, margin is the wrapping paper outside the box, border is the box skin, padding is the gap between the box and the stuff inside the box, and content is in it.
The definition of the box width is different between IE and W3C. In ie, the box width contains wrapping paper + box skin + content, while in W3C, the width contains content
There are two solutions:
Avoid setting padding and border for elements with width, and try to add these attributes to the parent or child element of the element.
IE is not recognized! Important, height: 100px! After important parses, the value of height is underfined. After Height: 130px is parsed, the value of height is overwritten as 130px. Other browsers! Important has the highest priority, so the subsequent parsing will not overwrite the height value.
. Box-style2 {
Margin: 20px;
Padding: 10px;
Border: solid 5px black;
Background-color: red;
Height: 100px! Important;
Height: 130px;
Width: 100px! Important;
Width: 130px;
}
2. Advantages and Disadvantages of pseudo classes:
The advantage is that you can add special effects to some selectors. The pseudo class is not recognized on IE. The fundamental difference between pseudo-classes and elements is whether they create new elements. If you need to add new elements for identification, it is an element. Otherwise, you only need to add a category to an existing element as a pseudo class. If you do not use a pseudo element, you need to add another element. If you do not use a pseudo class, you only need to add a class.
Used to add special effects to Some browsers.
Pseudo classes can be used to represent the dynamic states of some elements, such as the States of links, or elements that exist logically but do not need to be marked in the Document Tree, such as the first section P: First-child
A pseudo element represents a child element of an element. Although this child element exists logically, it does not actually exist in the document. For example, the first line of a paragraph is P: first-line.
Pseudo class:
Pseudo element:
Summary of small front-end details