內邊距 邊框 外邊距

margin padding 簡寫順序：順時針方向。未聲明的一邊會應用對邊的值

border三個屬性

border-wdith 默認值medium

border-style 默認值none

border-color 默認值 black

寫代碼時最好先聲明*{margin:0px;padding:0px}

在設置兩個元素間的垂直外邊距時，同一個外邊距只會采用margin較大的那個值，不會疊加。而水平外邊距會疊加。

文本元素的邊距通常上下邊距使用em,左右邊距使用px

CSS盒模型

（1）沒有設置寬度的元素始終會拓展到和其父元素寬度相同為止

（2）有設置寬度的元素設置內邊距，邊框，外邊距都會增加元素的寬度

border-box 默認是content-box ,設置為box-sizing可以實現content-box的效果

浮動

浮動元素會脫離文檔流,實現的效果就是盡可能的向左上角或者右上角遷移

浮動非圖片元素時必須設置寬度，圖片有自身的默認寬度因而不用設置

有父元素的控制方式：

（1）設置overflow:hidden,可靠的使父元素包含浮動的子元素

（2）設置父元素也浮動，同時設置父元素的兄弟元素clear:left，這樣父元素的兄弟元素不會與父元素並排在同一行

（3）在父元素的最後添加一個非浮動的子元素，clear:left。或者應用.clearfix規則

.clearfix:after{
content:‘.‘,
display:block,
visibility:hidden,
clear:both,
height:0
}

註：句點是最小的內容。可以使用clear:both來設置，同時包含了left和right的情況

在沒有父元素的情況下，使用clearfix規則，最合適。

定位position

默認值static

相對定位relative:相對的是原來它在文檔流中的位置

絕對定位absolute:相對body元素進行定位。在未設置父元素的position屬性時，設置父元素的postion之後，子元素會相對於父元素進行定位

固定定位fixed:相對上下問的視口定位

顯示屬性display

塊級元素變內聯元素：display:inline 反之：display:block

inline元素的寬度隨內容變化，無法設置width和height,也無法設置除了左右之外的邊距

inline-block 相當於將block元素inline展示，可以設置寬高及上下邊距

背景

border-color的顏色在未設置的情況下會等於color

background-image:url(path/filename) 修改平鋪方式background-repeat 修改平鋪起點background-position

background-repeat: repeat-x repeat-y no-repeat round 通過調整圖片大小來適應背景區域 space通過在圖片間添加空白來適應背景區域

通過設置

background-positon:50% 50%;
background-repeat:no-repeat;

實現背景圖片的居中效果，表示圖片50% 50%的位置和元素50% 50%的位置對齊

在設置background-position最好使用百分比

background-size用來調整背景圖片的大小 cover拉大圖片 contain縮放圖片

background-attachment 表示背景圖片是否隨著元素的滾動而移動

background簡寫

background: url() position color repeat size attachment

添加多張背景圖片

background:
 url(images/turq_spiral.png) 30px -10px no-repeat,
 url(images/pink_spiral.png) 145px 0px no-repeat,
 url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75; 

先列處的圖片顯示在上方

漸變

linear-gradient線性漸變 radial-gradient 放射性漸變

CSS3學習筆記-元素定位