前端學習-CSS-02
1、框模型
1、框
框就是個容器，目的為了承裝其他的東西
html中所有的元素都可以稱之為 框
2、框模型
Box Model : 也稱為盒子模型
定義了元素框 處理元素內容尺寸、內邊距、邊框 和 外邊距的方式
元素內容尺寸 ： width , height
div{
width:100px;
height:100px;
}
邊框：border
div{
border:1px solid #ddd;
}
注意：當框模型(內邊距，外邊距，邊框)介入到元素後，元素的 內容區域 尺寸是不變的，但是會增加元素框的總尺寸
元素總寬度 = 左右外邊距 + 左右邊框 + 左右內邊距 + width;
元素總高度 = 上下外邊距 + 上下邊框 + 上下內邊距 + height;
eg :
div{
width : 200px ;
border: 2px solid #ddd;
左右外邊距 : 15px;
左內邊距: 8px;
右內邊距: 4px;
}
總寬度：200 + 2*2 + 15*2 + 8 + 4 =
200 + 4 + 30 + 12 = 246px
3、外邊距
1、什麼是外邊距
在元素邊框周圍的一些空白區域，這些區域是透明的，預設情況下，是不允許被其他元素所佔據的。也可以表示為
2、語法： margin:value; (四個方向的外邊距)
單邊設定：
margin-top : 上外邊距
margin-bottom:下外邊距
margin-left:左外邊距
margin-right:右外邊距
取值： 單位: px %
auto : 自動，只對 左右外邊距有效,設定水平居中
負值 : 目的 是為了移動元素
margin-left:取負值，為了向左移動元素
margin-top :取負值，為了向上移動元素
取值為 auto ：由瀏覽器自己計算外邊距。左右方向取值為
取值數量：
margin:value; 四個方向外邊距
margin:v1 v2; 上下 左右
margin:v1 v2 v3; 上 左右 下
margin:v1 v2 v3 v4; 上 右 下 左
3、預設 外邊距
html元素裡， 有些元素預設具備 外邊距的
h1~h6 p ul body dl,dd
如果程式中，不想使用預設的外邊距，可以設定為 0
4、外邊距問題
1、(垂直)外邊距合併
當兩個垂直外邊距相遇時，它們將形成一個外邊距，稱為 外邊距合併
合併後的外邊距的高度值為兩個元素中 外邊距較大者的值
2、外邊距溢位
父子元素中，如果設定 子元素 的上下外邊距時，預設情況 會 被作用到父元素的外邊距上
解決方式：
1、可以為 父元素 增加邊框
2、增加 父元素 的 padding-top
最好將 父元素的 高度 相應的 減少一部分數值
4、內邊距
1、什麼是內邊距 內容區域 與 邊框之間的距離控制元件
注意：內邊距 會將元素邊框 撐大
2、屬性
padding : value;
padding-top/bottom/right/left:
取值： 單位：px %
數量：
padding:value ; 上下左右
padding:v1 v2 ; 上下 左右
padding:v1 v2 v3;上 左右 下
padding:v1 v2 v3 v4;上 右 下 左
2、背景
1、背景顏色
屬性：background-color
取值：可設定為合法的值 或 transparent
注意：預設情況下，背景(顏色、影象)是從邊框位置處就開始填充
2、背景圖片
屬性：background-image
取值：url("影象URL")
background-image:url("xxxx/xxx.jpg");
background-image:url('xxxx/xxx.jpg');
background-image:url(xxxx/xxx.jpg);
3、背景平鋪
屬性：background-repeat
取值：
repeat : 即水平方向又垂直方向平鋪(預設值)
no-repeat : 沒有平鋪
repeat-x : 僅水平方向平鋪
repeat-y : 僅垂直方向平鋪
4、背景圖片尺寸
屬性：background-size
取值：
value1 value2 : 寬度 高度
value1% value2% : 父容器的寬和高的佔比
cover : 覆蓋，將背景影象擴充套件至足夠大，直到背景圖已經覆蓋了元素的所有區域.有可能導致背景圖不能完整的顯示在元素中
contain: 包含，將背景圖擴大，直到背景圖已經碰都某一個邊緣位置（右、下）,背景圖能夠完完整整的顯示在元素中，不一定能覆蓋到所有的區域
5、背景圖片固定
屬性：background-attachment
取值：
scroll ：背景 會隨文件發生滾動
fixed : 固定 ， 背景不會隨著內容而發生滾動
6、背景定位
改變背景圖片在元素中的位置
屬性：background-position
取值：
x y : x水平偏移位置,值為正 向右移動，值為負，向左移動
y垂直偏移位置,值為正 向下移動，值為負，向上移動
x% y% :
左上角 : 0% 0%
右下角 : 100% 100%
居中顯示 : 50% 50%
關鍵字：
x : left,center,right
y : top,center,bottom
CSS Sprite : 將多個背景圖合併到一張裡面去，根據需求情況，通過 背景定位 對背景圖片進行偏移，從而找到要顯示的影象
7、背景屬性
將 以上 幾個屬性全部綜合到一起,通過一個屬性描述所有的值
屬性:background
取值：color url() repeat attachment position;
常用值：
background:url() reapeat position;
background-image:url(Images/user.png);
background-repeat:no-repeat;
background-position:right center;
background:url(Images/user.png) no-repeat right center;
3、漸變
1、漸變語法：
屬性：background-image
取值：
linear-gradient() -- 線性漸變
radial-gradient() -- 徑向漸變
repeating-linear-gradient() -- 重複線性漸變
repeating-radial-gradient() -- 重複徑向漸變
background-image:url(); -- 顯示背景影象
background-image:linear-gradient(); -- 顯示線性漸變顏色
2、線性漸變
屬性：background-image
取值:linear-gradient(angle,color-point1,color-point2,...)
angle:方向(角度)
to top : 向上 --> 0deg
to right : 向右 --> 90deg
to bottom : 向下 --> 180deg
to left : 向左 --> 270deg
color-point : 表示顏色的數值 和 位置 red 10px red 0%
background-image:linear-gradient(to top,red 0%,green 50%,blue 100%);
3、徑向漸變
屬性：background-image
取值: radial-gradient();
radial-gradient([size at position],color-point1,color-point2,....);
size at postion :
可以省略不寫
size : 標識的圓的半徑 以 px 為單位
position : 圓心的位置
top,left,right,bottom,center 具體數值 百分比
4、重複漸變
repeating-linear-gradient(angle,color-point);
color-point:
位置 取具體的數值或者 不到 100% 的 數字
repeating-radial-gradient();
*******************************************************************************