css布局

番茄西紅柿發布于2019-04-23 11:52 / 3256人閱讀

摘要：所以，項目之間的間隔比項目與邊框的間隔大一倍。項目的縮小比例，默認為，即如果空間不足，該項目將縮小。在分配多余空間之前，項目占據的主軸空間。后兩個屬性可選。默認值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。

css中的三種基本定位機制

　　a.普通文檔流

　　b.定位：相對定位 relative

　　　　　　絕對定位 absolute

　　　　　　固定定位 fixed

　　c.浮動

1.普通流中，元素位置由文檔順序和元素性質決定，塊級元素從上到下依次排列，框之間的垂直距離由框的垂直margin值計算得到，行內元素在一行中水平布置

2.相對定位看作普通流的一部分，移動后的元素仍占據原來的位置，移動元素會導致他覆蓋其他的框

3.絕對定位相對于已定位的最近的祖先元素，絕對定位脫離普通流

4.固定定位是相對于瀏覽器窗口的定位

5.浮動的元素可以左右移動，直到他的外邊框邊緣碰到包含自己的框或者另一個浮動框的邊緣

6.浮動的元素脫離普通文檔流

7.行內元素和行內塊元素會圍繞浮動框排列，塊元素會被覆蓋

display Flex 容器

1.Flex容器

flex-direction　容器內項目的排列方向(默認橫向排列)　　

flex-wrap　　容器內項目換行方式

　　flex-flow　　以上兩個屬性的簡寫方式

　　justify-content　項目在主軸上的對齊方式

　　align-items　　項目在交叉軸上如何對齊

　　align-content　　定義了多根軸線的對齊方式，如果項目只有一根軸線，該屬性不起作用

flex-direction

1 .box { 2 flex-direction: row | row-reverse | column | column-reverse; 3 }

屬性可選值的范圍為row(默認)沿水平主軸由左向右排列、row-reverse沿水平主軸由右向左排列、column沿垂直主軸右上到下和column-reverse。

flex-wrap 1 .box{ 2 flex-wrap: nowrap | wrap | wrap-reverse; 3 }

屬性可選值的范圍為nowrap(默認)不換行、wrap換行（第一行在上方）和wrap-reverse（你懂的~）

flex-flow

1 .box { 2 flex-flow: || ; 3 }

寫法屬性中，將上述兩種方法的值用||連接即可

justify-content

1 .box { 2 justify-content: flex-start | flex-end | center | space-between | space-around; 3 }

項目在主軸上的對齊方式(主軸究竟是哪個軸要看屬性flex-direction的設置了)

flex-start：在主軸上由左或者上開始排列

flex-end：在主軸上由右或者下開始排列

center：在主軸上居中排列

space-between：在主軸上左右兩端或者上下兩端開始排列

space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

align-items

1 .box { 2 align-items: flex-start | flex-end | center | baseline | stretch; 3 }

這里面直接上圖片說明的更清楚一些

align-content

1 .box { 2 align-content: flex-start | flex-end | center | space-between | space-around | stretch; 3 }

以上介紹完了容器中的屬性，下面說一下容器中項目的屬性：

order　　項目的排列順序。數值越小，排列越靠前，默認為0。

flex-grow　　項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

flex-shrink　　項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

flex-basis　　在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

flex　　是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

align-self　　允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

order

1     .item {
2       order: ;
3     }

flex-grow

1     .item {
2       flex-grow: ; /* default 0 */
3     }

flex-shrink

1     .item {
2       flex-shrink: ; /* default 1 */
3     }

flex-basis

1     .item {
2       flex-basis:  | auto; /* default auto */
3     }

flex

1     .item {
2       flex: none | [  ? ||  ]
3     }

align-self

1     .item {
2       align-self: auto | flex-start | flex-end | center | baseline | stretch;
3     }

容器屬性和項目屬性是可以配合使用的，用法類似于CSS的行內式和嵌入式的道理一樣。希望你可以在實際應用中熟練使用。

GPU云服務器云服務器 css布局 css布局教程學習css布局 div布局布局html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1268.html

CSS及布局

摘要：經過半年的打磨，正式發布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0
CSS 常用布局在小程序中的應用

摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。具體實現，可以使用微信小程序的單位，以及使用定位浮動布局來實現。 CSS 常用布局在小程序中的應用所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。正常文...

garfileo 2019-08-30 11:25 評論0 收藏0
CSS 常用布局在小程序中的應用

摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。具體實現，可以使用微信小程序的單位，以及使用定位浮動布局來實現。 CSS 常用布局在小程序中的應用所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。正常文...

CoderDock 2019-08-30 15:44 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0