位置：首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS 寬/高屬性

提問人：劉團圓發(fā)布時間：2020-11-18

    width屬性定義元素內(nèi)容區(qū)的寬度，在內(nèi)容區(qū)外面可以增加內(nèi)邊距、邊框和外邊距，行內(nèi)非替換元素會忽略這個屬性。height屬性定義元素內(nèi)容E的高度，在內(nèi)容區(qū)外面可以增加內(nèi)邊距、邊框和外邊距，行內(nèi)非替換元素會忽略這個屬性。

    寬度和高度的值都可以是以下幾種：

    ?auto：瀏覽器會計算出實際的寬度/高度。

    ?length：使用px、cm等單位定義寬度/高度。

    ?%：基于包含它的塊級對象的百分比寬度/髙度。

    ?Inherit：規(guī)定應(yīng)該從父元素繼承width/height屬性的值。

   在CSS中，只有塊級元素，才可以使用寬/高屬性，行內(nèi)元素是不可以使用的。例如，可以在頁面中對<div>元素進行寬/高的設(shè)置，但是卻不能對<a>鏈接元素設(shè)置寬和高。反之，可以從那些元素可以

    設(shè)置寬/高屬性來確定它們是否是塊級元素。

    【例題】設(shè)置寬和高

    代碼如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div{

width: 300px;

height: 300px;

border:10px solid lightblue;

}

span{

width: 300px;

height: 300px;

border:10px solid pink;

}

</style>

</head>

<body>

<div>我是塊級元素，我可以擁有寬高</div>

<span>我是行內(nèi)元素，我沒法獲得寬高</span>

</body>

</html>

image.png

    從以上代碼可以看出，塊級元素<div>是可以正常設(shè)置元素的寬/高屬性的。反觀行內(nèi)元素，<span>雖然也設(shè)置了width和height屬性，但是在頁面中并沒有顯示出應(yīng)有的寬度和高度：而是顯示出正常內(nèi)容的寬度和高度。

繼續(xù)查找其他問題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部