成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

css布局方法

LMou / 2849人閱讀

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

1、左右布局

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

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

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

2、左中右布局

左中右布局，父元素有三個(gè)子元素，首先先把三個(gè)子元素浮動(dòng)并排起來(lái)如左右布局一樣，然后給后兩個(gè)元素都設(shè)置一個(gè)margin左邊距，父元素設(shè)置水平居中;就可以實(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、水平居中

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

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

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

4、垂直居中

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

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

5、其他小技巧

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

transition: all 0.3s;動(dòng)畫(huà)屬性，可以給所有變化加入過(guò)渡動(dòng)畫(huà)和過(guò)渡時(shí)間。

cursor: pointer;鼠標(biāo)懸停時(shí)I型可以變成手指點(diǎn)擊形狀

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113495.html

相關(guān)文章

  • 前端-CSS3&H5

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

    xiaolinbang 評(píng)論0 收藏0

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

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

    neuSnail 評(píng)論0 收藏0

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

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

    Forelax 評(píng)論0 收藏0

  • CSS及布局

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

    jaysun 評(píng)論0 收藏0

  • CSS三欄布局的四種方法

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

    RobinQu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

LMou

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<