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

資訊專欄INFORMATION COLUMN

CSS day06

or0fun / 3071人閱讀

摘要：布局使用塊元素搭建網(wǎng)頁(yè)結(jié)構(gòu)改變默認(rèn)文檔流的方式，讓其在一行中顯示多列。

布局

使用塊元素搭建網(wǎng)頁(yè)結(jié)構(gòu),改變默認(rèn)文檔流的方式，讓其在一行中顯示多列?！咀寜K在一行中顯示】



    

    

    




    
    
  • 
    
  • 
    
  • 



浮動(dòng)布局
    float
        float:left/right
        可以使塊元素脫離當(dāng)前的文檔流
            1) 寬度如果沒(méi)有手動(dòng)指定那么就由內(nèi)容決定
            2) 多個(gè)浮動(dòng)元素在一個(gè)浮動(dòng)流中并排顯示，如果一排放不下就會(huì)自動(dòng)換行
            3) 浮動(dòng)元素失去了對(duì)父元素的支撐

    clear
        clear:left/right/both
        清理左邊/右邊/左右兩邊的浮動(dòng)元素，一般使用這個(gè)特性強(qiáng)制子元素?fù)Q行，達(dá)到支撐父元素的目的

    一行多列：
        全部浮動(dòng)
        ul>li{
            float:left
        }
    一行兩列
        方法一：
            兩列都浮動(dòng)
            .left {float:left }
            .right {float:right; }
        方法二：
            一列浮動(dòng)，一列添加margin-left
            .left {float:left; width:200px}
            .right {margin-left:220px;}

    overflow
    overflow-x
    overflow-y
        auto/none/visible/scroll
    當(dāng)父元素的寬/高固定，子元素的寬/高超過(guò)了父元素就可以使用這個(gè)特性


    display
        block/inline/inline-block/...
        塊/行內(nèi)/行內(nèi)塊
        行內(nèi)塊
            可以與其他行內(nèi)元素共享一行空間
            可以指定寬高

定位布局
    position 
        static        靜態(tài)（默認(rèn)）     非定位元素

        relative     定位元素（相對(duì)定位）
            參照點(diǎn)：原先所在的位置
            特性：不脫離文檔流（寬度默認(rèn)為為100%，原來(lái)在文檔流的位置不會(huì)被搶占），但是可以覆蓋在其他元素上


        absolute     定位元素（絕對(duì)定位）
            參照點(diǎn)：距離它最近的父定位元素，如果沒(méi)有，參照視口
            特性：脫離文檔流（寬度由內(nèi)容決定，原來(lái)在文檔流的位置被其他元素?fù)屨迹?

        fixed         定位元素（固定定位）
    只能定位元素才能使用定位屬性
        top 、left、bottom、right

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

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

相關(guān)文章

  • Day06 - Fetch、filter、正則表達(dá)式實(shí)現(xiàn)快速古詩(shī)匹配

    摘要：正則表達(dá)式實(shí)現(xiàn)快速古詩(shī)匹配作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。數(shù)據(jù)匹配操作使用基礎(chǔ)參考文檔項(xiàng)目源碼分析正則找出匹配的詩(shī)句替換高亮的標(biāo)簽構(gòu)造值會(huì)返回帶搜索關(guān)鍵字的新數(shù)組。執(zhí)行對(duì)大小寫(xiě)不敏感的匹配。 Day06 - Fetch、filter、正則表達(dá)式實(shí)現(xiàn)快速古詩(shī)匹配 作者：?liyuechun 簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 ...

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

  • Day06 - Fetch、filter、正則表達(dá)式實(shí)現(xiàn)快速古詩(shī)匹配

    摘要：正則表達(dá)式實(shí)現(xiàn)快速古詩(shī)匹配作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。數(shù)據(jù)匹配操作使用基礎(chǔ)參考文檔項(xiàng)目源碼分析正則找出匹配的詩(shī)句替換高亮的標(biāo)簽構(gòu)造值會(huì)返回帶搜索關(guān)鍵字的新數(shù)組。執(zhí)行對(duì)大小寫(xiě)不敏感的匹配。 Day06 - Fetch、filter、正則表達(dá)式實(shí)現(xiàn)快速古詩(shī)匹配 作者：?liyuechun 簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 ...

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

  • Day06 - Fetch、filter、正則表達(dá)式實(shí)現(xiàn)快速古詩(shī)匹配

    摘要：正則表達(dá)式實(shí)現(xiàn)快速古詩(shī)匹配作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。數(shù)據(jù)匹配操作使用基礎(chǔ)參考文檔項(xiàng)目源碼分析正則找出匹配的詩(shī)句替換高亮的標(biāo)簽構(gòu)造值會(huì)返回帶搜索關(guān)鍵字的新數(shù)組。執(zhí)行對(duì)大小寫(xiě)不敏感的匹配。 Day06 - Fetch、filter、正則表達(dá)式實(shí)現(xiàn)快速古詩(shī)匹配 作者：?liyuechun 簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 ...

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

  • JavaScript 30 - 一起做一次了不起的挑戰(zhàn)

    摘要：加入我們，一起挑戰(zhàn)吧掃碼申請(qǐng)加入全棧部落 JavaScript 30 - 一起做一次了不起的挑戰(zhàn) (Node+Vue+微信公眾號(hào)開(kāi)發(fā))企業(yè)級(jí)產(chǎn)品全棧開(kāi)發(fā)速成周末班首期班(10.28號(hào)正式開(kāi)班，歡迎搶座) 在Github上看到了wesbos的一個(gè)Javascript30天挑戰(zhàn)的repo，旨在使用純JS來(lái)進(jìn)行練習(xí)，不允許使用任何其他的庫(kù)和框架，該挑戰(zhàn)共30天，我會(huì)在這里復(fù)現(xiàn)這30天遇到的挑...

    1treeS 評(píng)論0 收藏0

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

0條評(píng)論

or0fun

男|高級(jí)講師

TA的文章

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