【CSS篇】inline block和block的區別

stonezhu 發布于2019-08-30 15:53 / 2233人閱讀

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

1.如圖所示IFE(小薇學院)任務六，模擬報紙排版中需實現如下效果

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

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

display:block

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

display:inline

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

diaplay:inline-block

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

GPU云服務器云服務器 inline_block inline-block inline_block間隙 blocked

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116598.html

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

摘要：寫在前面今天是入門前端的小伙伴們應該已經看了一些的基礎和的基礎了，是不是遇到了很多關于的問題呢。因為很少有太復雜的問題，所以直接寫一篇關于的常見問題及解答啦和的區別簡單來說不會再占據空間，就跟不存在一樣。 showImg(https://segmentfault.com/img/remote/1460000016762552); 寫在前面今天是入門前端的day2, 小伙伴們應該已經看...

tuantuan 2019-08-29 17:02 評論0 收藏0
css基礎知識整理篇

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

QiShare 2019-08-29 11:24 評論0 收藏0
重拾css(5)——瀏覽器默認樣式

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

guqiu 2019-08-29 12:45 評論0 收藏0
《CSS世界》筆記三：內聯元素與對齊

摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護與破壞寫在前面在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的，而頭疼不已。上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護與破壞寫在前面在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的1px，2px而頭疼不已...

HtmlCssJs 2019-08-29 16:19 評論0 收藏0
CSS基礎篇--你知道的display的值有多少？用了多少？

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

wangdai 2019-08-28 18:17 評論0 收藏0