前端開發中的幾大布局的詳細總結

2021-09-02 02:36:30 字數 1916 閱讀 5724

一，靜態布局（static layout）

二，彈性布局（elastc layout）

是css3引入的布局方式，其中flex-flow是flex-direction和flex-wrap屬性的簡寫方式，語法如下：

flex-flow:


< flex-direction>


||< flex-wrap>


flex-direction: row（初始值） | row-reverse | column | column-reverse


flex-wrap: nowrap（初始值） | wrap | wrap-reverse
兩者結合起來即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個方向上的顯示方式

三，自適應布局（adaptive layout）

四，流式布局（liquid layout）

五，響應式布局(responsive layout)

< meta name=


"viewport" content=


"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"


> 


name=


"viewport" 名稱=檢視
width=device-width 頁面寬度=裝置寬度(可以理解為獲取你手機的螢幕寬度)

initial-scale - 初始的縮放比例

minimum-scale - 允許使用者縮放到的最小比例

maximum-scale - 允許使用者縮放到的最大比例

user-scalable - 使用者是否可以手動縮放

2，每個螢幕解析度下面會有乙個布局樣式，同時位置會變而且大小也會變，就會用到**查詢（media query）

**查詢是響應式布局的核心。

@media screen and(min-width:360px)


}
/**ipad**/


@media only screen and (min-width:768px) and(max-width:1024px){}


/**iphone**/


@media only screen and (width:320px) and (width:768px)
例如下面的示例會隨著裝置尺寸的變換顏色發生變化

<


!doctype html>


"pc,mobile"


>


"cache-control" content=


"no-transform "


>


"screen"


>


@media screen and


(max-width:


600px)


} @media screen and


(min-width:


600px)


and(max-width:


800px)


} @media screen and


(min-width:


800px)


}.test


<


/style>


<


/head>


="test"


>


<


/div>


<


/body>


<


/html>

前端開發中布局形式

我們可以把網頁理解成是由乙個個盒子排列組合而成的，那麼盒子之間又是怎麼排列布局的呢？網頁常見的布局方式大概有五種 普通文件流布局 浮動布局 float 絕對布局 absolute 彈性布局 flex 網格布局 grid 普通文件流布局 預設的布局方式，由塊級元素 display block 和行內元...

Flex布局 flex布局的詳細用法總結

tips 行內元素也可以使用 flex 布局 box 注意 flex 布局以後，子元素的float clear和vertical align屬性將失效 概念 採用 flex 布局的元素，稱為 flex 容器，簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案，簡稱 專案 六個屬性 1....

OPC Server開發的幾大境界

opc server 的開發相對 opc client 更加困難 opc server 的開發主要應用 技術 主要應用書籍為潘愛民寫的 入門和應用 大量的技術有很大的可重用性 在開發完乙個程式後 基本上所有的東東都可以被重用 並且重新發布。開發方式有三種 1。簡單的 就是應用已經有的如dde to ...