首頁 > web前端 > css教學 > css如何設定div的寬度

css如何設定div的寬度

王林
發布: 2023-01-06 11:13:57
原創
6898 人瀏覽過

css設定div的寬度的方法是,為div添加width屬性,並將屬性值設為適當的值,例如【width:100px;】。我們也可以給div設定百分比寬度,如【width:50%;】。

css如何設定div的寬度

本文操作環境:windows10系統、css 3、thinkpad t480電腦。

其實我們要設定div的寬度是非常簡單的,因為css中有現成的屬性width,該屬性就是用來設定元素的寬度的。

屬性值:

  • auto    預設值。瀏覽器可計算出實際的寬度。   

  • length    使用 px、cm 等單位定義寬度。   

  • %    定義是基於包含區塊(父元素)寬度的百分比寬度。   

  • inherit    規定應該從父元素繼承 width 屬性的值。   

範例程式碼:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
img.normal
{
	height:auto;
}
img.big
{
	height:120px;
}
p.ex
{
	height:100px;
	width:100px;
}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>
<p>这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本.</p>
</body>
</html>
登入後複製

相關影片分享:css影片教學

#

以上是css如何設定div的寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板