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

sunny5541 發布于2019-08-02 11:05 / 1285人閱讀

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

一、%

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

代碼：

二、vw vh

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

代碼：

三、box-sizing：border-box;

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

（這是第一個盒子）

（這是第二個盒子）

代碼：




    
    
    
    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的各種屬性來對網頁進行更加簡單的排版彈性盒布局比你用定位和浮動來布局，更加簡單明了。
效果圖：

代碼：

GPU云服務器云服務器常用域名的符號和含義 css和html的區別 html和css的區別 html和css的關系

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52759.html

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

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

lordharrd 2019-08-29 16:14 評論0 收藏0
CSS 常用布局在小程序中的應用

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

garfileo 2019-08-30 11:25 評論0 收藏0
CSS 常用布局在小程序中的應用

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

CoderDock 2019-08-30 15:44 評論0 收藏0
css面試題

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

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

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

番茄西紅柿 2019-05-23 15:55 評論0 收藏0