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
