html中的行內(nèi)元素和塊級元素有哪些

1.關(guān)于行內(nèi)元素和塊級元素的說明

塊級元素會自動占據(jù)一定矩形空間舌菜,可以通過設(shè)置高度萌壳、寬度、內(nèi)外邊距等屬性日月,來調(diào)整這個矩形的樣子袱瓮;與之相反,行內(nèi)元素爱咬,則沒有自己的獨立空間尺借,它是依附于其他塊級元素存在的,因此精拟,對行內(nèi)元素設(shè)置高度燎斩、寬度、內(nèi)外邊距等屬性蜂绎,都是無效的栅表。(置換元素除外)

2.行內(nèi)、塊級元素區(qū)別:

1师枣,塊級元素獨占一行怪瓶,其寬度自動填滿父元素寬度
行內(nèi)元素不獨占一行,相鄰行內(nèi)元素排在同一行践美,直到排不下劳殖,才換行,其寬度隨元素的內(nèi)容而變化
2拨脉,一般情況下哆姻,塊級元素可設(shè)置 width, height屬性,行內(nèi)元素設(shè)置width, height無效(置換元素除外)
(注意:塊級元素即使設(shè)置了寬度玫膀,仍然是獨占一行的)
3矛缨,塊級元素可以設(shè)置margin 和 padding. 行內(nèi)元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產(chǎn)生邊距效果,但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產(chǎn)生邊距效果帖旨。(水平方向有效箕昭,豎直方向無效)

3.行內(nèi)、塊級元素:
常見塊級元素(block element)

address - 地址
center - 居中對齊塊
div - 常用塊級元素解阅,也是css layout的主要標簽
dl - 定義列表
form - 交互表單
h1 - 大標題
h2 - 副標題
h3 - 3級標題
h4 - 4級標題
h5 - 5級標題
h6 - 6級標題
hr - 水平分隔線
menu - 菜單列表
ol - 有序列表
ul - 無序列表
li - 列表項
p - 段落
pre - 格式化文本
table - 表格
tr - 表格中的行

常見內(nèi)聯(lián)元素(inline element)

a - 錨點
b - 粗體(不推薦)
big - 大字體
br - 換行
dfn - 定義字段
em - 強調(diào)
i - 斜體
img - 圖片
input - 輸入框
label - 表格標簽
q - 短引用
select - 項目選擇
span - 常用內(nèi)聯(lián)容器落竹,定義文本內(nèi)區(qū)塊
strong - 粗體強調(diào)
textarea - 多行文本輸入框
u - 下劃線
var - 定義變量

4.行內(nèi)元素和塊級元素之間的轉(zhuǎn)換
1.設(shè)置display

塊級元素,默認display:block;
行內(nèi)不可置換元素货抄,默認為display:inline;
行內(nèi)置換元素述召,默認為display:inline-block;
display:none;不顯示該元素朱转,也不會保留該元素原先占有的文檔流位置。
display:block;轉(zhuǎn)換為塊級元素积暖。
display:inline;轉(zhuǎn)換為行內(nèi)元素藤为。
display:inline-block;轉(zhuǎn)換為行內(nèi)塊元素。

2.設(shè)置float

當把行內(nèi)元素設(shè)置完浮動(float:left/right)后夺刑,該行內(nèi)元素的display屬性會被賦予block值缅疟,且擁有浮動特性。(當它浮動時遍愿,行內(nèi)元素就會生成一個塊級框存淫。也可以說是行內(nèi)框)與此同時,行內(nèi)元素去除了之間的莫名空白沼填。

3.設(shè)置position

當為行內(nèi)元素進行定位時纫雁,position:absolute沸柔,與position:fixed绿店。都會使原先的行內(nèi)元素變?yōu)閴K級元素。

注意

轉(zhuǎn)換為塊級元素只是举庶,float與position的副作用羞海,他們本身的作用還會干擾布局效果忌愚。
介紹塊級元素時,會說却邓,塊級元素的寬度會繼承其父元素硕糊。但是,只有為行內(nèi)元素設(shè)置display:block;才會有這樣的效果腊徙,其他轉(zhuǎn)換之后并不會默認帶來這個效果简十。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市撬腾,隨后出現(xiàn)的幾起案子螟蝙,更是在濱河造成了極大的恐慌,老刑警劉巖民傻,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件胰默,死亡現(xiàn)場離奇詭異,居然都是意外死亡漓踢,警方通過查閱死者的電腦和手機牵署,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來喧半,“玉大人奴迅,你說我怎么就攤上這事⊥荩” “怎么了取具?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵脖隶,是天一觀的道長。 經(jīng)常有香客問我者填,道長浩村,這世上最難降的妖魔是什么做葵? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任占哟,我火速辦了婚禮,結(jié)果婚禮上酿矢,老公的妹妹穿的比我還像新娘榨乎。我一直安慰自己,他們只是感情好瘫筐,可當我...
    茶點故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布蜜暑。 她就那樣靜靜地躺著,像睡著了一般策肝。 火紅的嫁衣襯著肌膚如雪肛捍。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天之众,我揣著相機與錄音拙毫,去河邊找鬼。 笑死棺禾,一個胖子當著我的面吹牛缀蹄,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播膘婶,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼缺前,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了悬襟?” 一聲冷哼從身側(cè)響起衅码,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎脊岳,沒想到半個月后肆良,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡逸绎,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年惹恃,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片棺牧。...
    茶點故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡巫糙,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出颊乘,到底是詐尸還是另有隱情参淹,我是刑警寧澤醉锄,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站浙值,受9級特大地震影響恳不,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜开呐,卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一烟勋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧筐付,春花似錦卵惦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至较解,卻和暖如春畜疾,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背印衔。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工啡捶, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人当编。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓届慈,卻偏偏與公主長得像,于是被迫代替她去往敵國和親忿偷。 傳聞我的和親對象是個殘疾皇子金顿,可洞房花燭夜當晚...
    茶點故事閱讀 43,446評論 2 348

推薦閱讀更多精彩內(nèi)容