溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“div width應用與width設置的方法”，內容詳細，步驟清晰，細節處理妥當，希望這篇“div width應用與width設置的方法”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
width是設置對象寬度屬性樣式。
div{width:90px}這樣就設置div這個對象CSS寬度為90px
DIV中如何使用width樣式？
我們介紹兩種使用方法，一種為div標簽內直徑使用，另外一種外部css樣式實現width寬度設置。
在div標簽內使用style屬性即可加width等css樣式。
我們設置標簽內加width設置div寬度為480px
1、完整html源代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>width標簽內使用 實例 www.億速云.com</title> </head> <body> <div style=" width:480px; border:1px solid #000; height:100px;"> 設置寬度為480px 為了觀察效果設置黑色CSS邊框，并設置css高度100 </div> <!-- html注釋說明： width:480px 設置css width為480 border:1px solid #000 設置黑色邊框 height:100px 設置高度為 100 --> <span style=" width:550px; border:1px solid #F00; height:120px; display:block"> 在span設置width寬度550px css border紅色邊框，高度為120 </span> <!-- html 注釋說明： width:550px 設置css width為550 border:1px solid #F00 設置紅色邊框 height:120px 設置css高度為 120 display:block 讓span塊化 --> </body> </html>
2、截圖
width直接在標簽內使用style使用。
上面實例是直接在html標簽內使用width寬度屬性，我們接下來使用外部CSS樣式方法實現。
1、實例CSS+DIV代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>width標簽內使用 實例 www.億速云.com</title> <style> .divs{width:480px; border:1px solid #000; height:100px} .spans{width:550px; border:1px solid #F00; height:120px; display:block} </style> </head> <body> <div class="divs"> 設置寬度為480px 為了觀察效果設置黑色CSS邊框，并設置css高度100 </div> <span class="spans"> 在span設置width寬度550px css border紅色邊框，高度為120 </span> </body> </html>本身實例依然是標簽內使用width效果，只不過將標簽內CSS樣式提到外部實現標簽外部使用width寬度。
2、效果截圖
讀到這里，這篇“div width應用與width設置的方法”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
