CSS layout (5) webpage layout and css layout

CSS layout (5) webpage layout and css layout

In essence, a webpage is the position between a block and a block. blocks are nested and stacked.

Three relationships: adjacent, nested, and overlapping.

 

The following describes several common webpage layout methods.

 

 

1. One column layout:

Generally, the width and height are fixed. margin: 0 auto is set to center horizontally for display of prominent titles on the interface;

        .main{            width: 200px;            height: 100px;            background-color: grey;            margin: 0 auto;        }

<div class="main"></div>

 

2. Two-column layout:

When talking about the two-column layout, float is the most common one. The disadvantage of float floating layout is that floating will result in text wrapping and other effects, and floating needs to be cleared in time.

Set left floating or left floating (this is to determine the width of the parent element)

If no height is set for the parent element, you need to set overflow: hidden to clear the impact of floating.

Clear: both;

    <div class="main">        <div class="left">left</div>        <div class="right">right</div>    </div>

        .main{            width: 400px;            background: red;            overflow: hidden;        }        .left{            background: yellow;            float: left;        }        .right{            background: green;            float: left;        }

 

3. Three-column layout:

Adaptive between fixed width and center on both sides

First, set the width of the parent element.Can be set to float left or right. Set margin in the middle to adjust the spacing. You can also set them to left float, set margin, and adjust the spacing.Also pay attention to the impact of floating removal!

    <div class="main">        <div class="left">left</div>        <div class="middle">middle</div>        <div class="right">right</div>    </div>

        .main{            width: 100%;            background: red;            overflow: hidden;        }        .left{            background: yellow;            float: left;            width: 100px;        }        .middle{             background: rosybrown;             float: left;             width: cacl(100%-200px);         }        .right{            background: green;            float: right;            width: 100px%;        }

Or set the relative attribute for the parent element, set the absolute attribute for the child element, locate and adjust the spacing separately.

<div class="parent" style="background-color: lightgrey;">    <div class="left" style="background-color: lightblue;">        <p>left</p>    </div>        <div class="center" style="background-color: pink;">        <p>center</p>        <p>center</p>    </div>                    <div class="right"  style="background-color: lightgreen;">        <p>right</p>    </div>            </div>

<style>p{margin: 0;}.parent{position: relative;height:40px;}.left,.right,.center{position: absolute;}.left{left: 0;width:100px;}.right{right: 0;width: 100px;}.center{left: 120px; right: 120px;}</style>

 

4. Hybrid layout:

Retained based on a column layoutIn the top and foot sections, the main section in the middle is transformed into two or three columns. Small modules can be further divided in parallel.

 

    <div class="top"></div>    <div class="main">        <div class="left">left</div>        <div class="right">right</div>    </div>    <div class="footer"></div>

        .top{            height: 100px;            background: teal;        }        .footer{            height: 100px;            background: wheat;        }        .main{            width: 100%;            background: red;            overflow: hidden;        }        .left{            background: yellow;            float: left;            width: 50%;        }        .right{            background: green;            float: right;            width: 50%;        }