css怎麼設定div大小？-前端問答-PHP中文網

首頁

web前端

前端問答

css怎麼設定div大小？

Apr 26, 2021 am 09:08 AM

css

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大小？