資訊專欄INFORMATION COLUMN
摘要：不過，因為一次問題需要，發(fā)現(xiàn)還是有需要多了解下的。方法好了，開始想辦法解決上面的問題了。
緣起
其實看到這個問題，心里已經默默把代碼已經碼好了~，不就想下面這樣嘛：
JSBIN代碼示例
嗯，是的，我們日常確實基本上就是用的這種方式，也沒啥問題呀~，來個背景色定下位就歐拉歐拉的了。
不過，因為一次問題需要，發(fā)現(xiàn)還是有需要多了解下的。
來，請看下圖，這個需求是這樣子的，實現(xiàn)這樣子的效果（可以先構思下實現(xiàn)代碼，看下思路是不是差不多的呢？）
可以看到，這個線后面有背景圖，隨著屏幕尺寸漸寬時，會蓋到背景圖上，縮小時，則不會蓋在背景圖上，這就不能使用我們平常的填充背景色的寫法了，只能另尋他路（想到有什么好的方法實現(xiàn)了么？）
所以這個問題是：因屏幕的伸展收縮會導致內容區(qū)所能容納的內容不一，從而導致高度不一，各個元素也是隨著屏幕時高時底，背景色的用法無法生效，有何好的解決辦法？
當然，你有可能會說這是特例，可以直接上圖，固然這種方式可以，但是，有很多這樣的區(qū)塊，難道就全部都直接上圖么？肯定不行啦~，能懶就懶，如能找到一勞永逸的辦法肯定比直接上圖，結果發(fā)現(xiàn)弄完發(fā)現(xiàn)文案有問題，要改字就蛋疼了。
方法好了，開始想辦法解決上面的問題了。
先從float下手，兩條線各浮動在兩側，其實我們可以理解為常見的網(wǎng)頁三欄布局，可是問題是，不能定寬度呀，定了還怎么去自適應呢？所以這條pass
既然float不行了，那想想別的，這回就用position吧~開頭的用法也是這種，不過是有背景色的而已，這回我們不許用背景色，看如何處理這個問題。
首先，基本結構：
Headling
我們可以用偽類:before、:after來生成一些無關緊要的東西，不過為了能讓大家看的清楚些，直接用標簽了，
這是改進后的結構：
Headling
接著給樣式（答案就在里面噢）：
.title { position: relative; z-index: 2; font-size: 16px; line-height: 24px; text-align: center; color: #999; overflow: hidden; }
.title .caption { position: relative; display: inline-block; }
.title .caption .line { position: absolute; top: 11px; width: 600px; height: 1px; background-color: #ffffd; }
.title .caption .line-l { right: 100%; margin-right: 15px; }
.title .caption .line-r { left: 100%; margin-left: 15px; }
看了上面的樣式有沒看出些端倪呢？解釋下這個實現(xiàn)細節(jié)：
首先，將.caption設為行內框，相對定位
接著，兩根線的定位是被.caption所包含的，接著將它們推向它們各自的地方（left: 100%、right: 100%），應該知道這100%是基于誰算的吧？（沒錯，就是第一步里的.caption，結果你應該猜到了？）
最后再用margin-left/right隔出間隙，就滿足了我們的需求啦
我們可以將.line的寬度設的超長，overflow掉即可，這樣就可以做到自適應了，下面提個小問題：
用以上的方法，解決這個線的問題~
最后這個問題還有別的解決方式，比如line-gradient這些~
參考Line-On-Sides Headers
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49799.html
摘要：不過，因為一次問題需要，發(fā)現(xiàn)還是有需要多了解下的。方法好了，開始想辦法解決上面的問題了。 緣起 其實看到這個問題，心里已經默默把代碼已經碼好了~，不就想下面這樣嘛：JSBIN代碼示例 嗯，是的，我們日常確實基本上就是用的這種方式，也沒啥問題呀~，來個背景色定下位就歐拉歐拉的了。 不過，因為一次問題需要，發(fā)現(xiàn)還是有需要多了解下的。 來，請看下圖，這個需求是這樣子的，實現(xiàn)這樣子的效果（可...
摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現(xiàn)出多種樣式。可以讓屬性的變化過程持續(xù)一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...
摘要：所謂超文本，因為它可以加入圖片聲音動畫多媒體等內容，不僅如此，它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接。意思是超文本引用用于指定鏈接頁面的打開方式，其取值有和兩種，其中為默認值，為在新窗口中打開方式。 學習目標 了解常用瀏覽器 掌握WEB標準 理解標簽語義化 掌握常用的排版標簽 掌握常用的文本格式化圖像鏈接等標簽 掌握三種列表標簽 掌握表格標簽 掌握表格標簽 掌...
閱讀 1166·2021-11-22 15:22
閱讀 3837·2021-10-19 13:13
閱讀 3570·2021-10-08 10:05
閱讀 3292·2021-09-26 10:20
閱讀 2984·2019-08-29 14:21
閱讀 2192·2019-08-27 10:55
閱讀 1871·2019-08-26 10:31
閱讀 2578·2019-08-23 16:47
