Must-see CSS layout tips sharing

The editor below will bring you a must-read css layout tip. The editor thinks it’s pretty good, so I’d like to share it with you now and give it as a reference. Let’s follow the editor and take a look.

1.max-width:

When the left and right width of the page is reduced, in order to avoid left and right scrolling If you have a bad experience, you can use max-width! If the page is smaller than the width, it will be automatically reduced~

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

##2.box-sizing:

After setting box-sizing:border-box on an element, and then setting padding and border after determining the width, the width will not be changed. You can set global settings to solve browser compatibility issues as follows:

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

##3.overflow:auto The border adapts to the size of the content, and there will be no overflow.

IE compatible solution:

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

4. Responsive design - media queryAfter using media queries, you can set different layouts according to different page widths. The method is as follows:

//页面宽度大于600px时，nav模块浮动于左侧   
@media screen and (min-width: 600px) {   
nav {   
    float: left;   
    width: 25%;   
}   
section {   
    margin-left: 25%;   
}   
}   
//页面宽度小于599时，nav模块打横，在上方   
@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: 1em; column-count:3; column-gap:1em; }

The above is the detailed content of Must-see CSS layout tips sharing. For more information, please follow other related articles on the PHP Chinese website!