Top CSS skills are released, div css layout must be known_Experience exchange

css top skills are on display, you must know div css layout_experience exchange

use px for font size

declare css in one line
compare the following two:

h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#fff;} 
h2 { 
   font-size:18px; 
   border:1px solid blue; 
   color:#000; 
   background-color:#fff; 
   }

the second one does look formatted, but it will not help in reading. writing in one line allows you to find the part you need faster.

i used to write in a similar way to the second method, but gradually i found that as the article said, it was not very useful. one line looks crisp, saves space, and makes the file smaller.

writing code in blocks
writing code in this way can make css more page-like, and when a problem occurs, the problem can be found in the shortest time. like the following:

#content {float:left;} 
   #content p { … } 
#sidebar {float:left;} 
   #sidebar p { … } 
#footer {clear:both;} 
   #sidebar p { … }

browser support
only supports the latest browsers. that means giving up ie5 and ie5.5. this saves a lot of time. for ie6, there is no need to use the box model hack. if you only target popular browsers, you only need a few hacks to achieve the same effect.

i paid attention to the css of netease's new homepage, and there was no !important or hack in it, but the display effect was very good in ff and ie. reasonable use of css can avoid hacks. of course, debugging will take more time.

contains floating elements
all content within the container should be designed to be consistent with the container. if it is too large, it will slide to the wrong position. using negative margins to adjust outside the container will also cause sliding.

understanding overflow
if there are two floating elements on the page, outputting too much content in the left container will cause the right container to run underneath. this means that your margin, width or padding settings are messed up, but it will not be reflected in ff. use overflow:hidden or overflow:scroll to prevent ie from allowing content to flow out of the container.

allow block elements to automatically fill in the blanks

abbreviation css
many people use margin-top, margin-right, margin-bottom, and margin-left. heap. in fact, this is the most basic. margin can be directly abbreviated as margin: upper right lower left value. a summary of css abbreviations can be seen here.
avoid unnecessary selectors
reduce style selectors to a minimum. if you find yourself writing ul li {} or table tr td{} constantly, it proves that you are writing too detailed. fewer selectors make it easier to spot problems.

i haven’t fully translated it, and there are a lot of my own words in it, haha.

the above is the release of top css skills, div css layout must know_experience exchange content, for more related content, please pay attention to the php chinese website (www.php.cn) !