1、標準文檔流
什麼是標準文檔流
瀏覽器在解析頁面的時候,從上到下從左到右這樣的一個解析過程,被稱爲標準文檔流。
標籤的分類(二)
容器級別:h1~h6 ol ul dl li dt dd table div
文本級別:p img a input label select textarea span
塊級標籤:h1~h6 ol ul dl li dt dd table div p
行內標籤:img a input label select textarea span
行塊的特點
塊級標籤:
塊級標籤相當霸道,如果不設置寬和高,那麼它的寬將是它爹的寬,它的高將是內容撐開的高,如果設置寬和高,那麼它的寬和高將是設置的寬和高。就算設置了寬高,它還是霸道的佔據它爹的一行。
行內標籤:
行內標籤非常懦弱。如果不設置寬高,那麼它的寬和高都是由內容撐開的。如果設置了寬和高,行內標籤也不會理睬,它的寬和高還是內容的寬和高。也就是說,行內標籤的寬和高無論在什麼時候都是由內容所決定的。行內標籤它不會獨自的佔據它爹的一行,如果幾個行內標籤在一起,那麼它們會並排一行。只有它爹的寬不夠它們並排的時候纔會換行。
可置換行內標籤和不可置換行內標籤:
可置換元素雖然是行內標籤,但是他也可以設置寬和高,比如img input textarea,不可置換元素無法設置寬和高。
行塊轉換:
如果想要一個塊級標籤當做行內去用,那麼可以給這個塊級標籤添加display:inline
這樣的話,這個塊級標籤就會變成行內標籤,它的特點也就和行內標籤無異了。
如果想要一個行內標籤當做塊級去用,那麼可以給這個行內標籤添加display:block
這樣的話,這個行內標籤就會變成塊級標籤,它的特點也就和塊級標籤無異了。
2、盒子模型
盒子模型包含4部分內容,盒子的大小最終由這四部分決定:
內容區域
邊框
內邊距
外邊距
外邊距的表示方式
- 綜合表示法(上 右 下 左)
margin:100px;代表上下左右都是100px;
margin:100px 50px;代表上下100px,左右50px;
margin:100px 50px 30px:代表上100px 右50px 下30px 左50px;
margin:100px 50px 30px 20px:代表上100 右50 下30 左20; - 按照方向去設置
margin-top:100px;
margin-right:100px;
margin-bottom:100px;
margin-left:100px;
內邊距的表示方式
參照外邊距
邊框的設置方式
-
綜合設置法:
border:1px solid red;綜合設置四個邊的邊框。
-
按照方向綜合設置
border-top:1px solid red;
border-right:2px dashed green;
border-bottom:5px dotted yellowgreen;
border-left:10px double blue; -
按照屬性來綜合設置
border-width:1px 2px 3px 4px;
border-style:solid dotted dashed double;
border-color:red green blue black; -
按照方向和屬性來設置
border-top-width:10px;
border-top-style:dotted;
border-top-color;red;
3、盒子模型當中的一些小問題
- 行內元素垂直方向上margin和padding失效;
- 在標準文檔流當中,垂直方向margin有塌陷現象;
- 文本在盒子當中水平居中,
text-align:center
; - 單行文本在盒子正中心,
text-align:center
;line-height=盒子高度
; - 盒子在盒子中水平居中,
margin:0 auto
; - margin描述的是兄弟的關係,padding描述的是父子的關係,在碰到父子之間間距問題的時候,要善於運用父親的padding而不是兒子的margin。當運用父親的padding把兒子往下擠完了以後,父親會默默的變大,這會我們要去精確還原父親的盒子的大小。什麼方向上padding了就在什麼方向上減小內容的區域,這就是精確還原盒子。
4、其他
1 vertical-align:middle
vertical-align
只能用在行內標籤上。
通常情況用在圖片和文字並排在一行的時候,默認圖片是底部和行內基線對齊的(就是文字底部),想要讓文字排在圖片中線位置,就要對圖片添加vertical-align:middle;讓圖片中線默認和行內基線對齊。
2 字間距和詞間距
- 字間距:
letter-spacing:1em
;控制中文漢字之間的間距,還有英文字母和字母之間的間距; - 詞間距:
word-spacing:1em
;控制英文單詞和單詞之間的間距;
3 首行縮進
首行縮進:text-indent:2em
;
4 background-image
background-image:url(圖片的相對或絕對路徑)
;這個屬性是在盒子當中引入一張背景圖片。background-repeat:no-repeat
;
當引入背景圖片後,默認背景圖片是重複平鋪的,x軸和y軸同時重複。但是我們一般不讓背景重複,所以常需要設置這個屬性爲no-repeat;如果僅僅想在x軸方向重複可以設置爲repeat-x;如果僅僅想在y軸方向重複可以設置爲repeat-y;background-size:100% 100%
;這個屬性用來設置背景圖片的大小,通常情況我們是讓背景恰好和盒子一樣大小。這個屬性可以設置兩個值,表示的是背景圖片的寬和高。寬和高可以用px,也可以用其它的大小單位表示。
這個屬性還有一個值,一個cover 一個contain;
cover是覆蓋的意思,它會等比縮放我們的圖片,當恰好覆蓋住盒子爲止,如果圖片大了就會被裁掉。(以盒子爲參考)
contain是包含的意思,它也會等比縮放我們的圖片,當盒子恰好能夠包含這張圖片的時候爲止。這個圖片可能縮放的比盒子小,也就是說可能會比盒子小。(以圖片爲參考)background-position:100% 100%
;
這個屬性非常重要,後面我們在學習CSS精靈圖(雪碧圖)的時候也要用到這個屬性,它是背景定位的意思。- 當背景圖片比盒子小的時候,我們可以用這個屬性控制整張圖片在盒子當中的位置。這個屬性和屬性值也是兩個值,第一個代表圖片左上角距盒子左邊的距離,第二個值代表圖片左上角距盒子上邊的距離。如果設置爲100% 100%那麼代表背景圖片在盒子右下角。如果設置爲50%50%代表圖片在盒子正中心。我們常用的是這種兩個值的設置方式。也有單詞的表示方式,通常用來表示9個特殊的位置,用起來方便,但是有侷限性,不能表示所有你想要的位置。這個屬性值可以是負數,如果是負數,那麼會往相反的方向定位,超出盒子的部分會被裁剪掉。
- 當背景圖片比盒子大的時候,這個屬性可以控制讓這個盒子顯示背景圖片的那個位置。因爲圖片比盒子大,超出盒子的部分是看不到的。通過這個屬性可以讓背景圖片在盒子當中移動。雪碧圖通常就是這樣做的。一般這個屬性值爲負。