成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS屬性中經(jīng)常出現(xiàn)的百分比

mylxsw / 2576人閱讀

摘要：絕對(duì)單位英寸磅相對(duì)單位與元素字號(hào)掛鉤與元素字體的高度掛鉤與根元素字號(hào)掛鉤與像素掛鉤另一屬性值的百分比。定義基于父元素寬度的百分比的縮進(jìn)。參考權(quán)威教程節(jié)樣式可以使用百分比的屬性總結(jié)淺析屬性之中經(jīng)常出現(xiàn)的百分比

起源：一道面試題（貓眼電影） 問題：css中的單位都有哪些？可以取百分?jǐn)?shù)的單位有哪些？其中margin-top取百分?jǐn)?shù)時(shí)是相對(duì)于誰來計(jì)算的？ 回答：

（1）css中的單位：CSS規(guī)定了兩種類型的單位，一種是絕對(duì)單位，另一種是與其他屬性掛鉤的相對(duì)單位。

絕對(duì)單位：in-英寸；cm；mm；pt-磅；pc-pica
相對(duì)單位：em-與元素字號(hào)掛鉤；ex-與元素字體的“x高度”掛鉤；rem-與根元素字號(hào)掛鉤；px-與CSS像素掛鉤；%-另一屬性值的百分比。

（2）CSS中可以取百分比的樣式單位

定位：top,right,bottom,left;

盒模型：width,height,margin,padding;

背景：backgroud-position,background-size;

文本：text-indent;

字體：font-size;

（3）margin-top是相對(duì)于父級(jí)元素的width屬性（不是height屬性）來計(jì)算的。

總結(jié)：CSS中屬性取值百分比 1.百分比單位

基于包含塊的寬度來計(jì)算的屬性：margin，padding，width，max-width，min-width，left，right，text-indent.

注意

1.margin-top，margin-bottom，padding-top和padding-bottom都是基于包含塊的width屬性來計(jì)算的。
2.text-indent：定義基于父元素寬度的百分比的縮進(jìn)。當(dāng)外層不指定寬度時(shí)，ie下會(huì)基于瀏覽器寬度。

基于包含塊的高度來計(jì)算的屬性：top，bottom，height，max-height，min-height

注意

關(guān)于包含塊（containing block）的概念，不能簡(jiǎn)單地理解成是父元素。如果是靜態(tài)定位和相對(duì)定位，包含塊一般就是其父元素。但是對(duì)于絕對(duì)定位的元素，包含塊應(yīng)該是離它最近的 position 為 absolute、relative、或者 fixed 的祖先元素。對(duì)固定定位的元素，它的包含塊是視口（viewport）。

基于當(dāng)前字體大小來計(jì)算的屬性：line-height

關(guān)于line-heigt的詳細(xì)解釋，請(qǐng)移步這里css行高line-height的用法與計(jì)算原理

基于line-height來計(jì)算的屬性：vertical-align

background-position：背景圖像的位置，分別設(shè)置水平方向和垂直方向上的兩個(gè)值，如果使用百分比，那么百分比值會(huì)同時(shí)應(yīng)用于元素和圖像。例如 50% 50% 會(huì)把圖片的（50%, 50%）這一點(diǎn)與框的（50%, 50%）處對(duì)齊，相當(dāng)于設(shè)置了 center center。同理 0% 0% 相當(dāng)于 left top，100% 100% 相當(dāng)于 right bottom。

backgroud-size:設(shè)置背景圖像的大小。兼容IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 屬性。 以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 “auto”。

注意

background-size還可以取預(yù)定義的值：contain，cover，auto。
2.百分比繼承

如果某個(gè)元素設(shè)置了百分比的屬性，則后代元素繼承的是計(jì)算后的值。例如：

p { font-size: 10px } p { line-height: 120% } / 120% of "font-size" / 那么p的子元素繼承到的值是 line-height: 12px，而不是 line-height: 120%。

補(bǔ)充：

關(guān)于css中的繼承：



樣式層疊與繼承是樣式表中兩個(gè)關(guān)鍵概念，瀏覽器會(huì)根據(jù)層疊和繼承規(guī)則確定顯示一個(gè)元素時(shí)各種樣式屬性采用的值。


并非所有的CSS屬性都可以繼承，這這方面有條經(jīng)驗(yàn)可以參考：與元素外觀（文字，顏色，字體等）相關(guān)的樣式會(huì)被繼承；與元素在頁面上的布局相關(guān)的樣式不會(huì)繼承。此外，還可以使用inherit強(qiáng)行實(shí)施繼承。
參考

1.HTML5權(quán)威教程（4.2.3節(jié)）
2.css樣式可以使用百分比的屬性--總結(jié)
3.淺析CSS 屬性之中經(jīng)常出現(xiàn)的百分比

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111479.html

相關(guān)文章

  • [譯]HTML&CSS Lesson3: 了解CSS

    摘要：我們會(huì)在組合選擇器中來了解為什么權(quán)重值要加連字符。組合選擇器中的權(quán)重值會(huì)分別對(duì)不同類型的選擇器進(jìn)行計(jì)數(shù)。對(duì)比兩組選擇器，第二組選擇器有兩個(gè)選擇器，擁有更高的權(quán)重值。 CSS是一門復(fù)雜的語言，擁有相當(dāng)?shù)拇竽芰Α?它我們?cè)试S為頁面添加布局和設(shè)計(jì)，允許多個(gè)元素甚至多個(gè)頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎(chǔ)點(diǎn)。 首先，我們要明確的了解樣式是怎么被渲染的。 具體的...

    lavnFan 評(píng)論0 收藏0

  • [譯]HTML&CSS Lesson3: 了解CSS

    摘要：我們會(huì)在組合選擇器中來了解為什么權(quán)重值要加連字符。組合選擇器中的權(quán)重值會(huì)分別對(duì)不同類型的選擇器進(jìn)行計(jì)數(shù)。對(duì)比兩組選擇器，第二組選擇器有兩個(gè)選擇器，擁有更高的權(quán)重值。 CSS是一門復(fù)雜的語言，擁有相當(dāng)?shù)拇竽芰Α?它我們?cè)试S為頁面添加布局和設(shè)計(jì)，允許多個(gè)元素甚至多個(gè)頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎(chǔ)點(diǎn)。 首先，我們要明確的了解樣式是怎么被渲染的。 具體的...

    soasme 評(píng)論0 收藏0

  • CSS布局說——可能是最全的

    摘要：元素框相對(duì)于之前正常文檔流中的位置發(fā)生偏移，并且原先的位置仍然被占據(jù)。這些相對(duì)于布局來說是基礎(chǔ)的，同時(shí)也是非常重要的?？梢钥吹?，浮動(dòng)元素，其實(shí)對(duì)于布局來說，是特別危險(xiǎn)的。 前言 現(xiàn)在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁面仔?；蛟S是職責(zé)越來越大，整體的前端井噴式的發(fā)展，使我們只關(guān)注了js，而疏遠(yuǎn)了css和html。 其實(shí)，我們可能經(jīng)常在聊組件化，咋地咋地。但是，回過頭來思...

    hearaway 評(píng)論0 收藏0

  • 哪些你知道或不知道的css，在這里或許都齊全

    摘要：簡(jiǎn)單就意味著更快的開發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬變，萬丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...

    Jackwoo 評(píng)論0 收藏0

  • 哪些你知道或不知道的css，在這里或許都齊全

    摘要：簡(jiǎn)單就意味著更快的開發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬變，萬丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...

    Bryan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<