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

lordharrd 發(fā)布于2019-08-29 16:14 / 2731人閱讀

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

一、%

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

代碼：

二、vw vh

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

代碼：

三、box-sizing：border-box;

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

（這是第一個(gè)盒子）

（這是第二個(gè)盒子）

代碼：




    
    
    
    box-sizing:border-box;
    


    第一個(gè)盒子沒(méi)有用box-sizing:border-box;盒子的大小為500*500
            padding上下為5px 左右為10px;margin為10px
    
    第二個(gè)盒子用了box-sizing:border-box;盒子的大小為500*500
        padding上下為5px 左右為10px;margin為10px

四、flex（簡(jiǎn)單的）彈性盒布局！！

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

代碼：

云服務(wù)器 GPU云服務(wù)器常用域名的符號(hào)和含義 css和html的區(qū)別 html和css的區(qū)別 html和css的關(guān)系

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

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

相關(guān)文章

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

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

sunny5541 2019-08-02 11:05 評(píng)論0 收藏0
CSS 常用布局在小程序中的應(yīng)用

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

garfileo 2019-08-30 11:25 評(píng)論0 收藏0
CSS 常用布局在小程序中的應(yīng)用

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

CoderDock 2019-08-30 15:44 評(píng)論0 收藏0
css面試題

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

longmon 2019-08-23 18:30 評(píng)論0 收藏0
【前端詞典】提高幸福感的 9 個(gè) CSS 技巧

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

番茄西紅柿 2019-05-23 15:55 評(píng)論0 收藏0