CSS common layout techniques

1. Three-column layout

The following focuses on three-column layouts, and the same applies to two-column and multi-column layouts.

Float +clear implementation

The child element floats, the parent element is added and cleared, and the HTML looks like this:

<div class="wrapper clearfix">
    <div class="left">The left column</div>
    <div class="middle">Middle bar middle bar middle bar middle bar middle bar middle bar</div>
    <div class="right">On the right side of the bar</div>
</div>
Copy the code

CSS is as follows:

.clearfix::after {
    content: ' ';
    display: block;
    clear: both;
}
.wrapper{
    max-width: 360px;
    margin: 0 auto;
    border: 1px solid;
}
.left{
    width: 20%;
    float: left;
    background: #1aa;
}
.middle{
    width: 60%;
    float: left;
    background: #77a;
}
.right{
    width: 20%;
    float: left;
    background: #a7a;
}
Copy the code

Display effect:

table-cell

CSS3 cell implementation, left, middle, right class can be changed to the following form.

.left{
    display: table-cell;
    width: 20%;
    background: #1aa;
}
.middle{
    display: table-cell;            
    background: #77a;
}
.right{
    display: table-cell;
    width: 20%;
    background: #a77;
}
Copy the code

The display effect is the same as above, and the middle column can adapt to the window. However, table-cell only works with newer browsers, and negative margins can be used to accommodate older browsers.

2. Horizontal center

The inline elements are horizontally centered

Applies to text, links, and inline or inline-block, inline-table, and inline-flex. Add to the parent element of the element to be centered:

.container{
    text-align:center;
}
Copy the code

Block elements are horizontally centered

Set width for the parent element and set the following rules for the centered element:

.block{
    margin:0 auto;
}
Copy the code

If the width of the parent element is unknown, set it to display: inline-block and center it with the inline element method (TAC).

3. Center vertically

Center vertically inside the row

Set line-height to the same height as height. If you have n lines of text, set the line height to 1/n of the container height. Or set the upper and lower pandding equal

Fixed width high in the middle

First 50% down, then 50% up. The structure is as follows:

<div id="big">
    <div id="small"></div>
</div>
Copy the code

The style is as follows:

#big {
    position:relative;
    height:480px;
}
#small {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px;
}
Copy the code

4. The tip

1. withmax-widthAdaptive, not adaptivewidth(There will be scroll bars).
2. <span>Width and height Settings are not acceptable. changeinline-blockTo calculate thepaddingWe can do it from the inside.
3. The child is not the parent, write on the child elementp:abs, the parent element is writtenp:rel.
4. CSS resets are used to cancel the browser’s built-in styles, refer to YUI and Eric Meyer’s style sheets.
5. Download things to open a new page, so use<a>Rather than<button>.
6. letpadding,marginDo not change the width:box-sizing: border-box;