CSS3 學習筆記 DAY9

2021-10-09 16:11:14 字數 1042 閱讀 3353

css3 box-sizing 屬性可以設定 width 和 height 屬性中包含了 padding(內邊距) 和 border(邊框)。

不使用 css3 box-sizing 屬性

預設情況下，元素的寬度與高度計算方式如下：

這就意味著我們在設定元素的 width/height 時，元素真實展示的高度與寬度會更大(因為元素的邊框與內邊距也會計算在 width/height 中)。

.div1


.div2
使用這種方式如果想要獲得較小的那個框且包含內邊距，就不得不考慮到邊框和內邊距的寬度。

css3 的 box-sizing 屬性很好的解決了這個問題。

使用 css3 box-sizing 屬性

css3 box-sizing 屬性在乙個元素的 width 和 height 中包含 padding(內邊距) 和 border(邊框)。

如果在元素上設定了 box-sizing: border-box; 則 padding(內邊距) 和 border(邊框) 也包含在

width 和 height 中:

以下是兩個元素新增 box-sizing: border-box; 屬性的簡單例項。

例項

.div1


.div2
從結果上看 box-sizing: border-box; 效果更好，也正是很多開發人員需要的效果。

以下**可以讓所有元素以更直觀的方式展示大小。很多瀏覽器已經支援 box-sizing: border-box; (但是並非所有 - 這就是為什麼 input 和 text 元素設定了 width: 100%; 後的寬度卻不一樣)。

例項

*

python學習筆記day9 函式

函式 定義之後可以任何需要他的地方呼叫這個函式 如果函式沒有定義返回值，使用者去取函式的返回值的話，預設返回none 1.返回值的三種情況 1.1 沒有返回值 1.1.1 沒寫return def func print s s 今天天氣好 func 1.1.2 只寫return，後面沒有數值，ret...

刷題筆記day9

pat a1012 the best rank 25分 此題的坑點是，排名涉及並列名次，存在並列第一，並列第三的情況，計算排名時要特別考慮。include include include struct stus 2005 int cmpc const void a,const void b int ...

前端基礎學習day9

移動端 設配 移動端瀏覽 webkit核心 safari firefox chrome 螢幕的尺寸 1.裝置畫素pt 解析度 螢幕上的發光點，在廠商出廠時畫素就以固定 2.css畫素px 相對單位 3.ppi 畫素的密度 4.dpr畫素比 裝置畫素與css畫素之間的比例關係 ps 在頁面中設定的畫素...