CSS邊框、背景
1.邊框
1.邊框屬性
（1）簡寫方式
border : width style color;
width : 以px為單位的資料
style : 邊框樣式
solid：實線邊框
dotted：虛線邊框（點組成）
dashed：虛線邊框（線）
color：邊框顏色，也可以取值為 transparent （透明）
注意： border : none; / border : 0; 取消邊框
（2）單邊定義
屬性：border-top / right / bottom / left : width style color;
（3）單屬性設定
設定邊框的某一個屬性
屬性： border-width / style / color : 值;
（4）單邊單屬性設定
只設置某一方向的某一屬性值
屬性：border-方向-屬性 : 值;
方向：top / right / bottom / left
屬性：width / style / color
2.邊框倒角
將元素的四個角，由直角倒換成圓角
屬性：border-radius:值;
取值：以px為單位的具體值 / %
3.邊框陰影
屬性：box-shadow
取值：h-shadow v-shadow blur spread color inset
h-shadow : 陰影的水平偏移距離，必須要加的，沒有陰影取值為0，取值為正，陰影右偏移，取值為負，陰影左偏移
v-shadow：陰影的垂直偏移距離，必須的，取值為正，陰影下偏移，取值為負，陰影上偏移
blur：模糊距離，取值越大，模糊效果越明顯，以 px 為單位的數值
spread：陰影的大小，指定要在基礎陰影上擴充出來的大小距離，取值為 px 為單位的數值
color：陰影顏色
inset：將預設的外陰影改為內陰影
4.輪廓
輪廓指邊框的邊框，繪製於邊框外圍的一條線
（1）簡寫方式
outline : width style color;
outline : none; / ourline : 0; 無輪廓
2.框模型
1.框模型（Box Model）規定了元素框處理元素內容、內邊距、邊框和外邊距的方式
外邊距：元素與元素之間的距離
內邊距：元素邊框與內容之間的距離
當框模型介入到元素後，元素的佔地尺寸會發生變化:
元素的寬度 = 左右外邊距+左右邊框+左右內邊距+w;
元素的高度 = 上下外邊距+上下邊框+上下內邊距+h
2.外邊距
屬性：
margin：定義某個元素四個方向的外邊距
margin-top / right / bottom / left
取值：
（1）具體的數值，以px為單位的數字
（2）取值為負，讓元素向反方向移動
margin-left : 取值為正，讓元素右移動；取值為負，讓元素左移動
margin-top ：取值為正，讓元素下移動；取值為負，讓元素上移動
（3）取值為 % ：外邊距的值，佔父元素寬或者高的佔比
（4）取值為auto ：自動計算外邊距的值 （只對塊級的左右外邊距有效 水平居中對齊）
簡潔寫法
（1）margin-value ;
四個方向的外邊距都相同
（2）margin : v1,v2;
v1 ：上下外邊距
v2 ：左右外邊距
（3）margin ：v1,v2,v3;
v1：上外編劇
v2：左右外邊距
v3：下外邊距
（4）margin：v1，v2，v3，v4；
分別是：上，右，下，左
自帶外邊距的元素
h1~h6,p,ul,ol,dl,dd,pre,body
可以通過 CSS Reset（CSS重寫）的手段，來重置具備外邊距的元素
/*取消元素外邊距*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,pre{ margin:0; }
外邊距特殊效果
（1）外邊距合併 ： 當兩個垂直外邊距相遇時，他們將合併成一個，最終的距離取決於兩個外邊距中距離較大的那個
（2）外邊距的溢位 ： 在某些特殊的條件下（父元素沒有上邊框且為第一個子元素設定上外邊距時），為子元素設定上外邊距時，有可能會作用在父元素上
解決方案： 1、為父元素增加上邊框 弊端：對父元素的高度有影響 2、使用父元素的上內邊距來取代子元素的上外邊距 弊端：對父元素的高度有影響 3、在父元素的第一個子元素位置處，增加一個空 <table></table>
（3）行內元素 以及 行內塊元素的垂直外邊距
行內元素垂直外邊距無效（img除外）
行內塊元素，設定垂直外邊距時，整行元素都跟著發生改變
3.內邊距
（1）內邊距是元素邊框與內容之間的距離，內邊距會擴大元素邊框佔地區域
（2）屬性：
padding : vaule ;
padding-top / right / bottom / left : value;
取值：
以 px 或者 % 為單位的數值
簡介寫法：
padding：value
padding：v1，v2 上下、左右
padding：v1，v2，v3 上、左右、下
padding：v1，v2，v3，v4 上、右、下、左
4.box-sizing屬性
指定框模型的計算方式
取值：
（1）content-box
預設值採用預設的方式計算元素的佔地區域
實際佔地寬度=左右邊框+左右內邊距+width;
實際佔地高度=上下邊框+上下內邊距+height
（2）border-box
元素的尺寸，包含border以及padding的值
實際佔地寬度=width(包含了border和padding)
實際佔地高度=height(包含了border和padding)
練習：
1.建立一個元素id為container，尺寸為 900*150 （最小高度）（包含邊框和內邊距的尺寸） 2.設定邊框的顏色為#D0E4C2，1px，實線 3.在container下邊建立一個p標記，id為page，裡邊新增6個a標記 4.a標記特徵：邊框顏色 #CCC，寬度為1px，實線，倒角，再增加內邊距（3px 10px）
<style type="text/css"> #container{ width: 900px; min-height: 150px; box-sizing: border-box; border: 1px solid #D0E4C2; } a{ border:1px solid #CCC; border-radius: 5px; padding: 3px 10px; } a:focus{ border: 0; } </style> <div id="container"></div> <p id="page"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> </p>
3.背景屬性
1.背景色
屬性：background-color
取值：合法的顏色值
注意：背景顏色是從邊框的位置處開始繪製
2.背景圖片
屬性：background-image
取值：url(圖片的地址);
3.背景平鋪
屬性：background-repeat
取值：
（1）repeat 預設值，橫向縱向都平鋪
（2）repeat-x 只在橫向平鋪
（3）repeat-y 只在縱向平鋪
（4）no-repeat 不平鋪
4.背景圖片尺寸
屬性：background-size
取值：
（1）width height
（2）width% height%
（3）cover 將背景圖等比放大，直到背景圖完全覆蓋到元素的所有區域為止
（4）contain 將背景圖等比放大，直到背景圖碰到元素的某一個邊緣為止
5.背景圖片固定
作用：將背景圖固定在網頁的某個位置處，一直在視覺化區域中，不會隨著滾動條而發生位置的變化
屬性：background-attachment
取值：
（1）scroll 預設值，滾動
（2）fixed 固定
注意：為body設定背景圖時，才允許設定背景圖片的固定
6.背景定位
作用：改變背景圖在元素中的位置
屬性：background-position
取值：
（1）x y
x：背景圖水平偏移距離，取值為正，向左移動；取值為負，向右移動
y：背景圖垂直偏移距離，取值為正，向下移動；取值為負，向上移動
（2）x% y%
0% 0% ：背景圖在左上角
100% 100% : 背景圖在右下角
100% 0% : 背景圖在右上角
（3）關鍵字
x : left / center / right
y : top / center / bottom
7、背景的簡寫屬性
在一個屬性中指定背景的多個屬性值
屬性：background
取值：color url() repeat attachment position;
注意：如果不設定其中某個值的話，該位置將採用預設值
background:red; background:url(a.jpg) no-repeat;