行內元素 塊元素及css三特性

2022-09-10 12:12:19 字數 1331 閱讀 1370

行內元素特點:

1、和其他元素都在一行上

2、元素的高度、寬度、行高及頂部和底部邊距不可設定;

元素的寬度就是它包含的文字或的寬度,不可改變

3、元素的寬度就是它包含的文字或的寬度,不可改變。

注:行內元素在設定 水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果,但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產生邊距效果。

行內塊屬性img、input等

塊級元素特點

1、每個塊級元素都從新的一行開始,並且其後的元素也另起一行。(乙個塊級元素獨佔一行)

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

3、元素寬度在不設定的情況下,寬度為100%(和父元素的寬度一致),除非設定乙個寬度。

注:在html中,、、、、

和就是典型的行內元素(inline)元素。

塊級元素是可以設定寬高的,但是它的實際寬高是本身寬高padding。block元素要單獨佔一行。內聯元素不單獨佔一行,給他設定寬高是沒有用的。

塊屬性div、p、ul、ol、li、h1-h6等

塊級元素和行內元素列表:

css三特性

css疊加性:同乙個元素被多條樣式規則指定。

css繼承性:後代元素會繼承前輩元素的一些樣式和屬性。

css優先順序:由於css的疊加性和繼承性,將產生優先順序,這指的是哪條樣式規則會最終作用

於指定的元素,他只遵循一條規則,指定的越具體,優先順序越高

瀏覽器讀取你的選擇器,遵循的原則是從選擇器的右邊到左邊讀取。換句話說,瀏覽器讀取選擇器的順序是由右到左進行

並非所有css屬性都具有繼承性。

具有繼承性的屬性:

1.文字相關屬性是繼承的:font-family,font-size,line-height,font-weight,font-style,text-transform

無繼承性的屬性

1.所有背景屬性,盒子屬性,布局屬性

我們在ul下設定color屬性,並不會使ul>li>a下的a的字型發生樣式的改變,但會使li下的字型樣式發生改變

CSS元素分類(塊元素,行內元素,行內塊元素)

塊元素特點 自己獨佔一行 高度,寬度,外邊距和內邊距都可以更改 寬度預設是父級寬度的100 是乙個容器及盒子,裡面可以放行內或者塊級元素。注 p標籤主要用於存放文字,因此p裡面不能放塊級元素,特別是不能放div,同理,h1 h6等都是文字類塊級標籤,裡面也不能放其他塊級元素。行內元素特點 可以一行顯...

對於塊元素及行內元素及行內塊元素的理解

html中的三類元素 個人見解,希望大佬多多指正,批評指正 2,行內元素 inline 例如 a,strong,b,em,i,span等等,其中span為最典型行內元素。特點 1,不可設定寬高,但他們可以這是水平方向的padding值和margin值 2,新的元素會緊緊相鄰,之間沒有間隙 3,靠自身...

css行內元素和塊元素

塊元素 總是在新行上開始 高度,行高以及外邊距和內邊距都可控制 寬度預設是它的容器的100 除非設定乙個寬度。它可以容納內聯元素和其他塊元素 行內元素 和其他元素都在一行上 高,行高及外邊距和內邊距不可改變 寬度就是它的文字或的寬度,不可改變 內聯元素只能容納文字或者其他內聯元素 塊級元素 div ...