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