border : border-width || border-style || border-color
複製**
邊框樣式用於定義頁面中邊框的風格，常用屬性值如下：
none：沒有邊框即忽略所有邊框的寬度（預設值）
solid：邊框為單實線(最為常用的)
dashed：邊框為虛線
dotted：邊框為點線
double：邊框為雙實線
複製**
設定內容
樣式屬性
常用屬性值
上邊框border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度 樣式 顏色;
下邊框border-bottom-style:樣式;border- bottom-width:寬度;border- bottom-color:顏色;border-bottom:寬度 樣式 顏色;
左邊框border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;border-left:寬度 樣式 顏色;
右邊框border-right-style:樣式;border-right-width:寬度;border-right-color:顏色;border-right:寬度 樣式 顏色;
樣式綜合設定
border-style:上邊 [右邊 下邊 左邊];
none無（預設）、solid單實線、dashed虛線、dotted點線、double雙實線
寬度綜合設定
border-width:上邊 [右邊 下邊 左邊];
畫素值顏色綜合設定
border-color:上邊 [右邊 下邊 左邊];
顏色值、#十六進製制、rgb(r,g,b)、rgb(r%,g%,b%)
邊框綜合設定
border:四邊寬度 四邊樣式 四邊顏色;
**線變粗原因是因為邊框重疊
table collapse 單詞是合併的意思
border-collapse:collapse; 表示邊框合併在一起。
語法格式：
border-radius: 左上角 右上角 右下角 左下角;
複製**
複製**padding-top:上內邊距
padding-right:右內邊距
padding-bottom:下內邊距
padding-left:左內邊距
值的個數
表達意思
1個值padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3畫素
2個值padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3畫素 左右 5畫素
3個值padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3畫素 左右是5畫素 下是10畫素
4個值padding:上內邊距 右內邊距 下內邊距 左內邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時針
margin屬性用於設定外邊距。 設定外邊距會在元素之間建立「空白」， 這段空白通常不能放置其他內容。
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距 下外邊距 左外邊
取值順序跟內邊距相同。
可以讓乙個盒子實現水平居中，需要滿足一下兩個條件：
必須是塊級元素。
盒子必須指定了寬度（width）
然後就給左右的外邊距都設定為auto，就可使塊級元素水平居中。
實際工作中常用這種方式進行網頁布局，示例**如下：
.header
複製**
盒子水平居中 左右margin 改為 auto
text-align: center; /* 文字居中水平 */
margin: 10px
auto; /* 盒子水平居中 左右margin 改為 auto 就闊以了 */
複製**
背景我們一般用於小圖示背景 或者 超大背景
section
img
aside
複製**
*
複製**
我們盡量不要給行內元素指定上下的內外邊距就好了。
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷）。
解決方案： 避免就好了。
對於兩個巢狀關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合併。
解決方案：
可以為父元素定義1畫素的上邊框或上內邊距。
可以為父元素新增overflow:hidden。
待續。。。。
使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。
width和height的屬性值可以為不同單位的數值或相對于父元素的百分比%，實際工作中最常用的是畫素值。
大多數瀏覽器，如firefox、ie6及以上版本都採用了w3c規範，符合css規範的盒子模型的總寬度和總高度的計算原則是：
/*外盒尺寸計算（元素空間尺寸）*/
element空間高度 = content height + padding + border + margin
element 空間寬度 = content width + padding + border + margin
/*內盒尺寸計算（元素實際大小）*/
element height = content height + padding + border （height為內容高度）
element width = content width + padding + border （width為內容寬度）
複製**
1、寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（ img 標籤和 input除外）。
2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況。
3、如果乙個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。
Web前端 CSS盒子模型
2.內邊距 3.盒陰影 4.盒模型概念 5.標籤最終尺寸的計算 盒子模型分別由外邊距 邊框 內邊距和標籤內容組成。屬性 margin 作用 調整標籤與標籤之間的距離 特殊 1 margin 0 取消預設外邊距 2 margin 0 auto 左右自動外邊距，實現標籤在父標籤範圍內水平居中 3 mar...
web前端基礎 盒子模型
盒子模型的概念 盒子模型用來 放 網頁中的各種元素。網頁設計中內容，如文字 等元素，都可是盒子 div巢狀 寬度屬性 寬度 width 長度值 百分比 auto 最大寬度 max width 長度值 百分比 auto 最小寬度 min width 長度值 百分比 auto 高度屬性 高度 heigh...
web前端 css盒子模型
css最重要的是盒子模型，盒子組成一切 盒子構成 首先可以直接設定各個區域 box 注意 這裡的width和height設定的大小是內容區的大小，不是整個盒子的大小。內邊距 邊框和外邊距可以應用於乙個元素的所有邊，也可以應用於單獨的邊。外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。當wid...