国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端小知識(shí)--為什么你寫的height:100%不起作用？

CoderStudy / 2469人閱讀

摘要：所以我們要同時(shí)設(shè)置這兩者的，只設(shè)置其中一個(gè)是不行的關(guān)于居中的一點(diǎn)誤解全部代碼如上，可以看到設(shè)置了為沒有居中，這是為什么呢，因?yàn)檫@時(shí)候的是相對(duì)于字體尺寸的所以直接作用于沒有絕對(duì)高度的元素是不行的。

為什么你寫的height:100%不起作用？ 
這個(gè)知識(shí)不算冷門的，但是用的時(shí)候可能還是會(huì)有些懵逼，不能生效時(shí)搜一搜就能找到答案了，但是你真的懂了嗎？為什么想要設(shè)置一個(gè)全屏元素的時(shí)候，高度不受%的控制？
1.百分比寬高的設(shè)定

按照w3c中的width和height屬性，可以明確%設(shè)定寬高是根據(jù)父元素的寬高來的：
http://www.w3school.com.cn/cs...
http://www.w3school.com.cn/cs...

2.width:100%;

我們寫下這樣一段代碼，隨意設(shè)置一個(gè)背景色便于觀察元素


    

    width:100%;height:100%;
    


//寬100%，我們現(xiàn)在看到的高是屬于font-size的，而不是100%；



    

    width:100%;height:200px;
    


//效果如下

可以看到基本上寬的100%很容易就實(shí)現(xiàn)的，但是這里的height卻不能設(shè)置成%比的（該元素會(huì)消失看不見），這是為什么呢？

3.瀏覽器是如何計(jì)算高度和寬度的

Web瀏覽器在計(jì)算有效寬度時(shí)會(huì)考慮瀏覽器窗口的打開寬度。如果你不給寬度設(shè)定任何缺省值，那瀏覽器會(huì)自動(dòng)將頁(yè)面內(nèi)容平鋪填滿整個(gè)橫向?qū)挾?。即我們不設(shè)置寬，會(huì)自動(dòng)填滿整個(gè)橫向?qū)挾?，如下?/p> 

height:100%;

但是高度的計(jì)算方式完全不一樣。事實(shí)上，瀏覽器根本就不計(jì)算內(nèi)容的高度，除非內(nèi)容超出了視窗范圍(導(dǎo)致滾動(dòng)條出現(xiàn))。或者你給整個(gè)頁(yè)面設(shè)置一個(gè)絕對(duì)高度。否則，瀏覽器就會(huì)簡(jiǎn)單的讓內(nèi)容往下堆砌，頁(yè)面的高度根本就無需考慮。
因?yàn)轫?yè)面并沒有缺省的高度值，所以，當(dāng)你讓一個(gè)元素的高度設(shè)定為百分比高度時(shí)，無法根據(jù)獲取父元素的高度，也就無法計(jì)算自己的高度。
即父元素的高度只是一個(gè)缺省值：height: auto;我們?cè)O(shè)置height：100%時(shí)，是要求瀏覽器根據(jù)這樣一個(gè)缺省值來計(jì)算百分比高度時(shí)，只能得到undefined的結(jié)果。也就是一個(gè)null值，瀏覽器不會(huì)對(duì)這個(gè)值有任何的反應(yīng)。
各個(gè)瀏覽器對(duì)于寬高的解析也不相同，大家可以自己搜索一下。
參考：http://www.webhek.com/post/cs...

4.如何解決

現(xiàn)在你知道了吧，%是一個(gè)相對(duì)父元素計(jì)算得來的高度，要想使他有效，我們需要設(shè)置父元素的height;
要特別注意的一點(diǎn)是，在之中的元素的父元素并不僅僅只是，還包括了。
所以我們要同時(shí)設(shè)置這兩者的height，只設(shè)置其中一個(gè)是不行的：

        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }

5.關(guān)于line-height居中的一點(diǎn)誤解？ 




    
    
    
    Document
    



    
    
height:100%;

全部代碼如上，可以看到設(shè)置了line-height為100%沒有居中，這是為什么呢，因?yàn)檫@時(shí)候的%是相對(duì)于字體尺寸的？所以直接作用于沒有絕對(duì)高度的元素是不行的。

line-height屬性說明：http://www.w3school.com.cn/cs...
這時(shí)候要想居中，可以如下，做一個(gè)div嵌套，一個(gè)負(fù)責(zé)高度，一個(gè)負(fù)責(zé)居中，雖然感覺并不會(huì)這樣用到，但是居中還是很靈驗(yàn)的~





    
    
    
    Document
    



    
    

        
height:100%;

6.源碼

https://github.com/JiaXinYi/i...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112968.html

相關(guān)文章

  • 如何合理的規(guī)劃前端之路

    摘要：什么是前端工程師總而言之就是運(yùn)用等技術(shù)，在工作中配合設(shè)計(jì)師實(shí)現(xiàn)用戶界面，和后端工程師進(jìn)行數(shù)據(jù)對(duì)接，完成應(yīng)用開發(fā)的職位。 什么是前端工程師？總而言之,就是運(yùn)用 HTML、CSS、JavaScript 等 Web 技術(shù)，在工作中配合UI設(shè)計(jì)師實(shí)現(xiàn)用戶界面，和后端工程師進(jìn)行數(shù)據(jù)對(duì)接，完成 Web 應(yīng)用開發(fā)的職位。Tips:個(gè)人博客排版、UI更佳；地址：https://haonancx.git...

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

  • 如何合理的規(guī)劃前端之路

    摘要：什么是前端工程師總而言之就是運(yùn)用等技術(shù)，在工作中配合設(shè)計(jì)師實(shí)現(xiàn)用戶界面，和后端工程師進(jìn)行數(shù)據(jù)對(duì)接，完成應(yīng)用開發(fā)的職位。 什么是前端工程師？總而言之,就是運(yùn)用 HTML、CSS、JavaScript 等 Web 技術(shù)，在工作中配合UI設(shè)計(jì)師實(shí)現(xiàn)用戶界面，和后端工程師進(jìn)行數(shù)據(jù)對(duì)接，完成 Web 應(yīng)用開發(fā)的職位。Tips:個(gè)人博客排版、UI更佳；地址：https://haonancx.git...

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

  • 如何合理的規(guī)劃前端之路

    摘要：什么是前端工程師總而言之就是運(yùn)用等技術(shù)，在工作中配合設(shè)計(jì)師實(shí)現(xiàn)用戶界面，和后端工程師進(jìn)行數(shù)據(jù)對(duì)接，完成應(yīng)用開發(fā)的職位。 什么是前端工程師？總而言之,就是運(yùn)用 HTML、CSS、JavaScript 等 Web 技術(shù)，在工作中配合UI設(shè)計(jì)師實(shí)現(xiàn)用戶界面，和后端工程師進(jìn)行數(shù)據(jù)對(duì)接，完成 Web 應(yīng)用開發(fā)的職位。Tips:個(gè)人博客排版、UI更佳；地址：https://haonancx.git...

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

  • height:100%; 為什么不起作用

    摘要：你知道為什么不起作用嗎按常理，當(dāng)我們用的屬性定義一個(gè)元素的高度時(shí)，這個(gè)元素應(yīng)該按照設(shè)定在瀏覽器的縱向空間里擴(kuò)展相應(yīng)的空間距離。 當(dāng)你設(shè)置一個(gè)頁(yè)面元素的高度(height)為100%時(shí)，期望這樣元素能撐滿整個(gè)瀏覽器窗口的高度，但大多數(shù)情況下，這樣的做法沒有任何效果。你知道為什么height:100%不起作用嗎？ 按常理，當(dāng)我們用CSS的height屬性定義一個(gè)元素的高度時(shí)，這個(gè)元素應(yīng)該按...

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

  • 【前端詞典】提高幸福感的 9 個(gè) CSS 技巧

    摘要：使用歸類重復(fù)樣式和重復(fù)變量一樣，重復(fù)的樣式也可以歸類。解決方案可以使用如下的寫法兩端對(duì)齊姓名手機(jī)號(hào)碼賬號(hào)密碼效果如下相關(guān)文章輸出計(jì)劃最近總有朋友問我相關(guān)的問題，因此接下來我會(huì)輸出篇相關(guān)的文章，希望對(duì)大家有一定的幫助。前言 在這篇文章我會(huì)介紹 9 個(gè)使你的 CSS 更加簡(jiǎn)潔優(yōu)雅的使用技巧。這些技巧小生經(jīng)常使用，覺得挺高效實(shí)用，所以也就有了這篇文章。 9 個(gè) CSS 技巧 特此聲明，這里說的...

    番茄西紅柿 評(píng)論0 收藏0

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

0條評(píng)論

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