css 元素的width height屬性

2021-09-26 13:35:48 字數 611 閱讀 6652

元素的width、height屬性

本文介紹width與height屬性的 1⃣️預設值 和 2⃣️顯式設定百分比 情況下的計算方法。

1⃣️預設值:

以下情況會預設「繼承」直接父元素的,無需顯式設定width/height值:

無float和position的且是block的元素;

若非上述情況且不顯式設定寬高,則為預設,即width/height:auto,隨內容的寬高度而變化。

2⃣️顯式設定百分比:

否則,接下來需要顯式設定width/height值。分為固定單位和百分比單位,當width/height顯式設定為百分數時,它的計算規則是什麼呢:

標準流中的元素:相對於直接父元素進行計算;

有float的元素:相對於直接父元素進行計算;

有position的元素:

position:relative 相對於直接父元素進行計算;

position:absolute 相對於最近一層有position的父元素,直到相對body

position:fixed 相對於body。

注意:body元素預設高度是沒有的;預設寬度是頁面的寬度

CSS 元素的定位

css定位令你可以將乙個元素精確地放在頁面上你所指定的地方。聯合使用定位與浮動 參見第13課 你將能夠建立多種高階而精確的布局。本課我們將討論以下內容 把瀏覽器視窗想象成乙個座標系統 如果我們要把這個標題放置在距文件頂部100畫素 左邊200畫素的地方,我們可以在css中輸入以下 h1 得到的顯示效...

CSS的替換元素

css的 替換元素 通過修改某個元素的屬性值呈現的內容就可以被替換的元素。替換元素的特性 如下圖 各元素語法 橘子 確定 這個元素h5中很多屬性不支援了 替換元素的尺寸計算規則html尺寸 如的width和height屬性 的size屬性 的cols rows css尺寸 通過css的width和h...

css的元素型別

css的標籤分類 1.塊狀元素 特點 在頁面以矩形區域顯示,之上而下排行,獨佔一行。可以直接新增寬高,可以作為其他元素的內容的容器。div ul li p h1 h6 dl form 2.內聯元素 內聯塊元素 特點 在頁面中有內容來撐開,一行內逐個排列,不可以直接新增寬高,個別屬性會出現問題 pad...