CSS樣式:浮動 圖片連接 雪碧圖

元素的定位體系、定位體系的判斷、常規流盒模型中的尺寸、盒子的位置、浮動、常規流盒子和浮動盒子混合擺放、清除浮動、盒子的相對位置、元素重疊的問題、製做圖片連接、使用figure和caption表示圖片單元、實現雪碧圖的步驟:(非塊級元素)spa

1. 視覺格式化模型規定,定位體系一共有三種:①常規流(normal flow)②浮動(float)③絕對定位(absolute positioned);任何一個元素,必須屬於其中一種定位體系;不一樣的定位體系中,元素在包含塊中的尺寸和位置會有一些差別。orm

2.定位體系的判斷:常規流、絕對定位、浮動。繼承

3.常規流盒模型中的尺寸:只有margin中能夠取負值;照不一樣體系中的規則計算的
圖片

4.盒子的位置:盒子在包含塊的垂直方向上依次擺放,盒子在包含塊中佔據的尺寸是整個盒子的尺寸,垂直方向上,若兩個外邊距相鄰,則進行合併(摺疊)【margin的垂直方向都是正值的時候取最大值、一正一負進行相加、兩個都是負值時取最小值;margin的合併:垂直、相鄰】。文檔

5.浮動:當元素的float屬性取值爲left和right時,元素屬於浮動定位(不能夠繼承、默認值:none 取值:none、left、right)當一個元素浮動時:寬度取auto自動值時 取值:適應內容寬度、高度自動時:取值:適應內容高度、上下左右爲自動值時取值爲:0px;盒子的位置①左浮動的盒子向上向左排列②右浮動的盒子向上向左排列③浮動盒子的頂邊不得高於上一個盒子的頂邊斯若剩餘空間沒法放下浮動的盒子,則該盒子向下移動,直到具有足夠的空間能容納盒子,而後再向左或向右移動。it

6.常規流盒子和浮動盒子混合擺放:浮動盒子在擺放時,要避開常規流盒子;常規流盒子在擺放時,無視浮動盒子;若是咱們設置的某一個標籤爲浮動流,那麼它就會脫離文檔流(表示浮動元素的內容不佔用父級的content區域,稱爲高度坍塌)。io

7.float

相關文章
相關標籤/搜索