積累--Python常用工具函式
阿新 • • 發佈：2022-04-11
盒模型 重點
溢位
盒模型
盒模型是css佈局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、補白（填充）、邊框、邊界(外邊距)這就是盒模型。
padding
| padding用法: | |
|---|---|
| 1:padding是在盒子裡面，在盒子與內容之間。 | |
| 2：padding的作用：控制子元素在父元素裡面的位置關係。 | |
| 3：padding會把盒子撐大。 | |
| 4：如果想讓盒子保持原有的大小：在寬高基礎上減掉。（ 如果一個元素是被內容撐開的，沒有設定固定的寬高，padding直接撐開。不用減掉 ） | |
| 5:如果給單一方向新增padding | |
| padding-top/bottom/left/right | |
| 6:padding的設定特點： | |
| padding:30px; 四周 | |
| padding:10px 30px; 上下 左右 | |
| padding:10px 30px 50px 上 左右 下 | |
| padding:10px 30px 50px 100px 上右下左 | |
| 7:padding不會對背景圖的位置造成影響。 |
margin
| margin用法 （外邊距、邊界） | |
|---|---|
| 1:margin在元素外圍，不會撐大元素的大小 | |
| 2:作用:控制元素與元素之間的間距。 | |
| 3：給單一方向新增margin | |
| margin-left/right/top/bottom | |
| 4 :margin設定方法： | |
| margin:30px; 四周 | |
| margin:10px 30px; 上下 左右 | |
| margin:10px 30px 50px 上 左右 下 | |
| margin:10px 30px 50px 100px 上右下左 | |
| 5:margin:0 auto; | |
| 讓當前元素在父元素裡面左右居中。 | |
| 6:margin常出現的bug | |
| a:兩個相鄰元素上下的margin值 不會疊加 按照較大值設定。 | |
| b:如果父元素和第一個子元素沒有浮動的情況下，給第一個子元素新增margin-top,會錯誤放在父元素上面。 |
盒子大小計算
文字溢位
overflow
visible:預設值，內容不會被修剪，會呈現在元素框之外；
hidden：內容會被修剪，並且其餘內容是不可見的；
scroll：內容會被修剪，但是瀏覽器會顯示滾動條，以便檢視其餘的內容;
auto：如果內容被修剪，則瀏覽器會顯示滾動條，以便檢視其他的內容;
inherit：規定應該從父元素繼承overflow屬性的值。
white-space
normal：預設值，多餘空白會被瀏覽器忽略只保留一個；
pre：空白會被瀏覽器保留；
pre-wrap：保留一部分空白符序列，但是正常的進行換行；
pre-line:合併空白符序列，但是保留換行符；
nowrap:文字不會換行，文字會在同一行上繼續，直到遇到<br/>標籤為止;
text-overflow
clip：不顯示省略號（...），而是簡單的裁切;
ellipsis：當物件內文字溢位時，顯示省略標記；
文字溢位變省略號設定
省略號設定：
text-overflow屬性僅是：當文字溢位時是否顯示省略標記，並不具備其它的樣式屬性定義，要實現溢位時產生省略號的效果還需定義：
1、容器寬度：width：value；（px、%，都可以）
2、強制文字在一行內顯示:white-space：nowrap;
3、溢位內容為隱藏：overflow：hidden；
4、溢位文字顯示省略號：
text-overflow：ellipsis;
注：必須是單行文字才能設定本文溢位！！！