整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
CSS中，當一個元素的內(nèi)容太大而無法容納時，我們可以對其進行控制。該元素的屬性是overflow，它是overflow-x和overflow-y屬性的簡寫形式。
在本文中，將會介紹這些屬性，然后我們將一起深入討論與overflow相關(guān)的一些概念和用例。你準備好了嗎？get it!
要使用overflow屬性，我們需要確保將其應用到的元素具有以下特征：
overflow屬性可以有如下屬性：
?
visible, hidden, scroll, auto
?
.element {
height: 200px;
overflow: [overflow-x] [overflow-y];
}由于overflow是一種簡寫屬性，因此它可以接受一個或兩個值。第一個值用于水平軸，第二個值用于垂直軸。
overflow 默認值為 visible，其中的內(nèi)容可以超出其父值?？梢赃@樣設(shè)置:
.element {
height: 200px;
overflow: visible;
}有趣的一面是，當一個軸設(shè)置為visible，而另一軸設(shè)置為auto時，visible的軸將計算為auto。
[MDN][2] 上這樣說到：
?
注意: 設(shè)置一個軸為visible（默認值），同時設(shè)置另一個軸為不同的值，會導致設(shè)置visible的軸的行為會變成auto`。
?
例如，如果我們用以下內(nèi)容設(shè)置一個元素:
.element {
height: 200px;
overflow: visible auto;
}overflow屬性的計算值將為auto auto。
當內(nèi)容比其父內(nèi)容長時，它將被剪切。但是，可以使用 Javascript 滾動內(nèi)容。
在上圖中，無論內(nèi)容是否長，滾動條總是可見的。注意，這取決于操作系統(tǒng)。
auto這是一個聰明的關(guān)鍵字，僅當內(nèi)容比其容器長時才顯示滾動條。
注意，在圖中，只有當內(nèi)容比其容器長時，滾動條才可見。接下來，我們將討論與overflow相關(guān)的longhand屬性
該家伙負責x軸或元素的水平邊。
該家伙負責y軸或元素的垂直邊。
我們可以通過水平裁剪內(nèi)容并使其滾動來創(chuàng)建快速簡單的滑塊。
在上面的模型中，我們有水平放置的卡片，還有一個滾動條，可以滾動并顯示更多內(nèi)容。為此，我們需要執(zhí)行以下操作：
.wrapper {
display: flex;
overflow-x: auto;
}它可以在桌面瀏覽器上工作。然而，在Safari上對iOS(12.4.1)進行測試時，滾動并沒有起作用。經(jīng)過反復試驗，當我為子項添加寬度時，滾動起作用了，在iOS(13.3)上運行就沒有問題啦。
事例源碼：https://codepen.io/shadeed/pen/bfb886326f2066b6ae0a8b641ecf68b4?editors=1100
當模態(tài)內(nèi)容太長時，我們可以很容易地使區(qū)域可滾動。要做到這一點，我們應該做到以下幾點
.modal {
display: flex;
flex-direction: column;
max-height: 400px;
max-width: 450px;
}
/* 1. 讓模態(tài)框 body 占據(jù)剩余的可用空間 */
/* 2. 如果內(nèi)容很長，則允許滾動。我使用`auto`是因為它在內(nèi)容足夠長之前不會顯示滾動條 */
.modal__content {
flex-grow: 1; /* [1] */
overflow-y: auto; /* [1] */
}事例源碼：https://codepen.io/shadeed/pen/1997908941279f0af3d6c7f83d6efdc8?editors=0100
當我們有一張卡并且希望其角是圓的時，我們傾向于為頂部和底部的角添加border-radius，如下所示：
.card-image {
border-top-right-radius: 7px;
border-top-left-radius: 7px;
}
.card-content {
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
}這可能需要很多工作，特別是如果卡片在移動設(shè)備上具有不同的設(shè)計。例如，它們不會彼此堆疊，而不是堆疊其子項。
在這種情況下，最好使overflow: hidden將其隱藏在包裝器上，然后向其添加border-radius，這樣我們只需要設(shè)置一個地方就行了。如下所示：
.card {
overflow: hidden;
border-radius: 7px;
}當涉及動畫時，overflow: hidden的好處是：在剪輯時可以懸停顯示的隱藏元素上?？紤]下圖：
在CSS中，如下所示：
.button.slide-left {
overflow: hidden;
}
.button.slide-left:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.25;
border-radius: 100px;
transform: translateX(-100%);
transition: 0.2s ease-in;
}我們有兩個按鈕，每個按鈕都有一個偽元素，該元素相應地過渡到左側(cè)和底部。如下所示：
事例源碼：https://codepen.io/shadeed/pen/7b48418837470e173f7a6cd7bcc4a403?editors=0100
例如，當我們有一個滑動條時，僅僅添加overflow-x是不夠的。在「Chrome iOS」上，我們需要手動滾動和移動內(nèi)容?？聪旅娴膭訄D：
幸運的是，有一個屬性可以增強滾動體驗。
.wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}這稱為「基于動量的滾動」。根據(jù)MDN：
「-webkit-overflow-scrolling」 屬性控制元素在移動設(shè)備上是否使用滾動回彈效果。它有兩個值：
「auto」：使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。「touch」：使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內(nèi)容會繼續(xù)保持一段時間的滾動效果。繼續(xù)滾動的速度和持續(xù)的時間和滾動手勢的強烈程度成正比。同時也會創(chuàng)建一個新的堆棧上下文。
下圖是使用基于動量的滾動的效果。
根據(jù)CSS規(guī)范：
?
將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。旁邊的內(nèi)聯(lián)對象會被呈在同一行內(nèi)，允許空格。(準確地說，應用此特性的元素呈現(xiàn)為內(nèi)聯(lián)對象，周圍元素保持在同一行，但可以設(shè)置寬度和高度塊元素的屬性)
?
當一個inline-block元素的overflow值不是visible的時，這將導致該元素的底邊根據(jù)其同級元素的文本基線對齊。
要解決該問題，我們可以主按鈕添加overflow: hidden，并更改其對齊方式：
.button {
vertical-align: top;
}事例源碼：https://codepen.io/shadeed/pen/291fda2293ed737f7eb7dc74a9318438?editors=1100
通常，我們會遇到水平滾動的問題，當原因未知時，滾動滾動會變得更加困難。在本節(jié)中，我將列出水平滾動的一些常見原因，以便大家以后在構(gòu)建布局時可以想到到它們。
當元素的position值為absolute或fixed值時，就有可能導致水平滾動。當left，right值中的一個將元素定位在body元素外部時，可能會發(fā)生這種情況
要解決這個問題，首先需要檢查為什么這個元素被放置在viewport之外。如果沒有必要，則必須刪除它或編輯position值。
CSS 網(wǎng)格有三種情況可以導致水平滾動，來看看它們。
「對列使用像素值」
當使用像素值時，這將在視口寬度較小時引起問題。見下文：
.wrapper {
display: grid;
grid-template-columns: 200px 1fr;
grid-gap: 1rem;
}解決方案是重置列，只在有足夠空間的視口上使用上面的列。
.wrapper {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
}
@media (min-width: 400px) {
grid-template-columns: 200px 1fr;
}.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 1rem;
}
可能會遺忘要針對移動設(shè)備進行測試，因為最小寬度為300px，這將導致在某個點進行水平滾動。
一個簡單的解決方法是將grid-template-columns重置為1fr，并在視口較大時對其進行更改。
.wrapper {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
}
@media (min-width: 400px) {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}源碼地址：https://codepen.io/shadeed/pen/a874bf85a1acf2ee6f37a7f1d86ad3b2?editors=1100
處理內(nèi)容中的長字或鏈接時，它應該換行，否則，將會出現(xiàn)水平滾動。
為了解決這個問題，我們需要中斷長單詞和鏈接。我們可以這樣做
.post-content a {
word-wrap: break-word;
}或者我們可以使用text-overflow：
.post-content a {
overflow: hidden;
text-overflow: ellipsis;
}既然我們已經(jīng)知道了水平滾動的原因，我將介紹一些方法來幫助我們識別這些問題并解決它們。
*, *:before, *:after {
outline: solid 1px #000;
}通過添加這些內(nèi)容，我們可以注意到哪些元素的寬度較大，因此我們可以解決問題。阿迪·奧斯曼尼（Addy Osmani）用他的簡單腳本進一步完善了這一點：
[].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})該腳本的作用是使輪廓顏色隨機化，而不是使所有輪廓都具有單一顏色，這將使其變得更容易。
在Firefox中，會向?qū)е滤綕L動的元素添加一個小標簽。
有時，上述技術(shù)無效。在這種情況下，我要做的是打開DevTools，然后開始刪除元素并注意。一旦水平滾動消失了，我就可以確定引起問題的元素。
最后，可以使用overflow-x：hidden解決水平滾動問題，但這一般是最后沒辦法的備用方案。
作者：Ahmad shaded 譯者：前端小智 來源：sitepoint
原文：https://ishadeorddeed.com/article/overflow-css/
例
設(shè)置overflow屬性進行滾動：
div
{
width:150px;
height:150px;
overflow:scroll;
}
屬性定義及使用說明
overflow屬性指定如果內(nèi)容溢出一個元素的框，會發(fā)生什么。
| 默認值： | visible |
|---|---|
| 繼承： | no |
| 版本： | CSS2 |
| JavaScript 語法： | object.style.overflow="scroll" |
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| overflow | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
注意：在X Lion(Mac OS),滾動條顯示默認是隱藏的,只有當被使用(即使"overflow:scroll"已設(shè)置)。
屬性值
| 值 | 描述 |
|---|---|
| visible | 默認值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。 |
| hidden | 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。 |
| scroll | 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。 |
| auto | 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。 |
| inherit | 規(guī)定應該從父元素繼承 overflow 屬性的值。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
嘍大家好，我是作者“未來”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變?yōu)閃eb前端高手哦！
志同道合的小伙伴跟我一起學習交流哦！
所謂的界面樣式，就是更改一些用戶操作樣式，比如更改用戶的鼠標樣式，表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了，防止表單域拖拽。
1 鼠標樣式cursor
設(shè)置或檢索在對象上移動的鼠標指針采用何種系統(tǒng)預定義的光標形狀。
cursor:default小白
pointer小手
move移動
text文本
盡量不要用hand因為火狐不支持
pointer ie6以上都支持的盡量用
2 輪廓線outline
是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
但是我們都不關(guān)心可以設(shè)置多少，我們平時都是去掉的。
最直接的寫法是：outline：0；或者 outline:none；
3 防止拖拽文本域resize
resize:none這個單詞可以防止火狐谷歌等瀏覽器隨意的拖動文本域。
4 行內(nèi)塊和文字對齊
Vertical-align垂直對齊
以前我們講過讓帶有寬度的塊級元素居中對齊，是 margin：0 auto;
以前我們還講過讓文字居中對齊，是 text-align:center；
但是我們從來沒有講過有垂直居中的屬性，我們的媽媽一直很擔心我們的垂直居中怎么做。
vertical-algn垂直對齊，這個看上去很美好的一個屬性，實際有著不可捉摸的脾氣，否則我們也不會這么晚來講解。
vertical-align ：baseline、top 、 middle 、 bottom
設(shè)置或檢索對象內(nèi)容的垂直對齊方式。
vertical-align不影響塊級元素中的內(nèi)容對齊，它只針對于行內(nèi)元素或者行內(nèi)塊元素，特別是行內(nèi)塊元素，通常用來控制圖片/表單與文字的對齊
所以我們知道，我們可以通過 vertical-align控制圖片和文字的垂直關(guān)系了。默認的圖片會和文字基線對齊。
5 去除圖片底側(cè)縫隙
有個很重要特性你要記?。簣D片或者表單等行內(nèi)塊元素，他的底線會和父級盒子的基線對齊。這樣會造成一個問題，就是圖片底側(cè)會有一個空白縫隙。
解決的方法就是：
1 給 img添加vertical-align:middle / top等等。讓圖片不要和基線對齊。
2 給img添加 display:bock;轉(zhuǎn)換為塊級元素就不會存在問題了。
6 word-break 自動換行
normal使用瀏覽器默認的換行規(guī)則。
break-all允許在單詞內(nèi)換行。
keep-all只能在半角空格或連字符處換行。
主要處理英文單詞
7 white-space
設(shè)置或檢索對象內(nèi)文本顯示方式。通常我們使用于強制一行顯示內(nèi)容
normal：默認處理方式
nowrap：強制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br標簽對象才換行。
8 超出的部分省略號顯示
text-overflow文字溢出
text -overflow:clip / ellipsis
設(shè)置或檢索是否使用一個省略標記（…）標示對象內(nèi)文本的溢出
clip：不顯示省略標記（…），而是簡單的裁切
ellipsis：當對象內(nèi)文本溢出時顯示省略標記（…）
注意:一定要首先強制一行內(nèi)顯示，再次和 overflow屬性搭配使用?
看不懂的小伙伴不要氣餒，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。
本章已結(jié)束，下篇文章將分享《18 CSS精靈技術(shù)》小伙伴們不要錯過喲！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
