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

資訊專欄INFORMATION COLUMN

CSS的常用單位 %和 vw vh 和 box-sizing：border-box; 和flex

lordharrd / 2737人閱讀

摘要：一理解號是中的常用單位，它是相對于父容器而言的。效果圖利用設(shè)置了的寬代碼二理解這倆個單位是相對于視口的大小而定的。效果圖代碼彈性盒布局

一、%

理解： %號是CSS中的常用單位，它是相對于父容器而言的。如:一個父容器的寬是100px,給它的子元素一個10%，那么子元素的寬就是100px的10% 10px。
效果圖： （利用%設(shè)置了li 的寬）

代碼：




    
    
    
    %
    
 

    
    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    •
二、vw vh

理解 “vw” “vh”這倆個單位是相對于視口的大小而定的。“vw”是相對于視口的寬 如視口寬100px當(dāng)你設(shè)width：10vw時 你設(shè)的寬實(shí)際就是10px “vw”是相對于視口的高 同理
效果圖：

代碼：




    
    
    
    vw vh
三、box-sizing：border-box;

理解 一般用于排移動端的網(wǎng)頁時防止在你給盒模型設(shè)padding和margin時改變盒模型的大小。
效果圖：（很明顯第一個盒模型被padding改變了實(shí)際的大小，而第二個改變了內(nèi)容區(qū)域的大小而整體沒有改變）

（這是第一個盒子）

（這是第二個盒子）

代碼：




    
    
    
    box-sizing:border-box;
    


    
第一個盒子沒有用box-sizing:border-box;盒子的大小為500*500
            padding上下為5px 左右為10px;margin為10px
    

    
第二個盒子用了box-sizing:border-box;盒子的大小為500*500
        padding上下為5px 左右為10px;margin為10px
四、flex（簡單的）彈性盒布局！！

理解 利用flex的各種屬性來對網(wǎng)頁進(jìn)行更加簡單的排版 彈性盒布局比你用定位和浮動來布局，更加簡單明了。
效果圖：

代碼：




    
    
    
    彈性盒布局flex

    

    
    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
        
  • 4
    • 
        
  • 5
    • 
    

    
    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
        
  • 4
    • 
        
  • 5
    •

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

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

相關(guān)文章

  • CSS的常用單位 %和 vw vh 和 box-sizing：border-box; 和flex

    摘要：一理解號是中的常用單位，它是相對于父容器而言的。效果圖利用設(shè)置了的寬代碼二理解這倆個單位是相對于視口的大小而定的。效果圖代碼彈性盒布局 一、% 理解： %號是CSS中的常用單位，它是相對于父容器而言的。如:一個父容器的寬是100px,給它的子元素一個10%，那么子元素的寬就是100px的10% 10px。 效果圖： （利用%設(shè)置了li 的寬）showImg(https://seg...

    sunny5541 評論0 收藏0

  • CSS 常用布局在小程序中的應(yīng)用

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

    garfileo 評論0 收藏0

  • CSS 常用布局在小程序中的應(yīng)用

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

    CoderDock 評論0 收藏0

  • css面試題

    摘要：目前，除了及更早版本外，所有瀏覽器均已支持。視口單位中的視口，桌面端指的是瀏覽器的可視區(qū)域移動端指的就是中的。根據(jù)規(guī)范，視口單位主要包括以下個等于視口寬度的。等于視口高度的。生成相對定位的元素，相對于其正常位置進(jìn)行定位。 css面試題 css垂直居中的方法有哪些？ 已知高度的塊級子元素，采用絕對定位和負(fù)邊距.container { position: relative;}.verti...

    longmon 評論0 收藏0

  • 【前端詞典】提高幸福感的 9 個 CSS 技巧

    摘要：使用歸類重復(fù)樣式和重復(fù)變量一樣，重復(fù)的樣式也可以歸類。解決方案可以使用如下的寫法兩端對齊姓名手機(jī)號碼賬號密碼效果如下相關(guān)文章輸出計劃最近總有朋友問我相關(guān)的問題，因此接下來我會輸出篇相關(guān)的文章，希望對大家有一定的幫助。前言 在這篇文章我會介紹 9 個使你的 CSS 更加簡潔優(yōu)雅的使用技巧。這些技巧小生經(jīng)常使用，覺得挺高效實(shí)用，所以也就有了這篇文章。 9 個 CSS 技巧 特此聲明，這里說的...

    番茄西紅柿 評論0 收藏0

發(fā)表評論

0條評論

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