頁面佈局三大核心：盒子模型、浮動、定位 （一 ）盒子模型 一 盒子模型的組成 四個組成部分：邊框border、內容content、內邊距padding、外邊距margin（盒子與另外一個盒子間的距離） 二 邊框border 邊框由三部分組成： 邊框寬度（粗細）border-width、邊框樣式border-style、邊框顏色border-color 1.邊框寬度（粗細） 屬性名：border-width 屬性值： 2.邊框樣式 作用：設定實線還是虛線 屬性名：border-style 屬性值：solid實線邊框 dashed虛線邊框 dotted點線邊框（點組成的虛線邊框） 3.邊框顏色border-color 4.邊框複合寫法 border：1px solid red; 沒有順序 5.border-top可以單獨設定各邊框 6.表格的邊框 可以分別給<table>表格大外框和<td>單元格設定邊框

• collapse合併相鄰的邊框

語法 border-collapse:collapse; 就會把單元格仙林的邊框合併成一個了，不會兩個疊加一起看起來粗 7.邊框與盒子的大小 會影響盒子大小，加了邊框後盒子會變大 解決方法：把盒子的寬高改小 三內邊距padding 1.指內容與內邊框的距離 2.可以分別設定上下左右 3.複合寫法： padding:10px 5px 15px 20px;//分別為上、右、下、左（順時針）

• 若只寫一個20代表上下左右都是20
• 寫0 20代表上下不需要，左右是20
• 單獨設定padding-left:30px;

4.paddding和盒子大小 會影響盒子大小 盒子已經有了寬和高，再指定內邊框的話，會撐大盒子 解決方法：把盒子的寬高改小

• 如果盒子內的元素沒有width屬性，則不會撐開盒子的寬度；高度也同理

四 外邊距margin 控制盒子與盒子之間的距離 語法跟padding一致 1.外邊距典型應用： 外邊距可以讓盒子（塊級元素）水平居中，語法：margin：0auto；//可以不是0 但必須滿足：

• 盒子指定了寬度width
• 盒子左右外邊距都設定為auto，即margin：0auto；//上下0，左右auto

*：若想讓行內元素或者行內塊狀元素水平居中，則需要給其父元素新增text-align:center; 2.外邊距合併問題 問題場景：兩個巢狀關係的元素（父子關係），給子元素新增上邊距後，父元素也會跟著下降一定距離，稱為巢狀元素垂直外邊距的塌陷問題。 幾種解決方案：

• 法1.為父元素定義一個上邊框

.father{ border:1px solid transparent; }

• 法2為父元素定義一個內邊距

.father{ padding：1px; }

• 法3 為父元素定義一個overflow:hidden

.father{ overflow:hidden; }

• 法4 浮動、固定

五 清除內外邊距 *{ padding:0; margin:0; } 六 注意 1.行內元素只設置左右內外邊距，不要設定上下內外邊距 2.如果一個盒子不指定寬度，則它和父元素一樣寬 七輪廓outline 輪廓（outline）是繪製於元素周圍的一條線，位於邊框border邊緣的外圍，可起到突出元素的作用。 CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。 八 css3新增樣式：圓角邊框 語法：border-top-left-radius: 30px 80px; 引數也可以寫百分數 如果跟4個數值，則為左上、右上、右下、左下的順時針順序 第一個值表示水平半徑，第二個值表示圓角垂直半徑；

• 讓一個正方形盒子變成圓形：border-radius:50%;

九 css3新增樣式：盒子陰影 屬性名：box-shadow 語法： eg：box-shadow:10px 10px 10px 10px black; 屬性值：

• h-shadow為x軸上陰影負值則陰影在左，正值則陰影在右；v就是y軸上陰影
• blur為0則陰影不透明，數值增大影子會模糊
• inset就為內陰影。outset不要寫，默認了

十 css3新增樣式：文字陰影 text-shadow

本文來自部落格園，作者：mdj今天又過關了，轉載請註明原文連結：https://www.cnblogs.com/mhhh/p/15751701.html