首頁 >web前端 >前端問答 >css怎麼設定div大小?

css怎麼設定div大小?

藏色散人
藏色散人原創
2021-04-26 09:08:232721瀏覽

css設定div大小的方法:先建立一個HTML範例檔案;然後在body中建立div;最後透過給div設定寬度和高度屬性即可。

css怎麼設定div大小?

本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。

在HTML中div標籤元素是一個塊狀元素,可以設定元素的大小(寬高)。那麼如何設定?下面這篇文章就來跟大家介紹一下,希望對大家有幫助。

首先我們來了解塊狀元素

塊狀元素代表性的就是div,其他如p、nav、aside、header、footer、section、article、ul-li、address等等,都可以用div來實現。不過為了可以方便程式設計師解讀程式碼,一般都會使用特定的語意化標籤,使得程式碼可讀性強,且方便查錯。

塊狀元素特徵:

1、高度,行高以及外邊距和內邊距都可控制。

2、總是在新行上開始,佔據一整行;即可以自動換行。

3、它可以容納內聯元素和其他區塊元素。

4、寬頻總是與瀏覽器寬度一樣,與內容無關。

5、多個區塊狀元素標籤寫在一起,預設排列方式為從上到下

【推薦學習:css影片教學

#css怎麼設定div大小?

在CSS中可以使用width屬性、height屬性來設定div大小。 width屬性設定元素的寬度,height屬性設定元素的高度。

width和height屬性定義元素內容區的寬度、高度,在內容區外面可以增加內邊距、邊框和外邊距。

範例:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <style type="text/css">
   div{
   border: 1px solid red;
   }
   .box{
   width: 300px;
   height: 100px;
   }
   </style>
</head>
<body>
  <div>普通div</div><br />
  <div class="box">设置宽度为300px,高度为100px的div</div>
</body>
</html>

效果圖:

css怎麼設定div大小?

#

以上是css怎麼設定div大小?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn