成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【CSS篇】inline block和block的區(qū)別

stonezhu / 2272人閱讀

摘要：如圖所示小薇學(xué)院任務(wù)六，模擬報(bào)紙排版中需實(shí)現(xiàn)如下效果開始我是用將兩個單詞分別包裹，設(shè)置來實(shí)現(xiàn)下劃線的，可是當(dāng)我企圖用的偽元素將首字母選中調(diào)整其字體大小時發(fā)現(xiàn)，用根本無法選中首字母，樣式不生效，后查看示例時發(fā)現(xiàn)其是放在標(biāo)簽下的，故我想其

1.如圖所示IFE(小薇學(xué)院)任務(wù)六，模擬報(bào)紙排版中需實(shí)現(xiàn)如下效果

開始我是用span將兩個單詞分別包裹，設(shè)置border-bottom來實(shí)現(xiàn)下劃線的，可是當(dāng)我企圖用CSS3的偽元素first-letter將首字母選中調(diào)整其字體大小時發(fā)現(xiàn)，用span:first-letter根本無法選中首字母，樣式不生效，后查看W3C示例時發(fā)現(xiàn)其是放在p標(biāo)簽下的，故我想其可能是只對塊級元素包裹的文本才生效，故我對span用了display:block,可是問題來了，雖然首字母能夠選中調(diào)整字體，可是span元素變得和父元素一樣寬了,當(dāng)我加上下邊框時其就變成了如下模樣：

心痛,無奈之余我試了試將block改為inline-block然后奇跡就發(fā)生了,span元素的寬度既是被文本撐開的，首字母也能選中，簡直不能再開森！
于是詳細(xì)查了下diaplay的常用屬性inline,block,inline-block的區(qū)別：

display:block

1.block元素會獨(dú)占一行，默認(rèn)情況下其寬度自動填滿其父元素的寬度
2.block元素可以設(shè)置width,height屬性
3.block元素可以設(shè)置margin的padding屬性

display:inline

1.inline元素不會獨(dú)占一行,多個相鄰元素會排列在同一行，直到排滿換行,其寬度隨元素內(nèi)容而變化
2.inline元素設(shè)置width,height屬性無效
3.inline元素的margin和padding屬性都只有水平方向上的起效果

diaplay:inline-block

1.將對象呈現(xiàn)為inline對象，故其寬度能由內(nèi)容撐開
2.但是將對象的內(nèi)容作為block對象呈現(xiàn),故可以用偽元素first-letter將首字母選中
3.故被設(shè)置為inline-block的元素會既具有寬高屬性，又具有同行特性

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116598.html

相關(guān)文章

  • 前端入門-day2（常見css問題及解答）

    摘要：寫在前面今天是入門前端的小伙伴們應(yīng)該已經(jīng)看了一些的基礎(chǔ)和的基礎(chǔ)了，是不是遇到了很多關(guān)于的問題呢。因?yàn)楹苌儆刑珡?fù)雜的問題，所以直接寫一篇關(guān)于的常見問題及解答啦和的區(qū)別簡單來說不會再占據(jù)空間，就跟不存在一樣。 showImg(https://segmentfault.com/img/remote/1460000016762552); 寫在前面 今天是入門前端的day2, 小伙伴們應(yīng)該已經(jīng)看...

    tuantuan 評論0 收藏0

  • css基礎(chǔ)知識整理篇

    摘要：折疊后的計(jì)算參與折疊的都是正值在都是正數(shù)的情況下，取其中較大的值為最終值。參與折疊的中有正值，有負(fù)值有正有負(fù)，先取出負(fù)中絕對值中最大的，然后，和正值中最大的相加。單冒號用于偽類，雙冒號用于偽元素。 轉(zhuǎn)自某個大神整理的面試題 盒子模型 標(biāo)準(zhǔn)盒子模型 內(nèi)容（content）+ 填充（padding）+ 邊界（margin）+ 邊框（border）; 低版本IE盒子模型 content部分把...

    QiShare 評論0 收藏0

  • 重拾css(5)——瀏覽器默認(rèn)樣式

    摘要：而依然有效的原因是瀏覽器默認(rèn)樣式的優(yōu)先級低于外聯(lián)內(nèi)部樣式。例如第二，瀏覽器默認(rèn)樣式還為設(shè)置了，這個值是對英文比較友好，中文狀態(tài)下就顯得有點(diǎn)擁擠。 上一節(jié)介紹了樣式的五種來源，咱們再通過一張圖回顧一下。 showImg(https://segmentfault.com/img/bVM2Rk?w=536&h=245); 對于上面的三層，咱們大概都比較熟悉了。下面的兩層中，用戶自定義樣式一般...

    guqiu 評論0 收藏0

  • 《CSS世界》筆記三：內(nèi)聯(lián)元素與對齊

    摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護(hù)與破壞寫在前面在頁面布局中，內(nèi)聯(lián)元素的垂直對齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會因?yàn)榇怪睂R中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護(hù)與破壞 寫在前面 在頁面布局中，內(nèi)聯(lián)元素的垂直對齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會因?yàn)榇怪睂R中的1px，2px而頭疼不已...

    HtmlCssJs 評論0 收藏0

  • CSS基礎(chǔ)篇--你知道的display的值有多少？用了多少？

    摘要：與屬性的值不同，其不為被隱藏的對象保留其物理空間指定對象為內(nèi)聯(lián)元素。指定對象作為塊元素級的表格。類同于標(biāo)簽指定對象作為表格行組。伸縮盒過渡版本將對象作為彈性伸縮盒顯示。伸縮盒最新版本新增屬性可能存在描述錯誤及變更，僅供參考。 它的語法如下： display：none | inline | block | list-item | inline-block | table | inline...

    wangdai 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<