深入理解CSS中的vertical-align屬性和基線問題_CSS教程_CSS_網頁制作

來源:腳本之家  責任編輯:小易  

!DOCTYPEhtml>html lang="zh-cn">1p:nth-of-type(7){color:#f00;}p:nth-child(6){color:#933;}第1個p第2個p第3個p第4個p第1個span第5個p第3個span第6個p第7個p第2個span不知道以上代碼是否能看明白,nth-of-type的時候,只計算p的數量,忽略span,如果是nth-child的時候,全部計算,個人是這么理解的,也不知道是否準確www.13333515.buzz防采集請勿采集本網。

vertical-align屬性主要用于改變行內元素的對齊方式,對于行內布局影響很大,如果不了解的話,我們開發調整樣式的時候很容易出錯。

:nth-child可以選擇父元素下的字元素,:nth-of-type也可以。但是它們到底有什么區別呢?其實區別很簡單:nth-of-type為什么要叫:nth-of-type?因為它是以\"type\"來區分的。也就是說:ele:nth-of-

網上關于這個屬性的原理說得很是復雜,看一眼就讓人覺得望而生畏,而且大可不必完全理解其原理,只要懂得其規律,我們足夠使用即可,下面把我的理解分享給大家:

12345678910111213141516171819202122232425!}p:nth-child(6){color:#933;nth-of-type的時候,只計算p的數量,忽略span,如果是nth-child的時候,全部計算,我是這么理解的,也不知道是否準確

基線

要了解vertical-align屬性,必須懂得基線,怎么理解基線呢?

:nth-child 不區分子元素的類型,而:nth-of-type 則區分子元素的類型。比如說 div:nth-child(odd){background:red} div:nth-child(even){background:blue} 第1行 第2行 第3行 第4行 第5行 第6

1、我們寫網頁是在一個矩形的顯示屏上,經常是一行一行來布局,不可避免的是一行中會有多個內容,那么這行內容是如何上下對齊的呢?答案就是默認讓他們的基線對齊。

要是想深入了解.還不如繼續研究css3 不過也不知道你用了一年還覺得自己對css有什么不足?你覺得自己已經很好的控制好瀏覽器兼容性了么?能不用測試就一次性寫出兼容大部分主流瀏覽器的頁面么?手寫html.css,

2、各種字體、圖片、行內html元素等可展示的內容都有各自的基線,要想知道具體內容的基線我們可以找一個簡單的參照物:小寫字母“x”,為什么找它呢?因為英文字母的基線恰好就是小寫"x"的最下方,比較容易看出。

按f12,打開頁面調試,如下圖 會有很直觀的box,自己看

知道了以上兩點我們就可以很容易知道其他內容元素的基線位置了,把其他元素和小寫“x”放在一行展示一下就一眼可以看出了:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { border: 1px solid cyan; font-size: 30px; } div .span1 { display: inline-block; background-color: green; } div .span2 { display: inline-block; overflow: hidden; background-color: green; } </style></head><body> <div> x <img src="./demo.jpg" alt=""> 漢字 <input type="text"> <button>按鈕</button> <span class="span1">span1</span> <span class="span2">span2</span> </div></body></html>

 

如上圖紅色為該行元素基線,可以發現圖片和overflow:hidden樣式的元素的基線位置是最下方,中文、輸入框和button按鈕的基線位置都在中下方的位置。可以看出,這些行內元素的排列是先按基線上下對齊,然后把父元素撐開。

值得注意的一點是,如果我們直接往div中放入一個圖片,會發現圖片底部距離div的下方有一個空隙;這是因為 行內元素各自基線對齊以后還要和父元素的字體基線保持一致, 換句話說: 每個行內元素的基線都要向父元素字體基線看齊。 但當父元素的行高和字體大小樣式改變的時候,會使得父元素字體基線位置改變,從而使得行內元素的位置整體上下移動。雖然我們只看到了一個圖片沒有看到字,但是父元素有默認的line-heightfont-size,也會悄悄地影響布局,你會發現再往div中放入了一個小寫字母“x”,如下圖,它的下方剛好占據了空隙的位置。所以知道了這個原因,想去掉這個空隙的話,只需要把父元素的line-heightfont-size設置為0,或者把圖片設置成塊級元素,讓它獨占一行就可以了。同樣的,如果div中直接放入一個input輸入框,輸入框上方也會有個空隙,與此類似,只是圖片和輸入框的基線位置不同罷了。

 

vertical-align屬性

了解了上述行內元素的排序原則,我們可能會有個疑問:如果我們需要某些行內元素不按照基線排列怎么辦?答案就是使用vertical-align屬性。

首先,vertical-align屬性是針對行內元素才有效果,它改變了當前行內元素和父元素字體兩者之間的對齊方式,默認值是baseline,即兩者基線對齊,如上面我們測試的一樣。

關于各個屬性值可參考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align ,可簡單在div中加入小寫字母“x”和一張圖片分別切換屬性進行驗證即可。

有兩個屬性稍作解釋:

1、當設置屬性為"%"的時候,指的是當前行內元素的line-height屬性值的占比,可以設置成正負值,行內元素基線相對父元素字體基線上下移動這個百分比的距離。如下圖,設置圖片vertical-align: 50%; line-height: 30px; 本來圖片最下方應該和"x"底部對齊的,現在上移了15px,如果是-50%,就會相對下移15px。當然也可以直接設置為length,vertical-align:15px;效果也是一樣的。

 

2、當設置屬性為“middle”的時候,行內元素中間位置會和父元素字體基線上方1/2"x-height"位置對齊,“x-height”其實就是父元素中小寫字母“x”的高度,簡單來說,就是行內元素的中間位置會和父元素中的小寫字母“x”的中間位置(x的交叉點)對齊,就相當于兩者中間對齊了。

 

總結

到此這篇關于深入理解CSS中的vertical-align屬性和基線問題的文章就介紹到這了,更多相關css vertical-align屬性和基線內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持真格學網!

簡單說DIV是一個盒子,CSS是控制這個盒子的大小寬高-還有美化內容來自www.13333515.buzz請勿采集。


  • 本文相關:
  • 淺談css中vertical-align和line-height的用法
  • css屬性探秘系列(四):vertical-align
  • css中圖片于文本的基線對齊與vertical-align屬性設置
  • css 垂直對齊 css中vertical-align屬性(垂直對齊)的使用說明
  • css vertical-align屬性的一些理解與認識(二) text-top篇
  • css vertical-align屬性的一些理解與認識(一)
  • css實例:vertical-align屬性讓網頁層居中
  • 誰能讓我更深入的理解DVI和CSS?
  • CSS3中:nth-child和:nth-of-type的區別深入理解
  • CSS3中:nth-child和:nth-of-type的區別深入理解
  • CSS3中:nth-child和:nth-of-type的區別深入理解
  • CSS3中:nth-child和:nth-of-type的區別深入理解
  • CSS3中:nth-child和:nth-of-type的區別深入理解
  • CSS3中:nth-child和:nth-of-type的區別深入理解
  • 深入學習CSS書
  • 怎樣深入理解CSS+DIV網頁設計中的盒子模型
  • 在自學Java,HTML,CSS重要嗎?需要深入了解嗎?
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss教程cssvertical-align屬性淺談css中vertical-align和line-height的用法css屬性探秘系列(四):vertical-aligncss中圖片于文本的基線對齊與vertical-align屬性設置css 垂直對齊 css中vertical-align屬性(垂直對齊)的使用說明css vertical-align屬性的一些理解與認識(二) text-top篇css vertical-align屬性的一些理解與認識(一)css實例:vertical-align屬性讓網頁層居中css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css控制ul li 的樣式詳解(推薦)html設置超鏈接字體顏色和點擊后的字體顏色div水平垂直居中的完美解決方案css設置各種中文字體如雅黑、黑體、宋體、楷體等等css 文本字體顏色設置方法(css color)css 漂亮搜索框美化代碼css自定義select下拉選擇框的樣式(不用其他標簽模擬)css圓角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行縮進兩個文字css 實現漸變效果小結( linear-gradient線性漸變 和 r解決type=file 文件修改表單 名稱不能正常回顯的問題移動端前端適配方案(總結)css 橫向進度條和豎向進度條實現代碼css運用阿里巴巴矢量庫快速在對應位置加上好看的圖標詳解盒模型大小取決于它的padding,margin,border數css+svg實現b站充電效果的示例代碼css動畫實現領積分效果的思路詳解html/css中的空格處理及如何保留頁面中的空格css實現氣泡的小尖角效果
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.13333515.buzz All Rights Reserved
    3排列五开奖结果