資訊專欄INFORMATION COLUMN
摘要：偽元素的值擠壓主體元素解決主體是兩個(gè)標(biāo)簽，需要再其左側(cè)添加一個(gè)豎線，很常見的需求目標(biāo)前提條件右側(cè)的文字個(gè)數(shù)不固定問題需要讓元素為文字個(gè)數(shù)不固定時(shí)，整個(gè)元素的寬度是，根據(jù)文字的內(nèi)容來算，此時(shí)使用偽元素時(shí)，如果偽元素占據(jù)的寬度過大，會(huì)導(dǎo)致文字被
偽元素的margin值擠壓主體元素解決
主體是兩個(gè)p標(biāo)簽，需要再其左側(cè)添加一個(gè)豎線，很常見的需求目標(biāo) 前提條件
1. 右側(cè)的文字個(gè)數(shù)不固定問題
1. 需要讓before元素為`float:left`； 2. 文字個(gè)數(shù)不固定時(shí)，整個(gè)元素的寬度是auto，根據(jù)文字的內(nèi)容來算，此時(shí)使用 :before偽元素時(shí)，如果偽元素占據(jù)的寬度過大，會(huì)導(dǎo)致文字被擠下去
.demo:before{
float: left;
height: 67px;
content: "";
border-right: solid 3px $primary;
border-left: solid 2px $primary;
margin-right: 10px;
}
解決
將 margin-right: 10px; 改為margin-left: -10px; 使之不占據(jù)主體的空間
jsfiddle
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/117007.html
摘要：布局描述表示對(duì)頁(yè)面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級(jí)元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級(jí)設(shè)置屬性為子級(jí)設(shè)置屬性注意的問題屬性是設(shè)置文本內(nèi)容對(duì)齊方式的 布局 描述 表示對(duì)頁(yè)面中的顯示效果進(jìn)行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內(nèi)塊級(jí)元素（text-a...
摘要：布局描述表示對(duì)頁(yè)面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級(jí)元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級(jí)設(shè)置屬性為子級(jí)設(shè)置屬性注意的問題屬性是設(shè)置文本內(nèi)容對(duì)齊方式的 布局 描述 表示對(duì)頁(yè)面中的顯示效果進(jìn)行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內(nèi)塊級(jí)元素（text-a...
摘要：雙飛翼布局是對(duì)圣杯布局的優(yōu)化，先實(shí)現(xiàn)中間最重要的身體部分，再實(shí)現(xiàn)翅膀，所以叫雙飛翼布局。參考資料跟這些特性相互疊加后會(huì)怎么樣經(jīng)典布局之雙飛翼布局 ‘display’、’position’ 和 ‘float’ 的相互關(guān)系 showImg(https://segmentfault.com/img/bVECeu?w=720&h=540); 圣杯布局和雙飛翼 什么是圣杯布局和雙飛翼布局？ 圣杯...
摘要：以來說，就是在觸發(fā)頁(yè)面滾動(dòng)條時(shí)候，會(huì)擠壓掉的空間，那我們就可以從不同角度考慮去解決了。 引言 頁(yè)面滾動(dòng)條造成寬度減小的場(chǎng)景很常見了，由于div塊級(jí)元素的流動(dòng)性，其寬度默認(rèn)為100%的body寬度，但是當(dāng)容器的高度超過視口寬度時(shí)候，頁(yè)面就會(huì)出現(xiàn)滾動(dòng)條，這個(gè)滾動(dòng)條的寬度就會(huì)擠壓body的可用寬度，也就是會(huì)擠壓我們的容器的寬度，造成頁(yè)面晃動(dòng)的現(xiàn)象，很不友好，下面就來探討下如何解決這個(gè)滾動(dòng)條的...
閱讀 1658·2021-09-02 15:41
閱讀 1047·2021-09-02 15:11
閱讀 1342·2021-07-28 00:15
閱讀 2396·2019-08-30 15:55
閱讀 1205·2019-08-30 15:54
閱讀 1747·2019-08-30 15:54
閱讀 3020·2019-08-30 14:02
閱讀 2573·2019-08-29 16:57
