當前位置:編程學習大全網 - 源碼下載 - CSS中什麽是塊級元素?

CSS中什麽是塊級元素?

在做頁面布局的時候,壹般會將html元素分為兩種,即塊級元素和行內元素。

壹、塊級元素:block element

每個塊級元素默認占壹行高度,壹行內添加壹個塊級元素後無法壹般無法添加其他元素(float浮動後除外)。兩個塊級元素連續編輯時,會在頁面自動換行顯示。塊級元素壹般可嵌套塊級元素或行內元素;

塊級元素壹般作為容器出現,用來組織結構,但並不全是如此。有些塊級元素,如<form>只能包含塊級元素。其他的塊級元素則可以包含 行級元素如<P>.也有壹些則既可以包含塊級,也可以包含行級元素。

DIV 是最常用的塊級元素,元素樣式的display:block都是塊級元素。它們總是以壹個塊的形式表現出來,並且跟同級的兄弟塊依次豎直排列,左右撐滿。

二、行內元素:inline element

也叫內聯元素、內嵌元素等;行內元素壹般都是基於語義級(semantic)的基本元素,只能容納文本或其他內聯元素,常見內聯元素 “a”。比如 SPAN 元素,IFRAME元素和元素樣式的display : inline的都是行內元素。例如文字這類元素,各個字母 之間橫向排列,到最右端自動折行。

三、block(塊)元素的特點

①、總是在新行上開始;

②、高度,行高以及外邊距和內邊距都可控制;

③、寬度缺省是它的容器的100%,除非設定壹個寬度。

④、它可以容納內聯元素和其他塊元素

四、inline元素的特點

①、和其他元素都在壹行上;

②、高,行高及外邊距和內邊距不可改變;

③、寬度就是它的文字或圖片的寬度,不可改變

④、內聯元素只能容納文本或者其他內聯元素

對行內元素,需要註意如下

設置寬度width 無效。

設置高度height 無效,可以通過line-height來設置。

設置margin 只有左右margin有效,上下無效。

設置padding 只有左右padding有效,上下則無效。註意元素範圍是增大了,但是對元素周圍的內容是沒影響的。

五、常見的塊狀元素

address – 地址

blockquote – 塊引用

center – 舉中對齊塊

dir – 目錄列表

div – 常用塊級容易,也是CSS layout的主要標簽

dl – 定義列表

fieldset – form控制組

form – 交互表單

h1 – 大標題

h2 – 副標題

h3 – 3級標題

h4 – 4級標題

h5 – 5級標題

h6 – 6級標題

hr – 水平分隔線

isindex – input prompt

menu – 菜單列表

noframes – frames可選內容,(對於不支持frame的瀏覽器顯示此區塊內容

noscript – 可選腳本內容(對於不支持script的瀏覽器顯示此內容)

ol – 有序表單

p – 段落

pre – 格式化文本

table – 表格

ul – 無序列表

六、常見的內聯元素

a – 錨點

abbr – 縮寫

acronym – 首字

b – 粗體(不推薦)

bdo – bidi override

big – 大字體

br – 換行

cite – 引用

code – 計算機代碼(在引用源碼的時候需要)

dfn – 定義字段

em – 強調

font – 字體設定(不推薦)

i – 斜體

img – 圖片

input – 輸入框

kbd – 定義鍵盤文本

label – 表格標簽

q – 短引用

s – 中劃線(不推薦)

samp – 定義範例計算機代碼

select – 項目選擇

small – 小字體文本

span – 常用內聯容器,定義文本內區塊

strike – 中劃線

strong – 粗體強調

sub – 下標

sup – 上標

textarea – 多行文本輸入框

tt – 電傳文本

u – 下劃線

七、行內元素與塊級元素有什麽不同?

區別壹:

塊級:塊級元素會獨占壹行,默認情況下寬度自動填滿其父元素寬度

行內:行內元素不會獨占壹行,相鄰的行內元素會排在同壹行。其寬度隨內容的變化而變化。

區別二:

塊級:塊級元素可以設置寬高

行內:行內元素不可以設置寬高

區別三:

塊級:塊級元素可以設置margin,padding

行內:行內元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。

區別四:

塊級:display:block;

行內:display:inline;

可以通過修改display屬性來切換塊級元素和行內元素

參考:/news/398.html

  • 上一篇:雙生星球在宇宙中的壽命
  • 下一篇:我和老婆在湖南長沙想去杭州自助遊,怎麽遊好咯
  • copyright 2024編程學習大全網