總結佈局用法

阿新 • • 發佈：2018-11-19

浮動佈局：

dom文件

<div class="container">
        <div class="wrap clearfix">
            <div class="box1"></div>
            <div class="box2" 
></div>
        </div>
 </div>

1：

固定佈局：

實現如圖

樣式:

<style>
.container{
    width: 600px;
    background-color: #DDF3F7;
}
.wrap{
    padding:20px;
    overflow: hidden;
}
.box1{
     float: left;
     width: 200px;
     height:300px;
     background-color 
: #ccc;
}
.box2{
     float: right;
     width: 350px;
     height:300px;
     background-color: #ccc;
}

.clearfix:after{
    clear: both;
    display:table;
    
}
</style>

關鍵點：box1 和box2設定固定width,浮動，

2：流體佈局

<style>
.container{
    width: 600px;
    background-color: #DDF3F7 
;
}
.wrap{
    padding:20px;
    overflow: hidden;
}
.box1{
     float: left;
     width: 200px;
     height:300px;
     background-color: #ccc;
}
.box2{
      
     margin-left:220px; 
     height:300px;
     background-color: #ccc;
}

.clearfix:after{
    clear: both;
    display:table;
    
}
 .clearfix{
     *zoom:1;
 }

</style>

和固定佈局對比：

box1 float left 設定width

box2: marign-left 為box1.width (效果和固定效果一樣，不截圖了)

3：浮動與兩側皆自適應的流體佈局

樣式

<style>
.container{
    width: 600px;
    background-color: #DDF3F7;
}
.wrap{
    padding:20px;
    overflow: hidden;
}
.box1{
     float: left;
     margin-right:20px;
     height:300px;
     background-color: #ccc;
}
.box2{
     display:table-cell;
     width:auto;
     height:300px;
     background-color: #ccc;
}

.clearfix:after{
    content:'';
    clear: both;
    display:table;
    
}
 .clearfix{
     *zoom:1;
 }

</style>

注意點：1、box1 float left

2、margin-right:某px;

box2  width auto,    display:table-cell;

3、 box1和box2 必須有內容。

效果如圖

4.右浮動，改變dom位置的流體佈局：

樣式：

<style>
.container{
    width: 600px;
    background-color: #DDF3F7;
}
.wrap{
    padding:20px;
    overflow: hidden;
}
.box1{
     float: right;
     width:100px;
     height:300px;
     background-color: #ccc;
}
.box2{
     margin-right:120px;
     height:300px;
     background-color: #ccc;
}

.clearfix:after{
    content:'';
    clear: both;
    display:table;
    
}
 .clearfix{
     *zoom:1;
 }

</style>

box1設定width float right

box2 margin-right:box1.width;

5.左浮動，不改變dom位置的流體佈局寫法

樣式

<style>
.container{
    width: 600px;
    background-color: #DDF3F7;
}
.wrap{
    padding:20px;
    overflow: hidden;
}
.box1{
    
     width: 100%;
     float:left;
     height: 300px;
     background-color: #ccc;
}
.box2{
     
     width: 56px;
     float:left;
     margin-left:-56px;
     height:300px;
     background-color: #000;
}

.clearfix:after{
    content:'';
    clear: both;
    display:table;
    
}
 .clearfix{
     *zoom:1;
 }

</style>

關鍵點：box1 width 100% float left

box2 float left width 某px margin-leftf 某px

如下圖

彈性佈局

對於下面html

<div>
        <p>榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩</p>
        <p>榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩</p>
        <p>榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩榴蓮披薩</p>
</div>

一個div 加三個p的塊級元素

加些基本樣式

p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}

顯示如下

給外層div加個樣式就變成

div{
    display:-webkit-box;
    display:flex;
}

現在每一個p元素都變成一個box了

這種彈性佈局還能

justify-content:flex-end 類似的對齊方式樣式不詳述。

補充：

使用flex九宮格佈局：

<div class="parent">
	<div class="row">
	    <div class="item"></div>
	    <div class="item"></div>
	    <div class="item"></div>
	</div>
	<div class="row">
	    <div class="item"></div>
	    <div class="item"></div>
	    <div class="item"></div>
	</div>
	<div class="row">
	    <div class="item"></div>
	    <div class="item"></div>
	    <div class="item"></div>
	</div>
</div>

　　樣式：

.parent{display: flex; flex-direction: column;width: 300px;}
.row{height: 100px; display: flex;border: 1px solid red;}
.item{width: 100px; background-color: #ccc;border: 1px solid red;}

使用table九宮格佈局：

樣式

.parent{display: table; table-layout: fixed; width: 100%;}
.row{display: table-row;}
.item{display: table-cell; width: 33.3%; height: 200px; border: 1px solid red;}

　　結果截圖

提供一種更加有效的方式來對一個容器中的條目進行排列、對齊和分配空白空間。

響應式佈局：

佈局特點：每個螢幕解析度下面會有一個佈局樣式，即元素位置和大小都會變

設計方法：媒體查詢加流式佈局

通常使用 @media 媒體查詢和網格系統 (Grid System) 配合相對佈局單位進行佈局，實際上就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同裝置返回不同樣式的技術統稱。

單列布局：（最常見的佈局）

　下面用四種方法實現水平居中

1、

使用margin：0 auto來實現

.child{width:800px; margin: 0 auto;}

優勢是相容性好，但是需要設定寬度。

2、

.child{display: table; margin: 0 auto;}

優勢：不需要父容器parent，只需要對自身進行設定

<style>
.child{width:800px; 
       display: inline-block;
        background-color: red
      }
.parent{background-color: green;
        text-align: center;
        
       }
</style>
<div class="parent">2222
    <div class="child">22222222</div>
</div>

相容性好，但是需要設定父子容器

4、利用絕對定位

<style>
.child{ 
        background-color: red;
        position: absolute;
        left: 50%;
        
      }
.parent{background-color: green;
       position: relative;
        
       }
</style>
<div class="parent">2222
    <div class="child">22222222</div>
</div>

5 flex佈局也有兩種方法水平居中

　a.父容器

display: flex; justify-content: center;
b.
 父容器display: flex

 子容器中使用margin： 0 auto

<style>
.parent{background-color: green;
      display: flex; justify-content: center;
       }
.child{ 
        background-color: red;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);}
      }

</style>
<div class="parent">2222
    <div class="child">22222222</div>
</div>

垂直居中

這裡說的是子容器相對於父容器的上下垂直居中。

1 利用table table-cell實現

<style>
 .parent{display: table-cell;
         background-color: green;
         vertical-align: middle; 
         height: 400px;
 
       }
.child{ 
        background-color: red;
       }

</style>
<div class="parent">2222
    <div class="child">22222222</div>
</div>

2 flex來實現

<style>
 .parent{ 
       background-color: green;
       display: flex; 
       align-items: center;
       height: 50px;
        
       }
.child{ 
        background-color: red;
        }

</style>
<div class="parent">
    <div class="child">22222222</div>
</div>

3 絕對定位來實現

<style>
 .parent{ 
       background-color: green;
       position: relative;
       height:50px; 
        
       }
.child{ 
        background-color: red;
        position: absolute; 
        top: 50%;  
        transform: translateY(-50%);
       }

</style>
<div class="parent">
    <div class="child">22222222</div>
</div>

多列等分佈局

1、 flex實現

<style>
 .parent{ 
       background-color: green;
       display: flex; 
       height: 80px;
       width: 160px;
     
       }
.column{ 
        background-color: red;
        flex: 1;
        }
 .column + .column{
   margin-left:15px;
 }

</style>
<div class="parent">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
</div>

2、table實現

.parent{display: table; table-layout: fixed; width: 100%;}
.column{display: table-cell; padding-left: 20px;}

　例子（padding間距沒了？有點問題）

<style>
 .parent{ 
       background-color: green;
       display: table; 
       table-layout:fixed;
       width: 100%;
     
       }
.column{ 
        background-color: red;
        display: table-cell;
        padding-left:20px; 
        
        }
 
</style>
<div class="parent">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
</div>

3、float table

<style>
 .parent{ 
       background-color: green;
       height: 70px;
       width: 290px;
     
       }
.column{ 
        background-color: red;
        float: left; 
        width: 25%;
        padding-left: 20px; 
        box-sizing: border-box;
        
        }
</style>
<div class="parent">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
</div>

全屏佈局

利用絕對定位實現

<style>
     html,body,.parent{height: 100%; overflow: hidden;}
    .top{position: absolute; top: 0; left: 0; right: 0; height: 0; background-color: black; height: 100px;}
    .left{position: absolute; top: 100px; left: 0;bottom: 50px; width: 200px; background-color: orange;}
    .right{position: absolute; top: 100px; left: 200px; right: 0; bottom: 50px; background-color: grey; overflow: hidden;}
    .bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background-color: pink;}
</style>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>

差不多都在這了 ~ ^_^

總結佈局用法

前端基礎總結-佈局-css元素

一: 1css三大特性繼承性重疊性優先順序繼承性:text-/font-/line- a標籤的顏色不具有繼承性,標題標籤的字型大小不具有繼承性 !2元素類別塊元素:div,p,h1-h6 塊元素特徵:自動繼承直接父元素的寬度,

MySQL常用函式總結及用法

1、字串函式ascii(str) 返回字串str的第一個字元的ascii值(str是空串時返回0) mysql> select ascii('2'); 　　-> 50 mysql> select ascii(2);&nbs

CSS3 Flex 彈性模型佈局用法

https://caniuse.com/ 檢視 css某個屬性，相容情況 css3 flex佈局盒子模型 box-sizing:border-box; 預設: content-box &n

2018年9月-10月前端學習總結——佈局（css）

1.關於按鈕-使用偽類選擇器 :after/:before 引入情景在製作一個“更多”的按鈕時，由於運營所填充的按鈕是圖片形式，上面的“更多”兩字隨圖片的縮放而失去正常比例，在介面中看著極為不協調以及虛化問題。於是將運營上傳的按鈕圖片重新上傳為不帶文字只有背景圖的按鈕圖片

Android應用的LinearLayout中巢狀RelativeLayout的佈局用法

想將Button和ListView分別放在螢幕的一左一右。單純使用android:gravity和android:layout_gravity不成功。於是涉及到RelativeLayout。關鍵為：android:layout_alignParentRight="tr

rem自適應佈局用法及詳解

對於很多新同學來說，rem還是比較熟悉而又陌生的，熟悉呢是因為rem時常出現在耳邊，陌生呢是因為又搞不清原理。今天咱們一起來弄清楚rem到底是怎麼一回事！原理：css3規定：1rem的大小就是根元素<html>的font-size的值。通過設定

android: 橫豎屏切換總結-佈局改變和資料儲存

目錄：引言一、佈局問題二、重新載入問題三、Q：橫豎屏生命週期的切換有可能是什麼樣的？引言 Activity在Configuration變化（比如裝置橫豎屏切換）時會重啟Activity，即會執行onDestory()周期函式，然後onCreate()，重新建立Activity。這是因

jQuery,javascript寶典、知識總結、用法大全

1.清除屬性 $("#category").attr('style',''); 2.清空html標籤間內容 $("#replaceImgTit").html('圖片對應頻道：'); 3.jQue

CSS中float佈局用法

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。 float：none | left | right | inherit 預設值：non

git branch用法總結

如果命名參數 war blank org 2.6 重命名 scm Git branch git branch 不帶參數：列出本地已經存在的分支，並且在當前分支的前面加“*”號標記，例如： #git branch* master

numpy中一些常用函數的用法總結

num matrix 空白記錄維數補充結果創建 array 先簡單記錄一下，後續補充詳細的例子 1. strip()函數 s.strip(rm)：s為字符串，rm為要刪除的字符序列只能刪除開頭或是結尾的字符或者字符串。不能刪除中間的字符或是字符串當rm為空

String 經常用法最優算法實現總結（二）

lean ... itl min empty turn system then 實現 1. String getOrderedString(boolean isDuplicated, String … str) 說明： Orders all characters in

數組去重，call、apply、bind之間的區別，this用法總結

步驟 -- 之間 undefined 定義 ply clas turn 需要一、數組去重，直接寫到Array原型鏈上。 1 //該方法只能去除相同的數字不會去判斷24和‘24‘是不同的所有數字和字符串數字是相同是重復的 2 Array.prototype

JavaSE(一) IO類層次關系和各種IO流的用法總結

思想單位 out 9.png 什麽輸入流謝謝混亂體系　　　　　　今天把IO流的這一知點進行一下總結，因為在之前使用io流的時候，就只知道幾個重點常用的IO類，比如FileInputStream，BufferedInputStream(緩沖流)等等，但是不知道它處

iptables 用法及常用模塊總結

iptables 範圍著圖針對規則用法是否傳輸數據 net iptables傳輸數據包的過程：　　1. 當一個數據包進入網卡時，它首先進入PREROUTING鏈，內核根據數據包目的IP判斷是否需

netty用法總結

ram sed 解碼 coder fff ade med 長度 bte /**decoder和encoder，如果不需要解析，就使用系統的 * ch.pipeline().addLast(new StringDecoder()); * ch.pipeline().add

delphi CxGrid用法總結(63問)

重復註釋 ccid nvi while ren 數據顯示 ray 序號 1. 去掉cxGrid中臺頭的Box 解決：在tableview1的optionsview的groupbybox=false; **********************************

Oracle中Merge into用法總結（轉載）

字符存在 sin 刪除 ron mic 但是多個前段時間 Oracle中Merge into用法總結（出處：http://www.cnblogs.com/dongsheng/p/4384754.html）起因：　　前段時間，因為涉及到一張表的大數據操作，要同時

Java中static關鍵字用法總結

副本大括號跟著 rac clas main 靜態成員變量 abstract 全局變量 1. 靜態方法通常，在一個類中定義一個方法為static，那就是說，無需本類的對象即可調用此方法聲明為static的方法有以下幾條限制： · 它們僅能調用其他的sta

總結佈局用法

相關推薦