HTML的塊狀元素,內聯元素的特徵

2021-07-10 17:34:13 字數 1458 閱讀 3282

**imooc

什麼是塊級元素?在html中、 、、、和 就是塊級元素。設定display:block就是將元素顯示為塊級元素。如下**就是將內聯元素a轉換為塊狀元素,從而使a元素具有塊狀元素特點。

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

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

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

在html中,、、、和就是典型的內聯元素行內元素)(inline)元素。當然塊狀元素也可以通過**display:inline將元素設定為內聯元素。如下**就是將塊狀元素div轉換為內聯元素,從而使 div 元素具有內聯元素特點。

div

......

我要變成內聯元素

內聯元素特點:1、和其他元素都在一行上;

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

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

內聯塊狀元素(inline-block就是同時具備內聯元素、塊狀元素的特點,**display:inline-block就是將元素設定為內聯塊狀元素。(css2.1新增),

inline-block 元素特點:

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

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

盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的,css內定義的寬(width)和高(height),指的是填充以里的內容範圍。

因此乙個元素實際寬度(盒子的寬度)=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

元素的高度也是同理。

比如:css**:

div
html**:

文字內容

元素的實際長度為:10px+1px+20px+200px+20px+1px+10px=262px。在chrome瀏覽器下可檢視元素盒模型,如下圖:

HTML 塊狀元素 內聯元素

塊狀元素 內聯元素 address 位址 blockquote 塊引用 center 居中對齊 dir 目錄列表 div 常用塊級容易,也是css layout的主要標籤 dl 定義列表 fieldset form控制組 form 互動表單 h1 大標題 h2 副標題 h3 3級標題 h4 4級標題...

行內元素 塊狀元素 內聯塊狀元素

行內元素 div,h1 h6,p,pre,ul,ol,li,form,table等 常見的行內元素 無法自動換行,無法設定寬高 有 a,img,span,i 斜體 em 強調 sub 下標 sup 上標 label等。常見的內聯塊狀元素 擁有內在尺寸,可設定高寬,不會自動換行 有 button,in...

HTML的塊狀 內聯 內聯塊狀元素的特點

元素分類及特點 1.塊級元素 在html中 和 就是塊級元素。設定display block就是將元素顯示為塊級元素。塊級元素特點 1 每個塊級元素都從新的一行開始,並且其後的元素也另起一行 乙個塊級元素獨佔一行 2 元素的高度 寬度 行高以及頂和底邊距都可設定 3 元素寬度在不設定的情況下,是它本...