2. 程式人生 > >css佈局——行列基礎佈局

css佈局——行列基礎佈局

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

一、基礎行佈局

程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color: #fff;
        }
        .container{
            max-width: 800px;
            width: 100%;
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
            padding-top: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
</div>
</body>
</html>

直接把div堆砌上去就行，是比較簡單的。

二、列布局

1.使用浮動實現

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            padding:0;
            margin:0;
        }
        .first{
        	width: 100%;
        	height: 40px;
        	background: blueviolet;}
        .content{
            width:100%;
            height:1000px;
            background:yellow;
        }
        .left{
            background:purple;
            width:25%;
            float:left;
            min-height: 400px;
        }
        .middle{
            width:50%;
            float:left;
            min-height: 400px;
            background: red;
        }
        .right{
            background:blue;
            float:right;
            width:25%;
           min-height: 400px;
        }
    </style>
</head>
<body>
    <div class="left">left</div>
    <div class="middle">
        <div class="bb"></div>-->
    </div>
    <div class="right">right</div>
</body>
</html>

改變div的浮動屬性即可。

2.利用定位

這裡有必要做一些說明：

網頁的佈局的正常順序（應該就是文件流吧，求評論告知）是從左向右的，所以最左邊的使用絕對定位，只需要控制好寬度。

接下來我給中部和右邊分別設定margin-left來達到目的：

問題來了，那我可不可以從右往左設定呢？比如這樣設定left。

結果是錯誤的，因為margin-left是以同級元素作為參照物的，而此時左邊還沒有任何元素，故而無法實現。那麼該怎麼呢？容我先買個關子，在本文末尾我會給出我的探索結果。

正確程式碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        .content{
            width:100%;
            height:500px;
            background:#ccc;
            position:relative;
        }
        .left{
            background:purple;
            width:25%;
            position:absolute;
            height:90%;
        }
        .middle{
            background: yellow;
            width:50%;
            position:absolute;
            height:90%;
            margin-left:25%;
        }
        .right{
            background:blue;
            width:25%;
            position:absolute;
            height:90%;
            margin-left:75%;
        }

    </style>
</head>
<body>
<div class="content">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
</body>
</html>

3.聖盃

聖盃佈局和雙飛翼佈局極為相似，（我覺得沒啥區別）。

在佈局中有些細節還是比較難以理解的。（大家在看下面的分析時一定要看看完整的程式碼）

margin-left設定負值後元素會上浮（初始狀態下left、right都在middle下方），100%則保證了元素處於div-container的最左端，此時只需設定left：-200px（意思是向左移動200px，而這個200px恰好就是container的左padding）。

下面再說說右邊的。

margin-left：負值的效果和上述一致。現在問題來了，-220px是什麼鬼？我將去掉margin-left的程式碼檢視放在下面：

這是去掉right的檢視：


所以，我們可以很容易的發現：margin-left程式碼的意思是right-div移到container的最右邊，right的作用與left那邊的效果是一樣的。而且細心的讀者不難發現，margin-left的數值恰好是container的寬度！（感興趣的讀者不妨利用控制檯更改margin-left的數值，會更加容易理解上邊的內容）

正確程式碼：

<style type="text/css">
        *{margin: 0;padding: 0;}
        body{min-width: 700px;}
        .header,
        .footer{
            border: 1px solid #333;
            background: #ddd;
            text-align: center;
            height: 40px;
            line-height: 40px;
        }
        .left,
        .middle,
        .right{
            position: relative;
            float: left;
            min-height: 130px;
        }
        .container{
            padding:0 220px 0 200px;
            overflow: hidden;
        }
        .left{
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: #f00;
        }
        .right{
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background: #30a457;
        }
        .middle{
            width: 100%;
            background: #1a5acd;
            word-break: break-all;

        }
        .footer{
            /*clear: both;*/
        }
    </style>
</head>
<body>
<div class="header">
    <h4>header</h4>
</div>
<div class="container">
    <div class="middle">
        <h4>middle</h4>
        <p>
           這是頁面的主體內容
        </p>
    </div>
    <div class="left">
        <h4>left</h4>
        <p>
           這是頁面的左邊
           
        </p>
    </div>
    <div class="right">
        <h4>right</h4>
        <p>
           這是頁面的右
        </p>
    </div>
</div>
<div class="footer">
    <h4>footer</h4>
</div>

4.聖盃佈局（講真，這兩個好像沒有區別）。

我希望讀者能夠對css部分的設定有足夠的重視。

sub就是左邊的div樣式，extra是右邊的div樣式。這裡的main-inner是中間部分。

就像是鳥的身體和雙翅。

    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{min-width: 700px;}
        .header,
        .footer{
            border: 1px solid #333;
            background: #ddd;
            text-align: center;
            height: 40px;
            line-height: 40px;
        }
        .sub,
        .main,
        .extra{
            float: left;
            min-height: 130px;
        }
        .sub{
            margin-left: -100%;
            width: 200px;
            background: #f00;
        }
        .extra{
            margin-left: -220px;
            width: 220px;
            background: #1a5acd;
        }
        .main{
            width: 100%;
        }
        .main-inner{
            margin-left: 200px;
            margin-right: 220px;
            min-height: 130px;
            background: #30a457;
            word-break: break-all;
        }
        .footer{
            clear: both;
        }
    </style>
</head>
<body>
<div class="header">
    <h4>header</h4>
</div>
<div class="main">
    <div class="main-inner">
        <h4>main</h4>
        <p>
            這是頁面的主體內容
        </p>
    </div>
</div>
<div class="sub">
    <h4>sub</h4>
    <p>
        這是頁面的左邊
    </p>
</div>

<div class="extra">
    <h4>extra</h4>
    <p>
        這是頁面的右邊
    </p>
</div>
<div class="footer">
    <h4>footer</h4>
</div>
</body>
</html>

補充：好了前面的關子買的有點久了，現在來說說我的探索成果吧！首先，讀者必須明確點佈局是從左往右的。（這句話很重要）

那麼，首先我們需要在最右邊建設一個div，作為其他兩個元素的小鏡子。

再來設定左邊和中間的樣式：

不知道大家有沒有注意到middle的寬度從50%改為75%，這是因為middle的佈局還是以左邊為參考點的（也就是小鏡子），而它在左邊多出的那25%將會被我們的left光榮的覆蓋。由此我們就玩成了敲打。（實際上這只是本人鑽了牛角尖，剛才發現設定右浮動更簡單，嗚嗚~）

相關推薦

css佈局——行列基礎佈局

一、基礎行佈局程式碼：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title>

這可能是最全面的CSS基礎佈局文章

  前言 這是一篇基礎CSS佈局的內容，可能內容比較的簡單。但是很適合查缺補漏的閱讀。 這篇文章來自於網際網路（掘金：Sweet_KK）。我簡單的自己跑了一遍，添加了一些自己的看法，刪了一些個人感覺不重要的，重新排版了一下。 當然，如果原作者感覺不妥，私信就刪

基礎面試題之 —— CSS實現簡單頁面佈局的幾種方法

頁面佈局是前端面試中CSS部分經常考到的問題，本文列舉幾種簡單頁面佈局的方法： 絕對定位 + margin float inline-block flex 附加：響應式佈局 其中幾種方法在CSS程式碼上有相似之處，也有侷限或是需要特殊注意的地方，下文具體指出。

css佈局之浮動佈局（float）

CSS佈局模型 流動佈局 流動佈局,為網頁自帶佈局方式也就是說網頁預設情況下就是採用流動佈局方式來完成對HTML元素的佈置。   流動佈局主要有2大特徵： - 從塊級元素上來說,塊級元素在網頁上預設採用從上到下的順序來完成分佈，每個塊級元素獨自一行，不能與其它的任何

《精通DIV.CSS網頁樣式與佈局》.pdf

書籍簡介： 隨著web2.0大潮的席捲而來，傳統的表格佈局模式逐漸被div+css的設計模式所取代。使用div搭建框架，使用css定製、改善網頁的顯示效果，已經成為一個網頁設計的標準化模式。對於網頁設計人員來說，div+css已經成為必須掌握的技術。 　　《精通div+css網頁樣式與佈局

盒模型佈局相關-基礎與語法

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 21.0px; font: 18.0px "Yuanti SC"; color: #000000; background-color: #ffffff } span.s1 { } 佈局相關屬性 p.p

css常用左側固定右側自適應佈局兩欄佈局的方法

話不多說直接上程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

【筆記】學習CSS佈局01——沒有佈局

                                          &nb

Ionic—APP基礎佈局開發

一.專案開發目標 目標：開發一款論壇相關的APP 二.tab元件佈局以及圖示選擇 page/tabs資料夾下有對應icon的設定 圖示選取的網站:ionicframework.com/docs/ionicons,將對應的icon名字拷貝過來放

css複習及flex佈局

flex佈局是用來為盒裝模型提供最大的靈活性，任何一個容器都可以指定為flex佈局 設為flex佈局的子元素的float clear 和vertical-align等屬性將失效 只要將display 設為flex即可 採用flex佈局的元素，稱為flex容器flex containe

flutter 基礎佈局 四

MaterialApp  主題專用 Material  一張白紙 Scaffold  腳手架 有導航欄 有body crossAxisAlignment: CrossAxisAlignment.center, 文字對齊方式 MainAxisAl

【佈局】學習CSS佈局12——浮動佈局例子

完全使用 float 來實現頁面的佈局是很常見的。這裡有一個我之前用 position 實現的佈局例子，這次我使用 float 實現了它。 nav { float: left; width: 200px; } section {

【CSS】Sticky Footer 佈局

什麼是 Sticky Footer 佈局？ Sticky Footer 佈局是一種將 footer 吸附在底部的CSS佈局。 footer 可以是任意的元素，該佈局會形成一種當內容不足，footer 會定位在視口的最低部，當內容充足，footer 會緊跟在內容後面的效果。  

css-經典三欄佈局

學了前端這麼久，還從未認真研究過佈局，一直都是自己設計或者模仿著別人的網頁。這次在網上看了多個部落格，文章。 瞭解常見的三欄佈局，所謂三欄佈局，無非就是左，中，右三欄水平排列。 在這裡的總結主要以程式碼的形式表示出來，還有一些我看到的講解比較好的部落格連結：

Kotlin入門(19)Android的基礎佈局

線性佈局 線性佈局LinearLayout是最常用的佈局，顧名思義，它下面的子檢視像是用一根線串了起來，所以其內部檢視的排列是有順序的，要麼從上到下垂直排列，要麼從左到右水平排列。排列順序只能指定一維方向的檢視次序，可是手機螢幕是個二維的平面，這意味著還剩另一維方向需要指定

Android基礎(一)佈局1.常用佈局

一.線性佈局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tool

CSS響應式佈局--三欄佈局例項演示及優缺點詳解

學前端的小夥伴們都知道，CSS學起來很容易，但是要學精通了卻特別難。在前端市場需求火熱的今天，競爭相當激烈，光是會使用或者一兩種實現的方式是遠遠不夠的。不僅如此，還要深知各種解決方案的優劣，對各種特性瞭如指掌。 本次介紹的內容是CSS響應式佈局--三欄佈局 這是一道前

移動app設計當中常見8種基礎佈局方案

在實際的app設計中，要考慮資訊優先順序和各種佈局方式的契合度，採用最合適的佈局設計方案，來提高移動產品的易用性和互動體驗。 今天25學堂的小編給大家分享的8種常見移動端的基礎佈局方案，算是給大家溫故而知新吧！   常見的APP佈局乾貨： 1、 APP細節考

css彈性盒子 | flex佈局講解 | 例項

今天介紹常見佈局的Flex寫法。 你會看到，不管是什麼佈局，Flex往往都可以幾行命令搞定。 一、骰子的佈局 骰子的一面，最多可以放置9個點。 下面，就來看看Flex如何實現，從1個點到9個點的佈局。你可以到codepen檢視Demo。 如果不加說明

css實現兩欄佈局，左側固定寬，右側自適應的七種方法

一個面試會問的問題，如何實現兩個盒子，左側固定寬度，右側自適應。 下面是實現的其中方法： 1、利用 calc 計算寬度的方法 css程式碼如下： .box{overflow: hidden;height: 100px;margin: 10px 0;} .box&