內(nèi)聯(lián)元素的文檔流
先寫(xiě)十個(gè)span芯义，并給這十個(gè)span加上樣式哈垢，現(xiàn)在可以看到這十個(gè)span的方向是依次從左往右排開(kāi)的。然后把網(wǎng)頁(yè)拉到最外邊界寬度最寬時(shí)扛拨，可以看到右邊文字10已經(jīng)斷成兩截了耘分，并且自動(dòng)換行繼續(xù)從左往右散開(kāi)。說(shuō)明內(nèi)聯(lián)元素流動(dòng)方向是從左往右流動(dòng)的绑警。
塊級(jí)元素的文檔流
我們?cè)賹?xiě)十個(gè)div求泰，也給這十個(gè)div加上邊框，下圖可以看到计盒，如果是塊級(jí)元素渴频，就不從左往右流動(dòng)了；而是每一個(gè)塊都占一行章郁。若是再增加一個(gè)新的div進(jìn)來(lái)枉氮，就會(huì)另起一行繼續(xù)從上往下流動(dòng)志衍。說(shuō)明塊級(jí)元素的流動(dòng)方向是從上往下依次流動(dòng)的。
內(nèi)聯(lián)元素：英文和中文的流動(dòng)
現(xiàn)在把span里的內(nèi)容換成一個(gè)長(zhǎng)的英文串聊替，再把網(wǎng)頁(yè)拉到極限最寬楼肪。如下圖，這說(shuō)明了當(dāng)一個(gè)內(nèi)聯(lián)元素里的內(nèi)容為中文時(shí)惹悄，到達(dá)寬度極限的時(shí)候會(huì)自動(dòng)換行春叫；而當(dāng)內(nèi)聯(lián)元素為英文，到達(dá)寬度極限時(shí)并不會(huì)換行泣港，而是直接縮進(jìn)了暂殖。
如果內(nèi)聯(lián)元素是一個(gè)很長(zhǎng)的英文串，在默認(rèn)情況下是不會(huì)分開(kāi)的当纱，若要解決這類問(wèn)題呛每，可以給這個(gè)元素加上一個(gè)屬性：
word-break:break-all;/*把單詞分?jǐn)?/
塊級(jí)元素
若要讓兩個(gè)塊級(jí)元素不上下分行，使之并排在同一行里坡氯，或像內(nèi)聯(lián)元素一樣依次連起來(lái)晨横，可以用兩種辦法
display：inline-block; 或
float:left；
塊級(jí)元素和內(nèi)聯(lián)元素的高度
塊級(jí)元素
塊級(jí)元素的高度比較好理解箫柳，是由它內(nèi)部文檔流元素的總和決定的手形。
那么，內(nèi)聯(lián)元素的高度是由什么決定的呢悯恍？
我們先給span一個(gè)font-size為100px库糠，現(xiàn)在看看圖片左邊，能看出來(lái)現(xiàn)在這個(gè)hug的像素是多高嗎涮毫？
現(xiàn)在用尺子量一下瞬欧，就可以看到這個(gè)hug的高度是97.5。并不足100窒百。
我們?cè)偌觾蓚€(gè)中文字你好來(lái)看看
這個(gè)現(xiàn)象是不是很奇怪黍判？我們現(xiàn)在加進(jìn)去的你好量出來(lái)的高度才92.5，而剛剛hug量出來(lái)的高度是97.5篙梢，而我們給span的font-size是100px酪夷。再來(lái)看看下圖
測(cè)量出來(lái)上下紅線的高度是140px臀脏。不管是你好的高度還是hug的高度凡简，都不是我們font-size的100px因俐，這是為什么呢？其實(shí)內(nèi)聯(lián)元素的高度是沒(méi)有確定性的妄呕，即使你給一個(gè)內(nèi)聯(lián)元素設(shè)定了一個(gè)高度的數(shù)值陶舞，但瀏覽器還是會(huì)默認(rèn)讀取這個(gè)字體的行高，并且給你添加一點(diǎn)建議高度 绪励。所以font-size的高度指的是內(nèi)聯(lián)元素里字體最高點(diǎn)和最低點(diǎn)的高度肿孵。
由此我們得知唠粥， 內(nèi)聯(lián)元素的高度并不是我們?cè)O(shè)置的高度來(lái)決定的，而是由元素內(nèi)部字體的最高低點(diǎn)決定的停做。
