CSS Advanced Tips

Using CSS Reset

CSS Reset can maintain a consistent style style on different browsers. You can use the CSS Reset library normalize, etc., or you can use a more streamlined reset method: •

* {  box-sizing:border-box;   0 ;   0 ;}

Now that the element's margin and padding are 0, box-sizing you can manage the layout of your CSS box model.

Inherited  box-sizing

html inherit from element box-sizing :

HTML {  box-sizing:border-box;} *, *:before, *: After {  box-sizing:inherit;}

For bodyElement Add Row Height

You do not have to add the elements to each <p> element individually, and line-height add them directly to the body elements: ·

Body {  line1.5;}

Vertically center any element horizontally

Use elastic boxes to achieve

html, body {  %;    0 ;} Body {  -webkit-Flex;  Display:flex;  Justify-content:center; /* Center Horizontally */  /* Vertical Center Compatible */    align-items:center; /* Center Vertically */ }

Use Flexbox to remove excess margin

. list {  Display:flex;  Justify-content:space-between;}. List. person {  Flex%;} 

This article from: https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN#table-of-contents

Featured Articles

• 20 Useful CSS Tips
• CSS sticks to 5 ways to fix the bottom
• Mobile side CSS split evenly layout extension

CSS Advanced Tips