Small CSS Problems

1. Why use semantic tags?

1.1 semantic tags can help people understand the meaning and role of tags;. It is conducive to search engine crawling and site promotion; 3. It is accessible to mobile devices.

 

2.css Optimization Methods

2.1 use abbreviations reasonably; 2.2 use tools to optimize and compress CSS code; 2.3 reuse CSS code; 2.4 use descendant selector with caution because descendant selector is the most expensive selector in CSS;

2.5 do not use tag modifier; 2.6 Use the universal selector with caution because it needs to initialize the tag; 2.7 do not add modifier before class selector and ID selector;

2.8 remove the unit after 0; 2.9 remove unnecessary spaces; 2.10 do not use small images for tile;

 

3. The difference between line-Height: 150% and line-Height: 1.5

This problem is designed to inherit line-height. If line-height is added with a unit, the calculated value is inherited. If line-height is not included, this parameter is inherited.

For example:

<Div style = "line-Height: X"> (X is 150%, 1.5, respectively)

<P style = "font-size: 30px;"> line-height </P>

</P>

When x = 150%, the line-height inherited by <p> is the font-size * 150% of the browser, and the browser is 16px, the actual line-height is 24px, it must be smaller than 30px, so there will be overlapping fonts;

When x = 1.5, <p> the inherited line-height parameter is 1.5, in this case, the line-height of <p> is 30*1.5 = 45px> 30px, so there is no overlap.

In order to deal with all kinds of unknown situations, do not give line-height Any unit.

 

4.css priority

. If the browser supports important, the priority of this attribute is the highest;. For different selectors, Id> class> tags;

. The recent priority is higher; 4. The specified priority is higher than the default browser priority.

5. layout technology

You can use float, negative margin, and relative positioning (absolute positioning) to complete the layout task.