Summary of small front-end details

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.