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:

-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!