2. 程式人生 > >HTML+CSS多種佈局技巧

HTML+CSS多種佈局技巧

阿新 • • 發佈：2019-01-27

一、水平居中

水平居中多用於標題以及內容區域的組織形式，以下是五種實現水平居中的方法：

方法一： 使用inline-block和text-align實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水平居中（1）</title>
    <style>
    .parent{
        text-align: center;
    }
    .child{
        display: inline-block
 
;
        height: 200px;
        background: green;
        color: white;
    }   
    </style>
</head>
    <body>
        <div class="parent">
            <div class="child">
                使用inline-block和text-align實現水平居中
            </div> 
        </div>
    </body
 
>
</html>

優點：相容性好
缺點：需要同時設定子元素和父元素

方法二： 使用margin：0 auto來實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水平居中（2）</title>
    <style>

    .child{
        margin: 0 auto;

        width: 300px;
        height: 200px;
        background
 
: green;
        color: white;
    }

    </style>
</head>
    <body>      
        <div class="child">
            使用margin：0 auto來實現水平居中
        </div> 
    </body>
</html>

優點：相容性好
缺點：需要指定寬度

方法三： 使用table和margin：0 auto實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水平居中（3）</title>
    <style>
    .child{
        display: table;
        margin: 0 auto;

        height: 200px;
        background: green;
        color: white;
    }   
    </style>
</head>
    <body>      
        <div class="child">
            使用table和margin：0 auto實現水平居中
        </div>      
    </body>
</html>

優點：只需對自身進行設定
缺點：IE6、7不相容需要調整

方法四： 使用絕對定位實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水平居中（4）</title>
    <style>
    .child{
        position: absolute; 
        left: 50%;

        transform: translate(-50%);/*也可使用margin-left設定盒子的一半,不過此時要設定盒子的寬度*/


        height: 200px;
        background: green;
        color: white;
    }   
    </style>
</head>
    <body>      
        <div class="child">
             使用絕對定位實現水平居中
        </div>      
    </body>
</html>

缺點：相容性差，需IE9 及以上可用

* 方法五：* 使用flex 佈局實現
1、只設置父元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水平居中（5-1）</title>
    <style>
    .parent{
        display: flex;
        justify-content: center; /*設定水平方向位置，還有flex-end、flex-start等值*/

    }
    .child{
        height: 200px;
        background: green;
        color: white;
    }   
    </style>
</head>
    <body>  
        <div class="parent">
            <div class="child">
                使用flex 佈局實現水平居中
            </div> 
        </div>              
    </body>
</html>

2、父元素和子元素都需要設定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水平居中（5-2）</title>
    <style>
    .parent{
        display: flex;
    }
    .child{
        margin: 0 auto;

        height: 200px;
        background: green;
        color: white;
    }   
    </style>
</head>
    <body>  
        <div class="parent">
            <div class="child">
                使用flex 佈局實現水平居中
            </div> 
        </div>              
    </body>
</html>

缺點：相容性差、如果進行大面積的佈局可能會影響效率

二、垂直居中

方法一： 使用vertical-align: middle，由於使用它的時候對齊的基線是用行高的基線作為標記，故需要設定line-height和display：table-cell/inline-block

1、設定
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>垂直居中（1）</title>
    <style>
    .parent{
        display: table-cell;
        vertical-align: middle;
        height: 500px;
    }
    .child{

        background: green;
        color: white;
    }   
    </style>
</head>
    <body>  
        <div class="parent">
            <div class="child">
                使用vertical-align: middle實現垂直居中
            </div> 
        </div>              
    </body>
</html>

* 方法二：* 使用絕對定位

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>垂直居中（2）</title>
    <style>
    .child{
        position: absolute;

        top: 50%;   
        transform: translate(0,-50%);
        background: green;
        color: white;
    }   
    </style>
</head>
    <body>
        <div class="child">
            使用vertical-align: middle實現垂直居中
        </div> 

    </body>
</html>

方法三： 使用flex實現，用它實現垂直居中的時候需要給父元素一個高度

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>垂直居中（3）</title>
    <style>
    html,body,.parent{
        height: 100%; //parent的100%高度是根據父元素body>html 的高度設定的，也可以直接設定具體的高度值，不用百分比
    }
    .parent{
         display: flex;
         align-items: center; /*定義body的元素垂直居中*/
    }

    .child{
        width: 300px;
         height: 300px;
        background: green;
        color: white;
    }   
    </style>
</head>
    <body>  
        <div class="parent">
            <div class="child">
                使用flex實現垂直居中
            </div> 
        </div>  

    </body>
</html>

三、水平垂直全部居中

方法一：利用絕對定位實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中（1）</title>
    <style>

    .child{
        position: absolute;
        top: 50%;
        left: 50%;      
        transform: translate(-50%,-50%);
        background: green;
        color: white;
    }   
    </style>
</head>
    <body>  
        <div class="child">
                使用flex實現水平垂直居中
        </div>      

    </body>
</html>

方法二： 使用flex實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中（2）</title>
    <style>
    .parent{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 800px;
    }
    .child{
        background: green;
        color: white;
    }   
    </style>
</head>
    <body>  
        <div class="parent">
            <div class="child">
                使用flex實現水平垂直居中
            </div> 
        </div>  

    </body>
</html>

四、多列布局

情況一： 左列定寬，右列自適應

1、使用float+margin-left實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左列定寬，右列自適應</title>
    <style>
        .left{
            float: left;
            width: 200px;
            height: 500px;
            background: red;
        }
        .right{
            margin-left: 210px;
            height: 500px;
            background: green;
        }
    </style>
</head>
    <body>  
            <div class="left">
                定寬
            </div>
            <div class="right">
                自適應
            </div>      
    </body>
</html>

2、使用float+overflow實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左定寬，右自適應（2）</title>
    <style>
    .left{
        width: 200px;
        height: 500px;
        float: left;
        background: red;
    }
    .right{
        overflow: hidden;
        height: 500px;
        background: green;
    }
    </style>
</head>
    <body>  

        <div class="left">
            定寬
        </div>
        <div class="right">
            自適應
        </div>

    </body>
</html>

3、使用flex實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左定寬，右自適應（3）</title>
    <style>
    .parent{
        display: flex;
    }
    .left{
        width: 200px;
        height: 500px;
        background: red;
    }
    .right{
        flex: 1;
        background: green;
    }
    </style>
</head>
    <body>  
        <div class="parent">
            <div class="left">
                定寬
            </div>
            <div class="right">
                自適應
            </div>
        </div>      
    </body>
</html>

4、使用table實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左列自適應，右列定寬</title>
    <style>
        .parent{
            display: table;
            table-layout: fixed;
            width: 100%;
        }
        .left{
            display: table-cell;
            width: 200px;
            height: 500px;          
            background: red;
        }
        .right{
            display: table-cell;

            background: green;
        }
    </style>
</head>
    <body>  
        <div class="parent">
            <div class="left">
                定寬
            </div>
            <div class="right">
                自適應
            </div>

        </div>

    </body>
</html>

情況二： 右列定寬，左列自適應
1、使用float+margin-right 實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左列自適應，右列定寬</title>
    <style>

        .left{
            float: left;
            width: 100%;
            height: 500px;
            margin-right: -210px;
            background: red;
        }
        .right{
            float: right;
            width: 200px;
            height: 500px;
            background: green;
        }
    </style>
</head>
    <body>  

            <div class="left">
                自適應
            </div>
            <div class="right">
                定寬
            </div>

    </body>
</html>

2、使用flex實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左列自適應，右列定寬（2）</title>
    <style>
        .parent{
            display: flex;
        }
        .left{
            flex: 1;
            /*margin-right: 20px;*/
            height: 500px;          
            background: red;
        }
        .right{
            width: 200px;
            background: green;
        }
    </style>
</head>
    <body>  
        <div class="parent">
            <div class="left">
                自適應
            </div>
            <div class="right">
                定寬
            </div>

        </div>

    </body>
</html>

3、使用table實現 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左列自適應，右列定寬</title>
    <style>
        .parent{
            display: table;
            table-layout: fixed;
            width: 100%;
        }
        .left{
            display: table-cell;
            height: 500px;          
            background: red;
        }
        .right{
            display: table-cell;
            width: 200px;
            background: green;
        }
    </style>
</head>
    <body>  
        <div class="parent">
            <div class="left">
                定寬
            </div>
            <div class="right">
                自適應
            </div>

        </div>

    </body>
</html>

情況三： 兩列定寬，一列自適應

1、使用float+margin實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左列自適應，右列定寬（1）</title>
    <style>

        .left{
            width: 200px;
            float: left;            
            background: red;
        }
        .center{
            width: 200px;
            float: left;    
            margin-left: 10px;      
            background: orangered;
        }
        .right{
            margin-left: 420px;
            background: green;
        }
    </style>
</head>
    <body>  
        <div class="parent">
            <div class="left">
                定寬
            </div>
            <div class="center">
                定寬
            </div>
            <div class="right">
                自適應
            </div>

        </div>

    </body>
</html>

2、使用float+overflow實現

<html>
<head>
    <meta charset="UTF-8">
    <title>兩列定寬，一列自適應（2）</title>
    <style>

        .left{
            width: 200px;
            float: left;            
            background: red;
        }
        .center{
            width: 200px;
            float: left;    
            margin-left: 10px;      
            background: orangered;
        }
        .right{
            overflow: hidden;
            margin-left: 420px;
            background: green;
        }
    </style>
</head>
    <body>  
        <div class="parent">
            <div class="left">
                定寬
            </div>
            <div class="center">
                定寬
            </div>
            <div class="right">
                自適應
            </div>

        </div>

    </body>
</html>

3、使用table實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>兩列定寬，一列自適應</title>
    <style>
        .parent{
            display: table;
            table-layout: fixed;
            width: 100%;
        }
        .left{
            display: table-cell;    
            width: 200px;   
            background: red;
        }
        .center{
            display: table-cell;
            width: 200px;
            margin-left: 10px;      
            background: teal;
        }
        .right{
            display: table-cell;
            margin-left: 420px;
            background: green;
        }
    </style>
</head>
    <body>  
        <div class="parent">
            <div class="left">
                定寬
            </div>
            <div class="center">
                定寬
            </div>
            <div class="right">
                自適應
            </div>

        </div>

    </body>
</html>

4、使用flex實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

相關推薦

HTML+CSS多種佈局技巧

一、水平居中 水平居中多用於標題以及內容區域的組織形式，以下是五種實現水平居中的方法： 方法一： 使用inline-block和text-align實現 <!DOCTYPE html> <html> <head>

html+css簡單佈局

經過幾天的學習漸漸掌握了一部分html和css 下面是用最近幾天學習的html+css簡單佈局的一個頁面 這個頁面可以分為 header，middle和foot。 其中head分為三部分，需要三個div標籤來進行佈局 首先第一個div標籤佈局橙色區域以及整個header區域設定背景顏色

CSS高階佈局技巧

隨著IE8逐漸退出舞臺，很多高階的CSS特性都已被瀏覽器原生支援，再不學下就要過時了。 用:empty區分空元素 相容性：不支援IE8 演示 假如我們有以上列表： 我們希望可以對空元素和非空元素區別處理，那麼有兩種方案。 用:empty選擇空元素： 用或者:not(:em

html+css佈局技巧

(一）、父元素的寬高的變化子元始終素鋪滿父元素 <body> <div class="parent"> <div class="child"></div> </div> </body>

HTML與CSS佈局技巧總結

很多人對CSS的佈局有困惑，實際的應用場景中由於佈局種類多難以選擇。今天我花些時間總結下自己對CSS佈局的理解，分析下了解各種佈局的優劣，同時希望能分享給初入前端的朋友們一些在佈局上的經驗，如果有那些地方總結的不好，歡迎大家指正。言歸正傳，現在就來揭開各種佈局的面紗。 單列

HTML與CSS佈局技巧

### 一、使用`$`標識原生`DOM`元素 ``` let $white = document.querySelector('.white') ``` ### 二、要使用top，left等定位屬性 要先將該元素設定`position`屬性，`absolute`或者`relative`等 ### 三、

史上最全Html和CSS布局技巧

喜歡 輸出 隔離 init scale ext med 兩種 float 單列布局水平居中 水平居中的頁面布局中最為常見的一種布局形式，多出現於標題，以及內容區域的組織形式，下面介紹四種實現水平居中的方法（註：下面各個實例中實現的是child元素的對齊操作，child元素的

HTML與CSS布局技巧總結

overflow 絕對定位 back hidden port 子元素 屏幕 hex key 很多人對CSS的布局有困惑，實際的應用場景中由於布局種類多難以選擇。今天我花些時間總結下自己對CSS布局的理解，分析下了解各種布局的優劣，同時希望能分享給初入前端的朋友

從零開始學習HTML+CSS（4）Flex佈局中的排列與換行

0.參考網址：https://www.runoob.com/w3cnote/flex-grammar.html 1.排列 預設值：橫向排列（從左邊開始排） div { display:flex;/*設定為flex佈局*/ flex-direction:row;/*這

HTML+CSS 五種佈局方式

已知佈局元素的高度，寫出三欄佈局，要求左欄、右欄寬度各為300px，中間自適應。 一、浮動佈局 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit

HTML+CSS前端元素定位問題技巧要點和瑣碎的知識點

前端設計第一步先用div分割不同模組，設定不同的背景色加以區分，大致的調整大小和位置，div是通用的方便操作的容器，再按照一定的順序實現每個div,此過程中不斷調整各個div的本身細節(如顏色大小是否漂浮)，相對位置，實現後去除div背景色調整整體色調、風格，最後檢查細節作最

HTML CSS三欄佈局

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .header,.footer

不怕你用不上！CSS 列表項佈局技巧

編者按： 為了不引入 HTML 標籤自身的樣式，本文未考慮 HTML 語義化的提倡，以使得行文與示例程式碼更加簡潔。這是文章寫作需要，而非程式碼風格示範。 在開發中我們經常會遇到關於如何展示列表的問題，例如： 圖片選擇器列表 人員部門選擇列表

【HTML&CSS】簡單網頁佈局

一、學習內容回顧 ☆常用標籤列舉 <p></p> <!--段落標籤--> <b></b>

關於html+css佈局移動端網頁

新手開發移動端網站遇到的適配問題，隨意看看就好哈： 1、不同的手機螢幕會出現佈局錯亂的現象；比如盒子高度溢位、盒子跳行之類、圖片變形的情況 2、字型大小不會隨著螢幕的變化而變化，在大螢幕上面的字型合適，在小螢幕上面顯得很大； 解決方法：響應式佈局，高度和字型的大小的單位

html+css+div網頁佈局例項

.html程式碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/

web前端開發技巧（HTML+CSS+Jquery）

HTML+CSS 1.css選擇器 1）偽元素：利用：after偽元素為標籤新增內容，比如：a:after{ content：“￥”}。 2）屬性選擇器，比如：input [ type=text ]，用法和jquery的屬性選擇器類似。 3）組合選擇器，A,B 同時匹配兩

HTML CSS + DIV實現整體佈局 （推薦）

HTML CSS + DIV實現整體佈局 1、技術目標： 開發符合W3C標準的Web頁面 理解盒子模型 實現DIV+CSS整體佈局 2、什麼是W3C標準？ W3C：World Wide Web Consortium，全球資訊網聯盟 W3C的職能：負責制定和維護W

css多種方式實現等寬佈局

本文講的等寬佈局是在不手動設定元素寬度的情況下，使用純css實現各個元素寬度都相當的效果。 1、使用table-cell實現(相容ie8) &lt;style&gt; body,div{ margin: 0; padding:

WEB前端-HTML-CSS-後臺管理頁面佈局小例

作為一個後臺管理頁面，不必太過複雜，一般只需要三部分： 1、上層標籤塊； 2、左側選單塊； 3、中部內容顯示塊； 今天簡要給大家分享一個佈局中的一個小case； 需求：要求上層標籤塊、左側選單