Must-see CSS layout tips to share

The following small series for everyone to bring a must-see CSS layout tips to share. Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.

1.max-width:

In order to avoid the bad experience of left and right scroll bars, you can use Max-width when the width of the page is shrinking. The page is smaller than the width of the hour, will automatically shrink Oh ~

max-width:500px;   margin:0 Auto;   }

2.box-sizing:

After you set the Box-sizing:border-box on an element, the width is not changed by setting padding and border after the widths are determined. You can do the following for global settings, which address browser compatibility issues:

-webkit-box-sizing:border-box;   -moz-box-sizing:border-box;   Box-sizing:border-box;    }

3.overflow:auto

The bounding box adapts to the size of the content and does not appear overflow.

IE Compatibility program:

. example{overflow:auto; zoom:1;}

4. Responsive design-Media queries

After using the media query, you can set different layouts according to different page widths, as follows:

When the page width is greater than 600px, the Nav module floats on the left @media screen and   (min-width:600px) {   nav {       float:left;       width:25%;   }   section {       margin-left:25%;   }   }   When the page width is less than 599, the Nav module Tasikmalaya, above @media screen and   (max-width:599px) {   nav li {       display:inline;   }   }

5. Text multi-column layout:

. three-column {padding:1em;-moz-column-count:3;-moz-column-gap:1em;-webkit-column-count:3;-webkit-column-gap:1e M Column-count:3; Column-gap:1em; }