目標大綱
1.vertical-align為何不起作用??
vertical-align只鍾情於「inline-block內聯塊級元素/inline元素」
vertical-align屬性 text-bottom是與父標籤的文字底部對齊
效果栗子:
我是一段文字.....2.如何消除下面的間隙是如何出現的??
源**
1view codedoctype html
>
2<
html
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>vertical-align
title
>
6<
style
>7*
11.box
17.inner-box
2425
.box_1
31.box_1 img
34.box_1 span
37style
>
38head
>
39<
body
>
40<
div
class
="box"
>
41<
span
class
="inner-box"
>
span
>
42這是一段文字內容_vertical-align......
>這是一段文字內容_vertical-align......
span
>
46div
>
47body
>
48html
>
預設情況下vertical-align與一段文字的基線baseline對齊,由於文字存在line-height高度,所以就會出現間隙
3.如何消除下面的空白間隙??
a.設定vertical-align值,vertical-align: top/middle/bottom;
imgb.讓vertical-align失效,vertical-align 只對「inline-block內聯塊級元素」有效,我們只設定display:block就可以搞定
imgc.設定line-height行高足夠小
div.box_1d.通過line-height間接控制,font-size字型足夠小
div.box_1消除下面空白間隙的幾種方法原始碼
1view codedoctype html
>
2<
html
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>消除下面空白間隙的幾種方法(原因vertical-align與line-height導致)
>這是一段文字內容_vertical-align......
span
>
29div
>
30body
>
31html
>
【資料參考】
我對css-vertical-align的一些理解與認識(一)/
CSS 關於css中的border
曾經一直以為html中的border是直角的,直到有一天 test效果如下 突然有一種被欺騙了的感覺。我們可以選擇理解乙個border為兩個三角形再加乙個矩形。如上所示。繪製小尾巴 當對乙個角應用圓角樣式,如果這個角相鄰的兩個border乙個有定義而乙個無定義,那麼繪製的結果就是由粗到細的 小尾巴了...
CSS中引入CSS樣式的方法
html宣告標籤 定義和用法 宣告必須是html文件的第一行,位於標籤之前。宣告不是html標籤 他是指示web瀏覽器關於頁面使用哪個html版本進行編寫的指令 在html4.0中,宣告引用dtd,因為html4.01基於sgml。dtd規定了標記語言的則 這樣瀏覽器才能正確的呈現內容。html5不...
css中強制換行
結構 1.transshipment booking system is launched只對英文起作用,以字母作為換行依據 2.transshipment booking system is launched只對英文起作用,以單詞作為換行依據 3.transshipment booking sys...