国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css布局方法

LMou / 2846人閱讀

摘要：在正常布局中位于該浮動元素之下的內(nèi)容，此時會圍繞著浮動元素，填滿其右側(cè)的空間。這樣所有元素就會緊貼左邊浮動，如果想要左右浮動，就可以把最右邊的元素設(shè)置為這樣就可以實現(xiàn)左右布局。谷歌搜索可以設(shè)置一個元素的漸變色，來使一個元素包含多種顏色。

1、左右布局

這就要說到一個屬性float，使用float: left;就可以讓浮動元素 會脫離正常的文檔布局流，并吸附到其父容器的左邊。在正常布局中位于該浮動元素之下的內(nèi)容，此時會圍繞著浮動元素，填滿其右側(cè)的空間。但是，子類使用float來使元素并排，那么父類就需要使用clearfix來防止子元素下方的標簽浮動上來貼和。

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

這樣所有元素就會緊貼左邊浮動，如果想要左右浮動，就可以把最右邊的元素設(shè)置為float: right;這樣就可以實現(xiàn)左右布局。

2、左中右布局

左中右布局，父元素有三個子元素，首先先把三個子元素浮動并排起來如左右布局一樣，然后給后兩個元素都設(shè)置一個margin左邊距，父元素設(shè)置水平居中;就可以實現(xiàn)左中右布局

    
    
  1. 所有
    2. 
    
  2. 框架
    3. 
    
  3. 原生 JS&CSS
    4. 

li{
    float: left;
    margin-left: 40px;
}
ol {
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
}
3、水平居中

對于行內(nèi)元素(inline)：text-align: center;

對于塊級元素(block)：設(shè)置寬度且 marigin-left 和 margin-right 是設(shè)成 auto

對于多個塊級元素：對父元素設(shè)置 text-align: center;，對子元素設(shè)置 display: inline-block;；或者使用 flex 布局

4、垂直居中

對于行內(nèi)元素(inline)設(shè)置上下 pandding 相等；或者設(shè)置 line-height 和 height 相等

對于塊級元素(block)，父元素需使用相對定位：子元素使用絕對布局 top: 50%;，再用負的 margin-top 把子元素往上拉一半的高度

5、其他小技巧

box-shadow可以給塊設(shè)置陰影，看起來更立體，谷歌搜索css shadow generator可以自己調(diào)整樣式。

transition: all 0.3s;動畫屬性，可以給所有變化加入過渡動畫和過渡時間。

cursor: pointer;鼠標懸停時I型可以變成手指點擊形狀

border: 1px solid red; border邊框可以用來調(diào)試標簽的所占位置。

當設(shè)置display: inline-block; 需要加上vertical-align: top; 來去除底層多出的空間。

background-image: url(../img/girl.jpg); 設(shè)置背景圖片background-position: center center;可以使背景圖片垂直水平居中， background-size: cover;使背景圖片可以按比例縮放。

谷歌搜索css linear-gradient generator可以設(shè)置一個元素的漸變色，來使一個元素包含多種顏色。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113495.html

相關(guān)文章

  • 前端-CSS3&H5

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

    xiaolinbang 評論0 收藏0

  • CSS三欄布局的經(jīng)典實現(xiàn)方法

    摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過來實現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節(jié)和異同。 三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網(wǎng)頁內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

    neuSnail 評論0 收藏0

  • CSS三欄布局的經(jīng)典實現(xiàn)方法

    摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過來實現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節(jié)和異同。 三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網(wǎng)頁內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

    Forelax 評論0 收藏0

  • CSS及布局

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

    jaysun 評論0 收藏0

  • CSS三欄布局的四種方法

    摘要：浮動代碼如下注意元素次序代碼如下左欄左浮動中間自適應右欄右浮動這種方式代碼足夠簡潔與高效，也容易理解后記四種方法其實只有圣杯布局和雙飛翼布局較難理解，但實際上理解了圣杯布局，雙飛翼布局自然就理解了。 前言 總括： 不管是三欄布局還是兩欄布局都是我們在平時項目里經(jīng)常使用的，也許你不知道什么事三欄布局什么是兩欄布局但實際已經(jīng)在用，或許你知道三欄布局的一種或兩種方法，但實際操作中也只會依賴那...

    RobinQu 評論0 收藏0

發(fā)表評論

0條評論

LMou

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<