css--布局

Nino 發布于2019-08-30 12:43 / 2269人閱讀

摘要：布局方式布局的傳統解決方案，基于盒狀模型，依賴屬性屬性屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。關于布局，當然肯定還有更多的更好的方法。

接觸前端開發也有半年了，每當需要將一個空白的紙，”畫“成一個頁面的時候，總會出現不知所措的幾秒鐘。除了因為對css中的各種屬性的不熟練之外，更難為人的是怎么簡練的將這些屬性排列組合起來。其實靜下心來，仔細想一想，無非就是整體-->局部這么個思路。所謂整體，就是頁面的局，局部就是各自的整體到局部，再加上一些展示性的屬性的組合的這么個過程。考慮好瀏覽器的兼容性，做一個盡量完美的布局，是寫好頁面樣式的關鍵一步。

可是，我總是希望能用盡量少的代碼，來表現盡量多的內容，但是，如果不考慮其他因素，這一點很容易做到。比如，我們要分列，flex足矣。但其他因素終歸是必須要顧及的。

布局方式

布局的傳統解決方案，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。

第一標準流布局

第二浮動布局

第三定位布局

案例一--水平居中

從一個最簡單的居中布局說起

就可以有好多種實現方式，

比如第一種inline-block+text-align的常見方式：

.child{display:inline-block;}
.parent{text-align:center;}

這種方法兼容性比較好，雖然ie6,7不支持inline-block,但是我們可以通過

display:block;zoom:1 近似于 inline-block

第二種table+margin的方式,同樣是上例的結構：

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

這種方式需要的css代碼很簡單，對ie8以上也能很好的支持，但是由于ie6,7對display：table不認，但是我們可以將結構改成table的結構也能達到效果。

第三種方式采用absolute+trasnform的方式

.parent{position:relative;}
.child{position:absolute;left:50%;transform:translateX(-50%);}

這種方式關鍵的一點是利用transform屬性，旋轉自身的50%。達到居中的效果。但是ie6,7,8均不能很好的支持。

第三種方式是通過flex+justify-content的組合實現的

.parent{display:flex;justify-content:center;}

這種方同第二種類似，css代碼比較簡單，這里是不需要對子元素進行任何的設置，這是由于flex的子元素默認是flex-item,寬為元素寬。關于flex的詳細內容，可以參考這個介紹flex布局
當然，這里的

justify-content:center;

也有替代的方法，可以通過

.child{margin:0 auto;}

實現相同的效果。

案例二--垂直居中

垂直居中，這里總結三種常見的方式

利用table-cell

.parent{display:table-cell;vertical-align:middle;}

這種方式兼容ie8及以上，對ie6,7可以通過前面介紹的，改成table的結構來兼容。

借助定位和transform屬性

.parent{position:relative;}
.child{position:absolute;top:50%;transform:translateY(-50%)}

css3的flex

.parent{display:flex;align-item:center;}

案例三--水平垂直居中

水平垂直居中就可以綜合考慮前面的水平居中的一些方法和垂直居中的一下方法了。兼容性當然跟前面考慮的原因也類似，這里總結了三種。

基本水平居中方法加table-cell

.parent{text-align:center;display:table-cell;vertical-algin:center;}
.child{display:inline-block;}

定位+ transform屬性

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

flex

.parent{display:flex;justify-content:center;align-items:center;}

這種情況下，我們也是不需要對.child進行特殊的設置就可以達到垂直水平居中的效果。

關于布局，當然肯定還有更多的更好的方法。而且，從更宏觀的角度，還有對于全局的一個布局，比如top固定，或者一部分定寬，一部分自適應等等要求，這里僅僅是總結了一下常見的，這個需要不斷的在實踐中進行摸索和改進，css的學習不斷的累積很重要。

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115015.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