CSS行內元素 塊元素和空元素

2021-09-13 14:05:59 字數 1640 閱讀 5386

行內元素特點

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

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

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

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

塊級元素特點

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

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

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

在html中,、、、、 、和就是典型的行內元素(inline)元素。

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

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

空元素知名的空元素:

鮮為人知的是:

長度單位

emem為相對長度單位,相對於當前物件內文字的字型尺寸(font-size)。比如:web頁面中body的文字大小在使用者瀏覽器下預設渲染是16px,所以,此時的1em = 16px;

in英吋(inches)。絕對長度單位。

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

pt點(points)。絕對長度單位。

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

small

標籤呈現小號字型效果。

,和,標籤

標籤和標籤一樣,用於強調文字,但它強調的程度更強一些。

em是 斜體強調標籤,更強烈強調,表示內容的強調點。相當於html元素中的...;

< b > < i >是視覺要素,分別表示無意義的加粗,無意義的斜體。

em 和 strong 是表達要素(phrase elements)。

b標籤和i標籤的區別

i 元素現在描述為在普通文章中突出不同意見或語氣或其他的一段文字,

例如:乙個分類名稱,乙個技術術語,乙個外語中的諺語,乙個想法等。或者代表斜體的排版方式。

角度單位

deg度(degress)。乙個圓共360度

90deg = 100grad = 0.25turn

grag

梯度(gradians)。乙個圓共400梯度

90deg = 100grad = 0.25turn

turn

轉、圈(turns)。乙個圓共1圈

90deg = 100grad = 0.25turn

rad弧度(radians)。乙個圓共2π弧度

90deg = 100grad = 0.25turn

css行內元素和塊元素

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

行內元素 塊級元素和行內塊元素

a 標籤定義鏈結 b 字型加粗 br 換行 i 斜體文字效果 img 在網頁中嵌入 input 輸入框 span 組合文件中的行內元素 small 呈現小號字型效果 big 呈現大號字型效果 sub 定義下標文字 sup 定義上標文字 div 定義文件中的分割槽或節 dl 定義列表 dt 定義列表中...

行內元素,塊級元素與空元素

行內元素 a b span img input strong select label em button textarea 塊級元素 div ul li dl dt dd p h1 h6 blockquote 空元素 br meta hr link input img 塊級元素的特點 1.總在新行...