As a web front-end development engineer These CSS tips are worth mastering.

1. 1. http://web.jobbole.com/85142/
   2. Use :not() to remove unwanted borders on navigation
   3. To body add a row height
   4. Center any element vertically
   5. Comma-separated list
   6. Using negative nth-child selection elements
   7. Using the SVG icon
   8. Text Display optimization
   9. Use on a pure CSS slidemax-height
   10. Inheritedbox-sizing
   11. Table cell width
   12. Use Flexbox to get rid of the border hack
   13. Use the property selector to select an empty link
   Use:not()Add/Remove unwanted borders on navigation

   Add Border ...

   CSS

   12345

   / * Add border * / . Nav Li { border-right: 1px solid #666; }

   ... Then remove the border of the last element ...

   CSS

   12345

   / * Remove Border * / . Nav li:last-child { border-right: none; }

   ... Use pseudo-classes to :not() apply styles to only the elements you need:

   CSS

   123	. Nav li:not (: last-child) { border-right: 1px solid #666 ; }

   Of course, you can .nav li + li use .nav li:first-child ~ li， it or but :not() the intent is particularly clear, and the CSS selector defines the border in the way humans describe it.

   ForbodyAdd Row height

   You don't need to <p> add a row height for each element, and so on, but for body adding:

   CSS

   123	body { line-height: 1; }

   In this way, text elements can be easily body inherited from.

   Center any element vertically

   No, it's not black magic, you can really center any element vertically:

   CSS

   123456789101112

   html, body { height: 100%; margin: 0; }body { -webkit-align-items: Center; -ms-flex-align: Center; align-items: Center; display: -webkit-flex; display: flex; }

   Want to center other elements? Vertical, Horizontal ... Any thing, any time, any position? There is a good article on css-tricks to do it all.

   Note: Some defective behavior of flexbox on IE11.

   Comma-separated list

   Make the list look more like a real comma-separated list:

   CSS

   123	ul > Li:not (: Last-child):: After { content: ","; }

   Use pseudo :not() -classes so that the last element is not added as a comma.

   Use negativenth-childSelect element

   Use negative nth-child in CSS to select elements from 1 to n.

   CSS

   123456789

   Li { display: none; } / * Select elements from 1 to 3 and display * /li:nth-child (-n+3) { display : Block; }

   Or, you've learned something about using :not() , try:

   CSS

   1234567

   / * Select items 1 through 3 and display them * / / * Select elements from 1 to 3 and display * / Li:not (: Nth-child (-n+3)){ display: none; }

   It's simple.

   Using the SVG icon

   There is no reason not to use the SVG icon:

   CSS

   123	. logo { background: url("Logo.svg"); }

   SVG has good scalability for all resolution types and is supported by all browsers above IE9. So give up any files such as png,.jpg or Gif-jif.

   Note: If you use the SVG icon button while SVG fails to load, the following can help you maintain accessibility:

   CSS

   123	. No-svg. icon-only:after { content: attr(aria-label); }

   Text Display optimization

   Some fonts are not optimally displayed on all devices, so let the device browser help:

   CSS

   12345

   html {   -moz-osx-font-smoothing: grayscale   -webkit-font-smoothing : antialiased   text-rendering< Span class= "Crayon-sy" >: optimizelegibility

   Note: please use the optimizeLegibility . At the same time, Ie/edge does not support text-rendering .

   Used on the content slider of a pure CSS implementationmax-height

   Use on the content slider of the pure CSS implementation max-height , and set overflow hidden:

   CSS

   123456789

   . Slider ul { max-height: 0; overlow: hidden; }. Slider:hover ul { max-height: 1000px; transition: . 3s ease; / * Animate to Max-height * /}

   Inheritedbox-sizing

   From html inheritance box-sizing :

   CSS

   1234567

   html { box-sizing: border-box; } ,: Before, *:after { box-sizing: inherit; }

   This makes it easy for plugins or components that use other behaviors to change box-sizing .

   Table cell width

   Using a table can be painful, so use it table-layout：fixed to maintain the same width of the cell:

   CSS

   123	. Calendar { table-layout: fixed; }

   Painless table layout.

   Use Flexbox to get rid of the border hack

   When using column constraints, you can discard nth- , first- and last-child的 hacks, and use the properties of Flexbox space-between :

   CSS

   12345678

   < Span class= "Crayon-k" >.list {   display: flex   justify-content: space-between }  .list. Person {   flex-basis: 23%

   Column constraints are now always present at equal intervals.

   Use the property selector to select an empty link

   Show links with no text values but href attributes that have linked a elements:

   CSS

   123	a[href^= "http"]:empty::before { content: attr(href); }

   It is convenient to do so.

   Browser support

   These tips are available in the current version of Chrome,firefox, Safari, and Edge, and IE11 can work.

As a web front-end development engineer These CSS tips are worth mastering.