行內(nèi)元素和塊級元素帆卓、替換元素和非替換元素

1痢毒、塊級元素(block-level element):一個水平流上只能顯示一個塊級元素,多個塊級元素則換行顯示

也就是說塊級元素橫向默認充滿其父元素的內(nèi)容區(qū)域向挖,自帶換行特性蝌以,其左右兩邊沒有其他元素,即塊級元素默認是獨占一行的何之。
但是要注意的是:"塊級元素"和"display為block的元素"不是一個概念跟畅,例如<li>元素默認的display值為list-item,<table>默認的display值默認為table,但他們都是塊級元素

  • 2、行內(nèi)元素:行內(nèi)元素不形成新內(nèi)容塊溶推,即在其左右可以有其他元素徊件。

  • 3奸攻、 替換元素

替換元素就是瀏覽器根據(jù)元素的標簽屬性,來決定元素的具體顯示內(nèi)容虱痕,在其顯示中生成了框睹耐。
HTML中的<img>、<input>部翘、<textarea>硝训、<select>、<object>都是替換元素新思。這些元素往往沒有實際的內(nèi)容窖梁,即是一個空元素。
Example:

  1. <img src=”path/to/picture.jpg”/>
    瀏覽器根據(jù)<img>標簽的src屬性的值來讀取圖片信息并顯示出來夹囚,而如果查看HTML代碼纵刘,則看不到圖片的實際內(nèi)容。
  2. <input type="submit" name="submit" value="提交"/>
    瀏覽器根據(jù)<input>標簽的type屬性來決定是顯示輸入框荸哟,還是按鈕假哎。
  • 4、 不可替換元素

HTML的大多數(shù)元素是不可替換元素敲茄,即其內(nèi)容直接表現(xiàn)在瀏覽器位谋。
Example:
<p>段落的內(nèi)容</p>
<label>label的內(nèi)容</label>

  • 5、 替換的行內(nèi)元素:具有“內(nèi)在尺寸”堰燎,尺寸是由自身決定的掏父,而不會受周圍環(huán)境的影響,如<img>和<input>等秆剪,但是如果同時定義<img>標簽的width屬性赊淑,和css的width屬性,根據(jù)層疊原理仅讽,css的屬性將優(yōu)先于<img>標簽的width屬性;替換的行內(nèi)元素的高度是有height屬性決定
  • 6陶缺、非替換的行內(nèi)元素:(如 a,span等元素)的寬度是其內(nèi)容經(jīng)過瀏覽器解釋后實際的寬度,而不能通過設(shè)定width屬性為非替換的行內(nèi)元素設(shè)置寬度洁灵,非替換的行內(nèi)元素的高度是由框高度的行高決定的饱岸。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市徽千,隨后出現(xiàn)的幾起案子苫费,更是在濱河造成了極大的恐慌,老刑警劉巖双抽,帶你破解...
    沈念sama閱讀 211,423評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件百框,死亡現(xiàn)場離奇詭異,居然都是意外死亡牍汹,警方通過查閱死者的電腦和手機铐维,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,147評論 2 385
  • 文/潘曉璐 我一進店門柬泽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人嫁蛇,你說我怎么就攤上這事锨并。” “怎么了睬棚?”我有些...
    開封第一講書人閱讀 157,019評論 0 348
  • 文/不壞的土叔 我叫張陵琳疏,是天一觀的道長。 經(jīng)常有香客問我闸拿,道長,這世上最難降的妖魔是什么书幕? 我笑而不...
    開封第一講書人閱讀 56,443評論 1 283
  • 正文 為了忘掉前任新荤,我火速辦了婚禮,結(jié)果婚禮上台汇,老公的妹妹穿的比我還像新娘苛骨。我一直安慰自己,他們只是感情好苟呐,可當我...
    茶點故事閱讀 65,535評論 6 385
  • 文/花漫 我一把揭開白布痒芝。 她就那樣靜靜地躺著,像睡著了一般牵素。 火紅的嫁衣襯著肌膚如雪严衬。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,798評論 1 290
  • 那天笆呆,我揣著相機與錄音请琳,去河邊找鬼。 笑死赠幕,一個胖子當著我的面吹牛俄精,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播榕堰,決...
    沈念sama閱讀 38,941評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼竖慧,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了逆屡?” 一聲冷哼從身側(cè)響起圾旨,我...
    開封第一講書人閱讀 37,704評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎康二,沒想到半個月后碳胳,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,152評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡沫勿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,494評論 2 327
  • 正文 我和宋清朗相戀三年挨约,在試婚紗的時候發(fā)現(xiàn)自己被綠了味混。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,629評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡诫惭,死狀恐怖翁锡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情夕土,我是刑警寧澤馆衔,帶...
    沈念sama閱讀 34,295評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站怨绣,受9級特大地震影響角溃,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜篮撑,卻給世界環(huán)境...
    茶點故事閱讀 39,901評論 3 313
  • 文/蒙蒙 一减细、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧赢笨,春花似錦未蝌、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至桐筏,卻和暖如春纸型,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背九昧。 一陣腳步聲響...
    開封第一講書人閱讀 31,978評論 1 266
  • 我被黑心中介騙來泰國打工绊袋, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人铸鹰。 一個月前我還...
    沈念sama閱讀 46,333評論 2 360
  • 正文 我出身青樓癌别,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蹋笼。 傳聞我的和親對象是個殘疾皇子展姐,可洞房花燭夜當晚...
    茶點故事閱讀 43,499評論 2 348

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

  • 夢到你了 夢到你媽你姐你妹你全家了 然后怎么都醒不過來 好難過 好難熬 很想你啊 你快滾出來吧
    葉孤絕閱讀 139評論 0 0
  • 班車是我們當?shù)厝藢τ诠财嚨姆Q呼。由于其發(fā)車時間穩(wěn)定剖毯,一班一發(fā)圾笨,故稱之為“班車”,若是你說公共汽車逊谋,人們...
    玉溪散人閱讀 520評論 0 0
  • 三年三班徐子菡讀書時長60分鐘擂达,媽媽陪讀時長20分鐘。
    徐子菡閱讀 164評論 0 0
  • 時間:2016-04-11地點:新大樓 A區(qū)905 為什么選擇vue.js 可以作為前端模板庫的替換 簡單 正在管...
    心徹閱讀 3,493評論 0 3