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

CSS 寬/高屬性

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-18

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

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

    ?auto：瀏覽器會(huì)計(jì)算出實(shí)際的寬度/高度。

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

    ?%：基于包含它的塊級(jí)對(duì)象的百分比寬度/髙度。

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

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

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

    【例題】設(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>我是塊級(jí)元素，我可以擁有寬高</div>

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

</body>

</html>

image.png

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

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

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