歡迎大家去部落格冰山一樹Sankey，瀏覽效果更好。直接右上角搜尋該標題即可
部落格園主頁：部落格園主頁-冰山一樹Sankey
CSDN主頁：CSDN主頁-冰山一樹Sankey
前端學習：學習地址：黑馬程式設計師pink老師前端入門教程，零基礎必看的h5(html5)+css3+移動，下面這些都是一些學習筆記。臨淵羨魚，不如退而結網！！願我自己學有所成，也願每個前端愛好者學有所成
一. CSS三大特性
- 層疊性
- 繼承性
- 優先順序
具體可參考CSS 三大特性
二. 盒子模型
頁面佈局要學習三大核心, 盒子模型, 浮動 和 定位. 學習好盒子模型能非常好的幫助我們佈局頁面
2.1 看透網頁組成的本質
網頁佈局的核心本質： 就是利用 CSS 擺盒子。
網頁佈局過程：
- 先準備好相關的網頁元素，網頁元素基本都是盒子 Box 。
- 利用 CSS 設定好盒子樣式，然後擺放到相應位置。
- 往盒子裡面裝內容.
2.2 盒子模型組成
所謂 盒子模型：就是把 HTML 頁面中的佈局元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。 CSS 盒子模型本質上是一個盒子，封裝周圍的 HTML 元素，它包括：邊框、外邊距、內邊距、和 實際內容
2.3 邊框
border可以設定元素的邊框。邊框有三部分組成:邊框寬度(粗細) 邊框樣式 邊框顏色
border : border-width || border-style || border-color
| 屬性 | 作用 |
|---|---|
| border-width | 定義邊框粗細,單位是px |
| border-style | 邊框的樣式 |
| border-color | 邊框顏色 |
邊框樣式 border-style 可以設定如下值：
- none：沒有邊框即忽略所有邊框的寬度（預設值）
- solid：邊框為單實線(最為常用的)
- dashed：邊框為虛線
- dotted：邊框為點線
邊框簡寫：
border: 1px solid red; 沒有順序
邊框分開寫法：
border-top: 1px solid red; /* 只設定上邊框， 其餘同理 */
border-collapse 屬性控制瀏覽器繪製表格邊框的方式。它控制相鄰單元格的邊框。 語法：
border-collapse:collapse;
- collapse 單詞是合併的意思
- border-collapse: collapse; 表示相鄰邊框合併在一起
注意：邊框會額外增加盒子的實際大小。有兩種方案解決:
- 測量盒子大小的時候,不量邊框.
- 如果測量的時候包含了邊框,則需要 width/height 減去邊框寬度
2.4 內邊距
padding 屬性用於設定內邊距，即邊框與內容之間的距離。
| 屬性 | 作用 |
|---|---|
| padding-left | 左內邊距 |
| padding-right | 右內邊距 |
| padding-top | 上內邊距 |
| padding-bottom | 下內邊距 |
padding 屬性（簡寫屬性）可以有一到四個值。
| 值的個數 | 表達意思 |
|---|---|
| padding:5px; | 1個值,代表上下左右都有5畫素內邊距; |
| padding:5px 10px; | 2個值,代表上下內邊距是5畫素左右內邊距是10畫素; |
| padding:5px 10px 20px; | 3個值,代表上內邊距5畫素左右內邊距10畫素下內邊距20畫素; |
| padding:5px 10px 20px 30px; | 4個值,上是5畫素右10畫素下20畫素左是30畫素 順時針 |
注意：
當我們給盒子指定 padding 值之後：
- 內容和邊框有了距離，新增了內邊距。
- padding影響了盒子實際大小。
也就是說，如果盒子已經有了寬度和高度，此時再指定內邊框，會撐大盒子。 - 如果盒子本身沒有指定width/height屬性, 則此時padding不會撐開盒子大小.
- 解決方案：
如果保證盒子跟效果圖大小保持一致，則讓 width/height 減去多出來的內邊距大小即可。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新浪導航</title>
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
/* a屬於行內元素 此時必須要轉換 行內塊元素 */
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪導航</a>
<a href="#">手機新浪網</a>
<a href="#">移動客戶端</a>
<a href="#">微博</a>
<a href="#">三個字</a>
</div>
</body>
</html>
2.5 外邊距
margin 屬性用於設定外邊距，即控制盒子和盒子之間的距離。
| 屬性 | 作用 |
|---|---|
| margin-left | 左外邊距 |
| margin-right | 右外邊距 |
| margin-top | 上外邊距 |
| margin-bottom | 下外邊距 |
2.6 塊盒子水平居中
外邊距可以讓塊級盒子水平居中，但是必須滿足兩個條件：
- 盒子必須指定了寬度（width）。
- 盒子左右的外邊距都設定為 auto 。
.header{
width:960px;
margin:0 auto;
}
常見的寫法，以下三種都可以：
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
注意：以上方法是讓塊級元素水平居中，行內元素或者行內塊元素水平居中給其父元素新增 text-align:center 即可。
2.7 外邊距合併
2.7.1 相鄰塊元素垂直外邊距的合併
當上下相鄰的兩個塊元素（兄弟關係）相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合併。
解決方案：儘量只給一個盒子新增 margin 值。
2.7.2 巢狀塊元素垂直外邊距的塌陷
對於兩個巢狀關係（父子關係）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。
解決方案：
- 可以為父元素定義上邊框。
- 可以為父元素定義上內邊距。
- 可以為父元素新增 overflow:hidden。
- 還有其他方法，比如浮動、固定，絕對定位的盒子不會有塌陷問題。後續會有講解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外邊距合併-巢狀塊級元素垂直外邊距塌陷</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
/* 可修改margin-top值進行觀察 */
margin-top: 150px;
/* border: 1px solid red; */
/* border: 1px solid transparent; */
/* padding: 1px; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2.7 清除內外邊距
網頁元素很多都帶有預設的內外邊距，而且不同瀏覽器預設的也不一致。因此我們在佈局前，首先要清除下網頁元素的內外邊距。
* {
padding:0; /* 清除內邊距 */
margin:0; /* 清除外邊距 */
}
注意：行內元素為了照顧相容性，儘量只設定左右內外邊距，不要設定上下內外邊距。但是轉換為塊級和行內塊元素就可以了
2.8 綜合案例和總結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>綜合案例-產品模組</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
a {
color: #333;
text-decoration: none;
}
.box {
width: 298px;
height: 415px;
background-color:#fff;
/* 讓塊級的盒子水平居中對齊 */
margin: 100px auto;
}
.box img {
/* 圖片的寬度和父親一樣寬 */
width: 100%;
}
.review {
height: 70px;
font-size: 14px;
/* 因為這個段落沒有 width屬性 所有 padding不會撐開盒子的寬度 */
padding: 0 28px;
margin-top: 30px;
}
.appraise {
font-size: 12px;
color: #b0b0b0;
margin-top: 20px;
padding: 0 28px;
}
.info {
font-size: 14px;
margin-top: 15px;
padding: 0 28px;
}
.info h4 {
display: inline-block;
font-weight: 400;
}
.info span {
color: #ff6700;
}
.info em {
font-style: normal;
color: #ebe4e0;
margin: 0 6px 0 15px;
}
</style>
</head>
<body>
<div class="box">
<img src="images/img.jpg" alt="">
<p class="review">快遞牛，整體不錯藍芽可以說秒連。紅米給力</p>
<div class="appraise">來自於 117384232 的評價</div>
<div class="info">
<h4> <a href="#">Redmi AirDots真無線藍...</a></h4>
<em>|</em>
<span> 99.9元</span>
</div>
</div>
</body>
</html>
一些問題：
- 佈局為啥用不同盒子,我只想用div？
標籤都是有語義的, 合理的地方用合理的標籤。比如產品標題 就用 h, 大量文欄位落就用p - 為啥用辣麼多類名？
類名就是給每個盒子起了一個名字,可以更好的找到這個盒子, 選取盒子更容易,後期維護也方便。 - 到底用 margin 還是 padding？
大部分情況兩個可以混用，兩者各有優缺點，但是根據實際情況，總是有更簡單的方法實現。 - 自己做沒有思路？
佈局有很多種實現方式，同學們可以開始先模仿我的寫法，然後再做出自己的風格。
最後同學們一定多運用輔助工具,比如螢幕畫筆,ps等等
三. 盒子其他樣式
3.1 圓角邊框
在 CSS3 中，新增了圓角邊框樣式。
border-radius 屬性用於設定元素的外邊框圓角。
border-radius:length;
- 引數值可以為數值或百分比的形式
- 如果是正方形，想要設定為一個圓，把數值修改為高度或者寬度的一半即可，或者直接寫為 50%
- 該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角
- 也可以跟四個值，分別代表兩個對角線
- 分開寫：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和
border-bottom-left-radius - 相容性 ie9+ 瀏覽器支援, 但是不會影響頁面佈局,可以放心使用.
3.2 盒子陰影
CSS3 中新增了盒子陰影，我們可以使用 box-shadow 屬性為盒子新增陰影
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 |
| v-shadow | 必需。垂直陰影的位置。允許負值。 |
| blur | 可選。模糊距離。 |
| spread | 可選。陰影的尺寸。 |
| color | 可選。陰影的顏色。請參閱CSS顏色值。 |
| inset | 可選。將外部陰影(outset)改為內部陰影。 |
注意：
- 預設的是外陰影(outset), 但是不可以寫這個單詞,否則造成陰影無效
- 盒子陰影不佔用空間，不會影響其他盒子排列。
3.3 文字陰影
在 CSS3 中，我們可以使用 text-shadow 屬性將陰影應用於文字。
語法：
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 |
| v-shadow | 必需。垂直陰影的位置。允許負值。 |
| blur | 可選。模糊距離。 |
| color | 可選。陰影的顏色。請參閱CSS顏色值。 |