1.下表列出了內(nèi)聯(lián)元素和塊級(jí)元素的主要區(qū)別
塊元素:不管內(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向下排列
效果圖:
產(chǎn)生該問(wèn)題的原因是:div1+div2的寬度:100%.但是display:inline-block 的設(shè)置會(huì)使兩個(gè)div之間有空格。width就為100%再加上空格 大于 父級(jí)的寬度秒梳,所以會(huì)折行法绵。
處理方式:將div1和div2之間的空格去掉
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