首頁 > web前端 > css教學 > css行元素跟塊元素有哪些相同點

css行元素跟塊元素有哪些相同點

青灯夜游
發布: 2023-01-04 09:37:35
原創
2353 人瀏覽過

相同點:1、行元素和區塊元素都具有display屬性,用於規定元素應該產生的框的類型;2、行元素和區塊元素都可以設定左右水平方向的margin和padding值。

css行元素跟塊元素有哪些相同點

本教學操作環境:windows7系統、css3版本,此方法適用於所有品牌電腦。

行元素(又稱內嵌元素)跟塊元素都是html規範中的概念。塊元素(block element)一般是其他元素的容器元素,能容納其他塊元素或內聯元素。內聯元素(inline element)一般都是基於語意級(semantic)的基本元素,只能容納文字或其他內嵌元素。

區塊元素的特點:

  • 總是另起一行(特立獨行)

  • 可以設定其寬度、高度,內外邊距

  • 在不手動設定寬度的情況下,寬度預設為所在容器的100%(即容器寬度)

  • 可以容納行內元素和其他區塊元素。

行元素的特徵:

  • 總是和相鄰的行內元素在同一行上(物以類聚)

  • 設定寬高無效,水平方向的padding和margin屬性可以設置,但是垂直方向上的無效。

  • 預設寬度是他自身內容的寬度。

  • 行內元素只能容納其他行內元素或文字。

行元素跟區塊元素的相同點

#1、都具有display屬性,規定元素應該產生的框的類型。

2、都可以設定左右方向的margin和padding值

塊元素與行元素的區別

1.塊元素,總是在新行上開始;內聯元素,和其他元素都在一行上。

2.區塊元素,能容納其他區塊元素或內聯元素;內聯元素,只能容納文字或其他內聯元素。

3.塊元素中高度,行高以及頂和底邊距都可控制;內聯元素中高,行高及頂和底邊距不可改變。

(這上面的區別,指的是預設的,不包括CSS的刻意控制。也就是說當使用css控制時,區塊元素和內聯元素的屬性差異會越來越小。)

更多程式相關知識,請造訪:程式設計課程! !

以上是css行元素跟塊元素有哪些相同點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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