bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

vertical-align使用介紹是怎樣的-創新互聯

vertical-align使用介紹是怎樣的,針對這個問題,這篇文章詳細介紹了相對應的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

網站建設公司,為您提供網站建設,網站制作,網頁設計及定制網站建設服務,專注于成都企業網站建設,高端網頁制作,對除甲醛等多個行業擁有豐富的網站建設經驗的網站建設公司。專業網站設計,網站優化推廣哪家好,專業網站推廣優化,H5建站,響應式網站。

前言

最近學習CSS有點走火入魔了,CSS一直是自己的短板,沒想到最近居然能靜下心來學了這么多CSS的東西,著實值得表揚。

俗話說得好,不瘋活不成魔,我最近真有點刀狂劍癡的味道了。

有時候晚上學習結束后,一晚上睡得很淺,我感覺下雨了,但下的雨居然全部是html標簽!

我在電梯里面看到了一張手機中的圖片,我詭異的笑了,因為我好像看到了他的布局了!

于是,我魔杖了,是的,這是入魔的征兆!凡是皆有其度,之前的過度就導致了我今天的問題。

我今天居然不知道該學習什么了。。。。學習如逆水行舟,所以我們都要放平心態,一起再來看看吧,一起建設我們的CSS世界觀啦!

CSS布局(一)

vertical-align

對的,本文的主角就是這個家伙,其實之前一次又一次的提到了這個家伙,今天卻又把它揪了出來,因為我發現我對他還是不夠了解。

數字

vertical-align: 2px;

這個的意思就是元素相對于基線向上偏移2px的意思,于是我們又會遇到基線,什么是基線呢?

我這里不好意思偷圖了,就自己畫一個吧:

知道神馬是基線了吧,雖然老夫很久不寫字了,但是想不到還是如此的飄泊!

百分比

我們之前碰到的百分比,比如width/height都是相對于父元素,其中font-size是相對于最近一個擁有該屬性的元素,而vertical-align是相對于該標簽的line-height而言的。

以上兩個來個例子:

這是一個好姑娘,于是我們改下代碼:

PS:上面犯了一個很2的錯誤,將vertical-align用到了div上,大家不要像我這樣2



代碼如下:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div { margin: 10px; border: 1px solid black; }
span { margin: 10px; border: 1px solid black; line-height: 20px; }
</style>
</head>
<body>
<div>
<span >刀狂劍癡葉小釵 </span><span >
刀狂劍癡葉小釵 </span>
</div>
</body>
</html>



這塊地方有很多可以注意的,也有很多東西可以看,所以我這里建議各位去運行試試。

你會發現div的高度會跟著變化滴!!!

來,我們一起來探討下這個問題,哎,我這里還是上例子吧:

大家看這個例子,我這里將其設置為負值,行內元素就跑到塊級元素外面去了哦。

更有意思的東西在后面呢,我們在一個塊級元素里面有2個行內元素,我們是可能將塊級元素撐開的!!!

在有2個行內元素時候,我們為其中一個vertical-align設置較大或者較小的值就會導致塊級元素變高!!!這是為什么呢?

其實這個要理解說容易也容易說難還真有點難,我們想象其中的盒子一個往上一個往下(相對于基線),所以整個塊級盒子變高了!!!



關于vertical-align使用介紹是怎樣的問題的解答就分享到這里了,希望以上內容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關注創新互聯行業資訊頻道了解更多相關知識。

文章題目:vertical-align使用介紹是怎樣的-創新互聯
文章轉載:http://vcdvsql.cn/article0/ejjoo.html

成都網站建設公司_創新互聯,為您提供搜索引擎優化企業網站制作品牌網站設計網站建設Google小程序開發

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

成都seo排名網站優化