CSS layout page layout

Web page is essentially the location between blocks, blocks next to blocks, blocks nested blocks, blocks stacked blocks.

Three relationships: adjacent, nested, and overlapping.

 

Here are some common ways of web page layout

 

 

1. One column layout:

Generally, it is a fixed width and height. Set Margin: 0 Auto to center horizontally, which is used to display the prominent title of the interface;

        .main{
            width: 200px;
            height: 100px;
            background-color: grey;
            margin: 0 auto;
        }
<div class="main"></div>

 

2. Two column layout:

Speaking of two column layout, the most common is to use float To achieve. The disadvantage of floating layout is that floating will cause text wrapping and other effects, and it needs to be timely Clear float.

Set left left float, or left and right float (this is to determine the width of the parent element)

If the parent element does not have a height set, you need to set overflow:hidden to clear the impact of floating

Clear: both; clear: both; 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:

Two side fixed width middle adaption

First, set the width of the parent element. You can set the float left and right. Then set margin in the middle to adjust the spacing. You can also set them to float to the left, set margin, and adjust the spacing. Also pay attention to clear the influence of floating!

<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, and then set the absolute attribute for the child element, and then 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. Mixed layout:

On the basis of one column layout, the top part and the foot part are retained, and the main part in the middle is transformed into two or three column layout. The small modules can be divided into the same level by level.

 

<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%;
        }

 

5. Expansion (such as equal distribution office, etc.)

<div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
        body{margin: 0;}
        .parent{
            border: 1px solid red;
            overflow: hidden;
            margin-right: -10px;
        }
        .child {
            width: calc(25% - 10px);
            height: 100px;
            background: green;
            float: left;
            margin-right: 10px;
        }

Tags: Attribute

Posted on Tue, 05 May 2020 13:00:39 -0400 by vonnero