溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何實(shí)現(xiàn)獨(dú)行DIV自適應(yīng)寬度布局CSS

發(fā)布時(shí)間：2021-09-29 17:00:58 來源：億速云 閱讀：136 作者：iii 欄目：web開發(fā)

這篇文章主要講解了“如何實(shí)現(xiàn)獨(dú)行DIV自適應(yīng)寬度布局CSS”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何實(shí)現(xiàn)獨(dú)行DIV自適應(yīng)寬度布局CSS”吧！

　　關(guān)鍵點(diǎn)：自適應(yīng)，這個(gè)時(shí)候就不能使用固定的CSS寬度值，這個(gè)時(shí)候就只能使用百分比的寬度表達(dá)寬度。

　　關(guān)鍵代碼：width:?% 以百分比為單位的百分比值，自然對(duì)象會(huì)根據(jù)設(shè)置百分比自動(dòng)計(jì)算該對(duì)象寬度。

　　實(shí)例CSS代碼：

代碼如下:

　　.box{ width:60%; height:80px; border:1px solid #F00; margin:0 auto}

　　說明：這里設(shè)置寬度為60%，為了便于觀察到效果，所以給予設(shè)置高度和紅色邊框，因?yàn)榭紤]到獨(dú)立設(shè)置一個(gè)DIV盒子一般居中的，所以設(shè)置margin:0 auto

　　完整的HTML源代碼（包括HTML和CSS）：

代碼如下:

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　<title>獨(dú)立一個(gè)寬度自適應(yīng)實(shí)例</title>
　　<style>
　　.box{ width:60%; height:80px; border:1px solid #F00; margin:0 auto}
　　</style>
　　</head>
　　<body>
　　<div class="box">內(nèi)容</div>
　　</body>
　　</html>

　　實(shí)例效果截圖：

如何實(shí)現(xiàn)獨(dú)行DIV自適應(yīng)寬度布局CSS

　　以上是獨(dú)立一行自適應(yīng)寬度完整實(shí)例。

　　DIVCSS5擴(kuò)展思維認(rèn)識(shí)：

　　1、在一般網(wǎng)頁布局中，一般主體內(nèi)容都是固定寬度，所以具體設(shè)置寬度都是按照美工圖確定獲得，但有時(shí)也不排除寬度是自適應(yīng)的這個(gè)時(shí)候就不能設(shè)置固定寬度樣式。

　　2、在局部DIV CSS布局中，因?yàn)閷?duì)最外層都設(shè)置具體寬度，而獨(dú)行的子級(jí)有時(shí)就不需要設(shè)置寬度樣式，這樣默認(rèn)DIV寬度就是100%，假如一個(gè)對(duì)象設(shè)置寬度固定后，而子集不設(shè)置寬度而設(shè)置paddding-left或padding-right（或者兩個(gè)都設(shè)置）這個(gè)時(shí)候?yàn)g覽器解釋呈現(xiàn)這個(gè)子集DIV寬度依然會(huì)非常智能地用總寬度去減去padding占用寬度。一般情況布局局部時(shí)，獨(dú)行一列的DIV只要不使用浮動(dòng)都可以不用設(shè)置具體寬度或百分比寬度，因?yàn)闉g覽器都會(huì)根據(jù)此層父級(jí)而智能處理寬度。

感謝各位的閱讀，以上就是“如何實(shí)現(xiàn)獨(dú)行DIV自適應(yīng)寬度布局CSS”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)如何實(shí)現(xiàn)獨(dú)行DIV自適應(yīng)寬度布局CSS這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手