流式布局筆記和源碼

⑴ android怎麼實現不同類型的流式布局

Android中常見的熱門標簽的流式布局的實現
http://blog.csdn.net/jdsjlzx/article/details/45042081?ref=myread

⑵ 什麼是流式布局，救急！！！！

JAVA 中panel的默認布局就是流式布局，類就是FlowLayout.所謂流式布局意思是從左到右對該容器裡面的控制項進行布局，當一行不能容納時候自動換行。
該布局是從左到右，然後從上到下。JFrame的默認布局就是BorderLayout.這個布局跟流式布局不同。分為中南西北中，五種控制項位置擺放方式。
可以通過setLayout(new FlowLayout())方式把布局管理器設置為流式布局

⑶ 流式布局是什麼意思

流式布局就像在學校食堂排長隊打飯一樣，來一個就跟在後面；
網式布局就像教室里已經排好的座位一樣，一行一列地固定了你的位置；

⑷ css的固定，流式，彈性布局

都有的，可以根據項目的需求不通過產生變化。
不過與我而言更喜歡流式布局，在適應屏幕上更好，用戶體驗也好，像網路阿里用的大多是混合型

⑸ 靜態、自適應、流式、響應式四種網頁布局有什麼區別

1、靈活性不同：

靜態布局：毫無靈活性可言，目前已逐漸被淘汰。

自適應布局：靜態布局的升級版，因其強大的靈活性，已逐漸成為高端網頁的代名詞。

流式布局：靈活性更高，可適用於其他三種網站布局。

響應式布局：自適應布局的升級版，響應式網站要普遍適應市面上各類屏幕，開發難度和工作量都是非常大的，開發價格自然比普通網站高。

2、設計方法不同：

靜態布局：居中布局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分。

自適應布局：使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。

流式布局：使用百分比定義寬度，高度大都是用px來固定，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。

響應式布局：媒體查詢+流式布局。使用@media媒體查詢和網格系統配合相對布局單位進行布局，就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同設備返回不同樣式的技術統稱。

(5)流式布局筆記和源碼擴展閱讀：

靜態、自適應、流式、響應式四種網頁布局的特點概括

1、靜態布局：即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。

2、流式布局：頁面元素的寬度按照屏幕解析度進行適配調整，但整體布局不變。這就導致如果屏幕太大或者太小都會導致元素無法正常顯示。

3、自適應布局：分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。

4、響應式布局：分別為不同的屏幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。

⑹ div中的流式布局是那個屬性啊

讓所有的div都浮動起來,就是一個流式布局.
所有inline屬性的元素都是流式布局, 浮動後的元素都是inline-block屬性的,也一樣...

⑺ 前端常見布局方式

常見的布局方式

常見的布局這么幾種單列水平居中布局, 一列定寬一列自適應布局, 兩列定寬一列自適應布局, 兩側定寬中間自適應三列布局。

一列定寬一列自適應

定位布局

左邊的寬度寫死，右邊盒子使用定位拉伸法實現，left等於左邊盒子的寬度，right等於0

.left-box{ width:200px;   }

.right-box{  position:absolute; left:200px; right:0; }

或者左邊的定位寫死寬度，右邊的寫padding-left等於左邊的寬度（常用一點）

.left-box{ width:200px;  position: fixed; height:100%; }

.right-box{  padding-left:200px;}

浮動布局

左邊的寬度寫死並且浮動，右邊盒子寫overflow:hidden;利用的是創建一個新的BFC（塊級格式化上下文）來防止文字環繞的原理來實現的。BFC就是一個相對獨立的布局環境，它內部元素的布局不受外面布局的影響

.left-box {

        width: 200px;

        height: 150px;

        float: left;

        background: #f22;

}

.right-box {

        height: 200px;

        overflow: hidden;

        background: #cff;

 }

兩列定寬一列自適應上面的布局方式同樣適用

常見的三列布局一般使用聖杯布局和雙飛翼布局。

聖杯布局和雙飛翼布局

兩者都屬於三列布局，是一種很常見的頁面布局方式，

三列一般分別是子列、主列和附加列，其中子列一般是居左的導航，且寬度固定；主列是居中的主要內容，寬度自適應；附加列一般是廣告等額外信息，居右且寬度固定。

聖杯布局

<div class="container"> 

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

    <div class="sub"></div> 

    <div class="extra"></div> 

</div>

.container { 

    padding-left: 210px;

    padding-right: 190px;

}

.main { 

    float: left; 

    width: 100%;

    height: 300px;

}

.sub { 

    position: relative; 

    left: -210px;

    float: left; 

    width: 200px;

    height: 300px;

    margin-left: -100%;

}

.extra { 

    position: relative; 

    right: -190px;

    float: left; 

    width: 180px;

    height: 300px;

    margin-left: -180px;

}

雙飛翼布局

<div class="main-wrapper"> 

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

</div>

<div class="sub"></div> 

<div class="extra"></div> 

.main-wrapper { 

    float: left; 

    width: 100%;

}

.main { 

    height: 300px;

    margin-left: 210px;

    margin-right: 190px;

    background-color: rgba(255, 0, 0, .5); 

}

.sub { 

    float: left; 

    width: 200px;

    height: 300px;

    margin-left: -100%;

    background-color: rgba(0, 255, 0, .5); 

}

.extra { 

    float: left; 

    width: 180px;

    height: 300px;

    margin-left: -180px;

    background-color: rgba(0, 0, 255, .5); 

}

倆種布局方式都是把主列放在文檔流最前面，使主列優先載入。

兩種布局方式在實現上也有相同之處，都是讓三列浮動，然後通過負外邊距形成三列布局。

兩種布局方式的不同之處在於如何處理中間主列的位置：聖杯布局是利用父容器的左、右內邊距定位；雙飛翼布局是把主列嵌套在div後利用主列的左、右外邊距定位。

其他的話還有

flex布局

Flexbox又叫彈性盒模型。它可以簡單使用一個元素居中（包括水平垂直居中），可以讓擴大和收縮元素來填充容器的可利用空間，可以改變源碼順序獨立布局，以及還有其他的一些功能。

Flex布局是我最喜歡的布局，合理使用它能夠大大減少布局方面的工作, 例如以上列舉的三列布局也可以使用flex輕松實現。此外在移動端使用flex也比較常見。

響應式布局

網頁可以自動識別設備屏幕寬度，根據不同的寬度採用不同的CSS的樣式，從而達到兼容各種設備的效果。

響應式布局使用媒體查詢(CSS3 Media Queries), 根據不同屏幕解析度採用不同CSS規則

流式布局

流式布常見的就是bootstrap了它提供了一套響應式，移動優先的流式柵格系統(grid system)，將屏幕分成12列來實現響應式的。它的實現原理非常簡單，Media Query加上float布局