css高度自適應(yīng)怎么實(shí)現(xiàn)

發(fā)布時(shí)間：2022-01-19 17:56:32 來(lái)源：億速云閱讀：195 作者：kk 欄目：web開(kāi)發(fā)

這篇文章跟大家分析一下“css高度自適應(yīng)怎么實(shí)現(xiàn)”。內(nèi)容詳細(xì)易懂，對(duì)“css高度自適應(yīng)怎么實(shí)現(xiàn)”感興趣的朋友可以跟著小編的思路慢慢深入來(lái)閱讀一下，希望閱讀后能夠?qū)Υ蠹矣兴鶐椭?。下面跟著小編一起深入學(xué)習(xí)“css高度自適應(yīng)怎么實(shí)現(xiàn)”的知識(shí)吧。

　　首先，我們剛開(kāi)始設(shè)計(jì)某些網(wǎng)頁(yè)板塊時(shí)，總會(huì)給其一個(gè)height高度值，讓它剛好適合內(nèi)容大小。

　　我們來(lái)看一個(gè)具體的實(shí)例代碼。

　　<!DOCTYPEhtml>
　　<htmllang="en">
　　<head>
　　<metacharset="UTF-8">
　　<title>Title</title>
　　</head>
　　<styletype="text/css">
　　.con{
　　height:100px;
　　width:400px;
　　background-color:#9fcdff;
　　color:black;
　　}
　　</style>
　　<body>
　　<divclass="con">
　　<p>億速云</p>
　　<p>億速云</p>
　　<p>億速云</p>
　　</div>
　　</body>
　　</html>

　　給其一個(gè)height高度值這種方法在你增加內(nèi)容時(shí)，就會(huì)出現(xiàn)下面這種情況：

　　2345截圖20180910111333.png

　　這就是所謂的高度不適應(yīng)，也就是css高度無(wú)法根據(jù)內(nèi)容實(shí)現(xiàn)自適應(yīng)，那我們?nèi)绾蝸?lái)實(shí)現(xiàn)css高度根據(jù)內(nèi)容自適應(yīng)呢？

　　其實(shí)很簡(jiǎn)單，這里我們只需要把height屬性去掉，給它一個(gè)padding-bottom的值。那么，css高度就會(huì)根據(jù)內(nèi)容來(lái)實(shí)現(xiàn)自適應(yīng)。

　　padding-bottom屬性設(shè)置元素的下內(nèi)邊距（底部空白）。

　　我們來(lái)看一下具體的高度自適應(yīng)實(shí)現(xiàn)代碼：

<!DOCTYPEhtml>
　　<html>
　　<head>
　　<metacharset="UTF-8">
　　<title>Title</title>
　　</head>
　　<styletype="text/css">
　　.con{
　　padding-bottom:1cm;
　　width:400px;
　　background-color:red;
　　color:black;
　　}
　　</style>
　　<body>
　　<div>
　　<p>億速云</p>
　　<p>億速云</p>
　　<p>億速云</p>
　　<p>億速云</p>
　　<p>億速云</p>
　　</div>
　　</body>
　　</html>

css的三種引入方式

1.行內(nèi)樣式，最直接最簡(jiǎn)單的一種，直接對(duì)HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用

進(jìn)行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在之間加上

就可以了。其次就是導(dǎo)入樣式，導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，不建議使用。

關(guān)于css高度自適應(yīng)怎么實(shí)現(xiàn)就分享到這里啦，希望上述內(nèi)容能夠讓大家有所提升。如果想要學(xué)習(xí)更多知識(shí)，請(qǐng)大家多多留意小編的更新。謝謝大家關(guān)注一下億速云網(wǎng)站！

向AI問(wèn)一下細(xì)節(jié)

css高度自適應(yīng)怎么實(shí)現(xiàn)

css的三種引入方式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽