CSS3_2.框模型、背景、漸變
框模型&背景&漸變
1 框模型
1.1 框模型
塊級元素：獨立成行，可以設定寬高，margin上下有效
行內元素：與行內元素和行內塊共用一行，寬高無效，margin上下無效
行內塊元素：與行內元素和行內塊共用一行，可以設定寬高，margin上下有效；行內塊元素一經調整會影響整行元素
框模型Box Model定義元素框處理元素內容、內邊距和外邊距的方式
width和height指定內容區域的寬度和高度；增加內邊距、邊框和外邊距不會影響內容區域尺寸，只會增加元素框的總尺寸。
物件實際寬度=左側外邊距+左側邊框+左側內邊距+寬度+右側內邊距+右側邊框+右側外邊距
box-sizing指定框模型的計算方式,取值:
預設值content-box,物件寬度計算方式為上述方式,設定的width/height是內容區域的大小;
border-box設定的width/height是內容區域+左右內邊距+左右邊框大小;
元素佔地寬度=左右外邊距+width;
元素佔地高度=上下外邊距+height;
1.2 外邊距
-
外邊距定義：圍繞在元素邊框周圍的空白區域是外邊距；透明的外邊距會在元素外建立額外的空白。
-
外邊距margin：與下一個元素之間空間量 margin:value;
單邊設定：margin-top/left/right/bottom:value;
外邊距的屬性值可能為px(畫素)、百分比(%)、或自動(auto)和負值
auto自動計算塊級元素的外邊距，margin:0 auto控制塊級元素在水平方向居中；margin:100px auto上下100px，左右居中對齊；margin: auto等於margin: 0 auto垂直外邊距將變為0 -
預設以下塊級元素存在外邊距：body、h#、p、ol、ul、dl、pre；使用樣式重寫*{}margin:0;padding: 0;}重置具備外邊距的元素預設樣式。
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,
hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0} -
margin取值為auto，瀏覽器會自動計算外邊距以控制塊級元素水平方向居中顯示的效果
-
簡潔寫法
margin:value;(四個方向相同)
margin:value(上下) value(左右)
margin:value(上) value(左右) value(下)
margin:value(上) value(右) value(下) value(左) -
外邊距合併
兩個元素的外邊距相遇時會合併成一個margin，外邊距的高度等於兩個合併的外邊距的較大高度 -
行內元素以及行內塊(input)元素外邊距特點：行內元素垂直外邊距無效(img除外)，水平外邊距相遇則兩個值相加;行內塊設定垂直外邊距，整行元素都會跟著改變
-
當父元素沒有上邊框且為第一個子元素設定上外邊距時會導致外邊距溢位作用到父元素：
1)通過給父元素新增上邊框會影響父元素的佔地高度；
2)通過給父元素新增內邊距會影響父元素的佔地高度；
3)父元素新增overflow:hidden;
4)在父元素的第一個子元素之前，新增空<table></table>，這是因為table高度只與內容有關
1.3 內邊距
1.3.1 內邊距定義
內邊距：內容區域和邊框之間的空間；會擴大元素邊框佔用的區域
1.3.2 內邊距padding
內容與框線之間的距離，padding:value;
內邊距屬性值可以為畫素、百分比；
單邊設定padding-top/right-bottom-left:value;
1.3.3 簡潔寫法
padding:value;(四個方向相同)
padding:value(上下) value(左右)
padding:value(上) value(左右) value(下)
padding:value(上) value(右) value(下) value(左)
2 背景
2.1 概述
背景樣式控制HTML元素的背景顏色、背景影象
2.2 背景屬性
2.2.1 背景色
background-color：為元素設定背景色，可取值為任何合法的顏色值以及transparent；
會填充元素的內容、內邊距和邊框；如果邊框有透明部分，則透過顯示背景色；
2.2.2 背景圖片
以圖片作為背景，可以設定影象的位置、平鋪、尺寸等.
預設值是none，表示背景上沒有放置任何影象；使用起始字母url附帶影象的url值(可以是相對URL或絕對URL)來設定背景影象
background-image:url(“image/bg_01.jpg”);
2.2.3 背景平鋪
預設背景影象在水平和垂直方向上重複出現(平鋪)，創建出“牆紙”的效果，使用background-repeat屬性控制背景影象的平鋪效果。
repeat：預設值，在垂直和水平方向重複
repeat-x：僅在水平方向重複
repeat-y：僅在垂直方向重複
no-repeat：僅顯示一次
2.2.4 背景圖片尺寸
background-size，規定背景影象的尺寸，取值方式：
value1 value2：寬度、高度；
value1% value2%：百分比；
cover：背景影象擴充套件至足夠大以完全覆蓋北京區域，可能無法顯示部分圖片
contain：背景影象擴充套件至最大尺寸，使寬度和高度完全適應內容區域
2.2.5 背景圖片的固定
background-attachment：預設背景影象會隨著頁面滾動而移動；
通過background-attachment屬性設定：
scroll：預設值，背景隨文件滾動,相對元素固定
fixed：背景影象固定,相對視窗固定
2.2.6 背景定位
background-position屬性改變影象在背景中的位置。
2.2.7 背景屬性
background屬性在一個宣告中設定所有背景屬性。
語法：background:color url() repeat attachment position;
如果不設定將使用預設值
3 漸變
3.1 漸變定義
漸變指多種顏色之間的平滑過渡；
可以指定多箇中間顏色值(至少兩個色標)，每個色標包含一種顏色和一個位置；
漸變可以用在任何使用背景圖片的地方
3.2 漸變語法
background-image屬性進行設定
linear-gradient：線性漸變
radial-gradient：徑向漸變
repeating-linear-gradient：重複線性漸變
repeating-radial-gradient：重複徑向漸變
3.3 線性漸變
linear-gradient(angle, color-point1, color-point2,…)
angle：第一個引數指定漸變的方向，to top(0 deg)，to right(90deg)，to bottom(180 deg)，to left(270deg)；
color-point：表示顏色的起始點、中間點或者結束點，取值顏色和位置的組合，red 0、green 50%等
Eg. background-image: linear-gradient(90deg, red 0, #ccc 30%, #fff 100%);
3.4 徑向漸變
radial-gradient(size at position, color-point1, color-point2,…)
position：第一個引數指定漸變的圓心位置，預設值為center，也可以取值為數值x y、百分比、或者關鍵字left/center/right top/center/bottom；
color-point：表示顏色的起始點、中間點或結束點，取值為顏色和位置的組合。
Eg. background-image: radius-gradient(200px at left top, red, blue);
3.5 重複漸變
重複線性漸變
repeating-linear-gradient(angle, color-point1, color-point2,…)
angle：第一個引數指定漸變的方向，to top(0 deg)，to right(90deg)，to bottom(180 deg)，to left(270deg)；
color-point：表示顏色的起始點、中間點或者結束點，取值顏色和位置的組合，red 0、green 50%等
Eg. background-image: repeating-linear-gradient(to top, #fff, #f9f9f9 10px, #ccc 50px);
重複徑向漸變
repeating-radial-gradient(size at position, color-point1, color-point2,…)
position：第一個引數指定漸變的圓心位置，預設值為center，也可以取值為數值、百分比、或者關鍵字；
color-point：表示顏色的起始點、中間點或結束點，取值為顏色和位置的組合。
Eg. background-image: repeating-radius-gradient(50px at center, red 0px, green 20px, orange 50px);
3.6 瀏覽器相容性
各瀏覽器新版本均支援漸變屬性。
不支援的版本：
Firefox需要字首-moz-
Chrome和Safari需要字首-webkit-
Opera需要字首-o-
IE -ms-
使用相容性寫線性漸變方向不能使用to top ,j直接寫起始點top right bottom left;background-image:-webkit-linear-gradient-(bottom, #f00 0px, #ff0 100px, #0ff 200px);