繼續(xù)學(xué)習(xí)布局咯：

這部分還木有進(jìn)行到footer，但content部分內(nèi)容太多了唁奢，所以就將課程提問部分也放在這篇文章啦矿卑。這幾天雖然有點(diǎn)點(diǎn)疲憊，但還是挺開心的悄但，收獲還是挺多的呢~

先看一下課程提問的效果圖吧：

這個(gè)模塊分為兩個(gè)大的模塊棠隐，一個(gè)是提問框和按鈕，一個(gè)是已提問題的回答檐嚣。

課程提問效果圖

整個(gè)提問模塊中助泽，代碼如下：

課程提問模塊代碼示意圖

第一個(gè)div是提問框和按鈕，第二個(gè)div就是相關(guān)問題的回答了嚎京。

提問框和按鈕：

這個(gè)模塊的亮點(diǎn)是嗡贺，巧妙的使用行內(nèi)元素與塊級(jí)元素的關(guān)系來(lái)進(jìn)行布局。比如鞍帝，input的輸入框?yàn)樾袃?nèi)元素暑刃，div的button為塊元素，開發(fā)沒有使用float來(lái)讓div浮動(dòng)膜眠，而是使用了 display為inline-block岩臣。這樣溜嗜，就可以使button與輸入框在同一行啦。這里的提問button 定義了 width 架谎、height炸宵、line-height、display為inline-block谷扣。知識(shí)活學(xué)活用土全，太奇妙了。我也才更多明白会涎，行內(nèi)元素和塊元素的區(qū)別裹匙。這篇文章總結(jié)了行內(nèi)元素與塊級(jí)元素的區(qū)別。

提問框和按鈕代碼示意圖

答案框：

答案框這里末秃，開始重視常見的一個(gè)布局習(xí)慣概页，不給height，但給padding练慕。整個(gè)的答案框是一個(gè)div惰匙，但其中是ul li的列表。每一個(gè)li里面又有三個(gè)小部分铃将，左側(cè)的點(diǎn)贊按鈕项鬼，中間的內(nèi)容，右側(cè)的時(shí)間劲阎。

答案框的代碼示意圖

整個(gè)答案的div中绘盟，規(guī)定了width，然后又用padding 規(guī)定了上下為24悯仙，左右為0龄毡，保證內(nèi)容不會(huì)頂著邊框太丑就好了。在ul中雁比，就只是定義了超過(guò)范圍隱藏。在li里面撤嫩，定義了float為left偎捎。width為整個(gè)li的實(shí)際寬度。也用margin-top控制了每一個(gè)li的上邊距序攘。但也用padding控制了上下的空白茴她。但它始終沒有說(shuō)出這個(gè)li有多高。 這一點(diǎn)程奠，小伙伴們都驚呆??了丈牢。每一個(gè)li的里面，有三個(gè)div瞄沙，具體示意代碼如下己沛。

Li 中的左側(cè)點(diǎn)贊小按鈕：

Li 中的左側(cè)點(diǎn)贊小按鈕代碼示意圖

左側(cè)的點(diǎn)贊小按鈕慌核，包括了小圖標(biāo)和點(diǎn)贊人數(shù)，它們是在同一個(gè)div中申尼，后來(lái)也沒有再用div單獨(dú)包裝垮卓。而是使用了br來(lái)?yè)Q行。具體解釋是 ： 左側(cè) 點(diǎn)贊 小圖標(biāo) 及 點(diǎn)贊數(shù)目师幕，在同一個(gè)div中粟按，數(shù)字用span控制，與小圖標(biāo)之間使用br來(lái)?yè)Q行霹粥。在left-hand中灭将，只控制了一個(gè)margin-right 為 16px.使得小圖標(biāo)與段落文字不會(huì)太近。而且后控，這個(gè)開發(fā)很熟悉流動(dòng)布局庙曙，他不定義高度，因?yàn)樗酪涫矗琩iv這個(gè)塊級(jí)元素在float后會(huì)怎樣排列矾利。

開發(fā)的命名很規(guī)范，thumb點(diǎn)贊小圖標(biāo)馋袜。而hand-block里男旗，定義了width 和 height，給出border-radius 和 border欣鳖，從而出現(xiàn)了一個(gè)帶邊框的圓形察皇。不得不說(shuō)，這個(gè)height沒有考慮span里這個(gè)數(shù)字泽台，是單獨(dú)一行文字的高度什荣。哇，這個(gè)真的很奇妙怀酷，因?yàn)閟pan是被br后強(qiáng)制換行的稻爬，但并不影響這個(gè)div的高度，還好沒有設(shè)置overflow為hidden蜕依。哈哈桅锄。這個(gè)開發(fā)太牛??了。

但后來(lái)又對(duì)這個(gè)span样眠，定義為display為block友瘤，然后定義了marginTop，而且讓line-height,height相同檐束。

Li 中的中間內(nèi)容：

Li 中的中間內(nèi)容代碼示意圖

這個(gè)模塊中辫秧，比較精彩的是它的超過(guò)規(guī)定長(zhǎng)度時(shí)出現(xiàn)省略號(hào)。單行超過(guò)規(guī)定長(zhǎng)度省略號(hào) 和 多行超過(guò)省略號(hào)最后一行省略號(hào)是不同的被丧。

question-title定義了 超出這一行就以省略號(hào)表示盟戏。overflow: hidden; _zoom: 1; white-space: nowrap; （拒絕換行） text-overflow: ellipsis;? word-break: break-word; 因鼠標(biāo)滑過(guò)绪妹，會(huì)有變色，但友好變化抓半，就會(huì)在這個(gè)時(shí)候喂急，為原h(huán)3定義transition color 0.2s ease-out〉亚螅【小小總結(jié)：拒絕換行廊移、超過(guò)隱藏、再以點(diǎn)點(diǎn)點(diǎn)出現(xiàn) 就是單行省略號(hào)啦探入〗瓶祝】

答案內(nèi)容部分 p ，也同樣定義了超過(guò)范圍就是省略號(hào)蜂嗽；還有就是苗膝，終于定義了答案的height，還有margin-bottom. 對(duì)啦植旧，一般來(lái)說(shuō)辱揭，line-height超過(guò)font-size時(shí)，比如兩倍病附，行與行之間就不那么緊湊了问窃。 word-break: break-all; word-wrap: break-word;? display: -webkit-box;（貌似沒有最后這個(gè)display就出不來(lái)省略號(hào)。完沪。域庇。-webkit-box-orient: vertical； -webkit-line-clamp: 3; 這個(gè)clamp貌似是說(shuō)省略號(hào)出現(xiàn)在這個(gè)段落的第幾行的覆积。因?yàn)槎温涫且砸粋€(gè)個(gè)單詞說(shuō)的听皿，所以每一行都可能達(dá)不到100%的占滿該段落。）

Li 中的右側(cè)時(shí)間：

Li的右側(cè)時(shí)間代碼示意圖

看到這里宽档，會(huì)覺得前輩的代碼真的很精彩尉姨。他巧妙使用行內(nèi)元素與塊級(jí)元素、float流動(dòng)布局等吗冤。而我總是div泛濫又厉，還有就是float泛濫。欣孤。馋没。