html中內(nèi)聯(lián)元素和塊級(jí)元素的區(qū)別

1.下表列出了內(nèi)聯(lián)元素和塊級(jí)元素的主要區(qū)別

圖片.png

塊元素:不管內(nèi)容多少徽鼎,塊元素都會(huì)在瀏覽器中獨(dú)占一行慷垮∶嗷迹可設(shè)置寬高,如果不設(shè)置寬高那么它的寬度是100%(占滿父級(jí)元素一整行)

缺點(diǎn):1.相鄰元素垂直账胧。相鄰?fù)膺吘鄷?huì)重疊竞慢。margin-bottom和margin-top重疊(重疊之后的值是兩個(gè)值中的最大值)

第一種解決方案:原理bfc相關(guān)

2.父子的相鄰,父元素的margin-top和子元素的margin-top發(fā)生重疊 (重疊之后的值是兩個(gè)值中的最大值)

關(guān)于父子相鄰的解決方案:

第一種解決方案.取消相鄰找爱,給父元素設(shè)置border或者padding-top 讓相鄰之間有間隔梗顺。

第二種解決方案,父元素加overflow:hidden屬性 -- 原理bfc相關(guān)

塊元素包括:div车摄, h1-h6 寺谤, p ,ul吮播,li变屁,ol, dl意狠,dt, hr粟关,form,table ,tr环戈,td

行內(nèi)元素:內(nèi)容決定所占空間的多少闷板,內(nèi)容多少就占多少空間。不能設(shè)置寬高(默認(rèn)寬高是0)院塞。margin垂直方向無(wú)效(margin-top,margin-bottom),如果設(shè)置垂直方向用line-height屬性遮晚。

多個(gè)行內(nèi)元素排列在一起,他們之間會(huì)出席空格拦止。

行內(nèi)元素包括:font , span, b , i , u, sub, sup, a ,

標(biāo)紅為常見(jiàn)的塊元素和行內(nèi)元素县遣。

行內(nèi)塊:共享一行糜颠,可設(shè)置寬高,多個(gè)行內(nèi)元素排列在一起,他們之間會(huì)出席空格萧求∑湫耍可設(shè)置margin,padding屬性。集合了塊和行內(nèi)的所有優(yōu)點(diǎn)夸政。

行內(nèi)塊元素包括:img,input

注意:設(shè)置兩個(gè)并排的div.一個(gè)width:20%,一個(gè)width:80%.用display:inline-block 讓兩個(gè)div并排元旬,會(huì)使右側(cè)的div向下排列

效果圖:


圖片.png

產(chǎn)生該問(wèn)題的原因是:div1+div2的寬度:100%.但是display:inline-block 的設(shè)置會(huì)使兩個(gè)div之間有空格。width就為100%再加上空格 大于 父級(jí)的寬度秒梳,所以會(huì)折行法绵。


圖片.png

處理方式:將div1和div2之間的空格去掉

圖片.png

text-align這個(gè)屬性在水平方向上對(duì)行內(nèi)(inline)箕速,行內(nèi)塊(inline-block)以及文字都起作用(行內(nèi)元素或行內(nèi)塊元素設(shè)置水平居中用text-align屬性)

行內(nèi)元素:垂直居中用line-height屬性

行內(nèi)塊:設(shè)置垂直居中酪碘,不能line-height會(huì)出問(wèn)題,應(yīng)該用vertical-align.多個(gè)行內(nèi)塊元素并排盐茎,同時(shí)設(shè)置居中

同級(jí)中找設(shè)置一個(gè)最高的行內(nèi)塊元素(這個(gè)行內(nèi)塊元素內(nèi)容為空兴垦,僅僅用來(lái)做對(duì)齊的標(biāo)尺),讓其他元素向它對(duì)齊字柠。

.div1{

 width:0px;

height:100%;

vertical-align:middle;

display:inline-block;   

}

塊元素:

塊元素水平居中:用margin-left和margin-right設(shè)置為auto的方式 類似:margin:0 auto

塊元素水平垂直居中:

情況1子級(jí)元素定寬定高(寬高各為100px):

.parent{

    position:relative;
    }

.child{position:absolute;left:50%;right:50%;margin-left:-50px;margin-top:-50px;}

情況2:子級(jí)元素寬高不定:

第一種:

    .parent{
    position:relative;
    }
    .child{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,50%);
    }

第二種:

    .parent{
    display:flex;
    justify-content:center;
    align-item:center
    }

塊元素:display:block

行內(nèi):display:inline

行內(nèi)塊:display:inline-block

讓塊消失:display:none(元素結(jié)構(gòu)還在探越,但是在頁(yè)面不顯示,也不占位置)

vertical-align屬性:垂直方向的對(duì)齊方式窑业,對(duì)齊依據(jù)找到同級(jí)別最高的元素钦幔,以該元素為參照進(jìn)行vertical-align的設(shè)置。

值:top,middle,bottom


圖片.png
圖片.png
圖片.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末常柄,一起剝皮案震驚了整個(gè)濱河市鲤氢,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌西潘,老刑警劉巖卷玉,帶你破解...
    沈念sama閱讀 210,978評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異喷市,居然都是意外死亡相种,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門(mén)品姓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)寝并,“玉大人,你說(shuō)我怎么就攤上這事腹备〕牧剩” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,623評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵馏谨,是天一觀的道長(zhǎng)别渔。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么哎媚? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,324評(píng)論 1 282
  • 正文 為了忘掉前任喇伯,我火速辦了婚禮,結(jié)果婚禮上拨与,老公的妹妹穿的比我還像新娘浑度。我一直安慰自己车荔,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著闽坡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪负芋。 梳的紋絲不亂的頭發(fā)上消别,一...
    開(kāi)封第一講書(shū)人閱讀 49,741評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音低淡,去河邊找鬼姓言。 笑死,一個(gè)胖子當(dāng)著我的面吹牛蔗蹋,可吹牛的內(nèi)容都是我干的何荚。 我是一名探鬼主播,決...
    沈念sama閱讀 38,892評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼猪杭,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼餐塘!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起皂吮,我...
    開(kāi)封第一講書(shū)人閱讀 37,655評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤戒傻,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后涮较,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體稠鼻,經(jīng)...
    沈念sama閱讀 44,104評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年狂票,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了候齿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,569評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡闺属,死狀恐怖慌盯,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情掂器,我是刑警寧澤亚皂,帶...
    沈念sama閱讀 34,254評(píng)論 4 328
  • 正文 年R本政府宣布,位于F島的核電站国瓮,受9級(jí)特大地震影響灭必,放射性物質(zhì)發(fā)生泄漏狞谱。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評(píng)論 3 312
  • 文/蒙蒙 一禁漓、第九天 我趴在偏房一處隱蔽的房頂上張望跟衅。 院中可真熱鬧,春花似錦播歼、人聲如沸伶跷。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,725評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)叭莫。三九已至,卻和暖如春烁试,著一層夾襖步出監(jiān)牢的瞬間雇初,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,950評(píng)論 1 264
  • 我被黑心中介騙來(lái)泰國(guó)打工廓潜, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留抵皱,地道東北人善榛。 一個(gè)月前我還...
    沈念sama閱讀 46,260評(píng)論 2 360
  • 正文 我出身青樓辩蛋,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親移盆。 傳聞我的和親對(duì)象是個(gè)殘疾皇子悼院,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評(píng)論 2 348

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