11.margin外邊距

阿新 • • 發佈：2021-10-02

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6    <!--外邊距的妙用：居中元素
 7    margin: 0 auto;
 8    -->
 9     <style>
10         #box{
11             width: 300px;
12             border:1px solid red 
;
13             margin: 0 auto;  /*邊距上下為0，左右自動對齊*/
14         }
15         /*順時針旋轉的順序
16         margin:0  上邊距
17         margin:0 1px  上 右
18         margin:0 1px 2px 3px  上 右 下 左
19         */
20         h2{
21             font-size: 16px;
22             background-color: aquamarine;
23             line-height 
: 40px;
24             color: white;
25             margin: 0 1px 2px 3px; /*上右下左*/
26         }
27         form{
28             background: aquamarine;
29         }
30         input{
31             border:1px solid black;
32         }
33         div:nth-of-type(1){
34             padding: 10px 2px;  /*上下邊距是10px,左右邊距是2px 
*/
35         }
36     </style>
37 
38 </head>
39 <body>
40 <div id="box">
41     <h2>會員登入</h2>
42     <form action="#" method="get">
43         <div>
44             <span>使用者名稱</span>
45             <input type="text">
46         </div>
47         <div>
48             <span>密碼</span>
49             <input type="password">
50         </div>
51         <div>
52             <span>郵箱</span>
53             <input type="email">
54         </div>
55     </form>
56 
57 </div>
58 </body>
59 </html>

11.margin外邊距

1 <!DOCTYPE html> 2 <html lang=\"en\"> 3 <head> 4<meta charset=\"UTF-8\"> 5<title>Title</title>

css - margin外邊距的塌陷問題

margin塌陷現象：在垂直方向如果有兩個元素的外邊距有相遇，在瀏覽器中載入的真正的外邊距不是兩個間距的加和，而是兩個邊距中值比較大的，邊距小的塌陷到了邊距值大的值內部。

CSS樣式邊框線屬性樣式、內外邊距和margin垂直不重疊辦法

技術標籤：html、css 邊框屬性屬性含義border-width邊框粗細border-style邊框樣式border-color邊框顏色border-radius圓角邊框

CSS學習筆記(一)-11.盒子模型-巢狀盒子外邊距的塌陷

巢狀盒子，希望內部盒子與外部盒子之間有一個間隔距離。 1.內部盒子使用margin-top，變換的卻是2個盒子一起變動。原因後續補充。

11.6 QSS語法宣告-外邊距和內邊距設定

一、QSS語法宣告-外邊距和內邊距設定盒子模型包含四個屬性（margin、border、padding、content）。

css 外邊距margin的合併問題

當塊級元素垂直佈局時，上下的外邊距會被合併掉。合併遵從的規則是取最大值。

css外邊距margin的塌陷問題

子級元素的外邊距margin同時也會影響到父級元素，這就是css外邊距的塌陷問題。

CSS（09）CSS外邊距margin合併

外邊距margin合併：當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

外邊距的重疊

垂直方向上的外邊距　　垂直外邊距的重疊　　　　-相鄰的垂直方向外邊距發生重疊現象

第四天, 內填充, 邊框, 三角形, 外邊距,, 盒模型的計算, 背景屬性, 選擇器進階, css的三大特性, 標籤分類及轉化

day04 知識回顧 1、你所知道的基礎選擇器有哪些，它們的優先順序如何？萬用字元0

第五天,外邊距塌陷問題,盒子居中,浮動,overflow屬性,clear屬性,偽元素

day 05 知識回顧 1、選擇器的優先順序如何計算？基礎選擇器：權值（id>class>標籤>萬用字元）

CSS外邊距塌陷的總結

一.當兩個元素為兄弟元素時： .father { width: 100px; height: 100px; background-color: aqua; margin-bottom: 10px; } .son { width: 50px; height: 50px; background-color: pink; margin-top: 30px; }