IFE Learning notes <1> CSS Layout tips

#main {    max-width:600px;     margin:0 auto;}

Replace width with max-width to automatically adjust the content width when the screen is narrower than 600px, instead of the wheel. All major browsers including IE7 are supported.

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

Avoid padding and border-width to keep the elements wide. Eliminate the usual mathematical calculations, making the width of the same element as wide. Support ie8+.

. Clearfix {    overflow: auto;     Zoom: 1; //added to support IE6, triggering haslayout}

A closed float, which is better than clear floating, solves the problem of floating elements that are higher than the containing element and thus overflow. The class= "Clearfix" that contains the element.

{    nav {        float: left;         Width: 25%;    } {margin-left: 25%;        }          {    nav li {        display: inline;    } }

Media queries for responsive layouts.

. Box {    display: inline-block;     width:200px;     height:100px;     margin:1em;}

Inline-block, there will also be a response type.

"You can use inline-block to layout. There are some things you should keep in mind:

• vertical-alignproperty affects the inline-block element, you may set its value to top .
• You need to set the width of each column
• If there are spaces between the elements in the HTML source code, there is a gap between the columns and columns.

IFE Learning notes <1> CSS Layout tips