亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

stonezhu / 2312人閱讀

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

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

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

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

display:block

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

display:inline

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

diaplay:inline-block

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116598.html

相關(guān)文章

  • 前端入門-day2（常見(jiàn)css問(wèn)題及解答）

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

    tuantuan 評(píng)論0 收藏0

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

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

    QiShare 評(píng)論0 收藏0

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

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

    guqiu 評(píng)論0 收藏0

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

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

    HtmlCssJs 評(píng)論0 收藏0

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

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

    wangdai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<