深入理解CSS溢出overflow-html教學-PHP中文網

首頁

web前端

html教學

深入理解CSS溢出overflow

巴扎黑

Jun 09, 2017 pm 02:05 PM

overflow

前面的話

　　當一個元素固定為某個特定大小，但內容在元素中放不下。此時就可以利用overflow屬性來控制這個狀況

#訂

##overflow溢位

　　值: visible | hidden | scroll | auto | inherit

　　初始值: visible

　　應用於: 區塊級元素、替換元素、單元格

　　應用於: 區塊級元素、取代元素、單元格

繼承性: 無

　　[注意]除了IE7-瀏覽器外，其他瀏覽器都不支援為table-cell元素設定overflow屬性。 firefox和IE11瀏覽器不支援給table-cell元素的設定100%高度的子元素設定overflow屬性

overflow-X | overflow- y

　　overflow-x和overflow-y的屬性原本是IE瀏覽器獨自拓展的屬性，後來被CSS3採用，並標準化。 overflow-x主要用來定義對水平方向內容溢出的剪切，而overflow-y主要用來定義對垂直方向內容溢出的剪切

　　[注意]如果overflow-x和overflow-y值相同則等同於overflow。如果overflow-x和overflow-y值不同，且其中一個值明確設定為visible或未設定預設為visible，而另一個值是非visible的值。則visible值會被重設為auto

#　　初始值: visible

##應用於: 區塊級元素、替換元素、表格單元格

　　繼承性: 無

##屬性

#visible

　　元素的內容在元素框之外也可見

　　[注意1]IE6-瀏覽器中元素的包含區塊會延伸，使得可以包覆其超出的內容

.box{
    height: 200px;
    width: 200px;
    background-color: lightgreen;
}.in{
    width: 300px;
    height: 100px;
    background-color: lightblue;
}

<p>
    </p><p></p>

　　左圖為IE6-瀏覽器，右圖為其他瀏覽器

#　　[注意2]IE7-瀏覽器的按鈕(包括

　　左圖為預設情況，右圖設定overflow後的情況

auto

　　如果內容被剪裁，則瀏覽器會顯示捲軸以便查看其餘的內容

　　[注意]對於一般瀏覽器來說，和

預設帶有overflow:auto的屬性。但IE7-瀏覽器則不同，預設存在縱向捲軸 

<pre class="brush:php;toolbar:false">//IE7-浏览器 
html{overflow-y: scroll;}//其他浏览器
html{overflow: auto;}//去除页面默认滚动条
html{overflow: hidden;}</pre>
<table border="0">scroll<tbody>
<tr class="firstRow">
<td>　　元素的內容會在元素框的邊界處剪裁，但瀏覽器會顯示捲軸以便查看其餘的內容<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/214b254c0020cbd2cd8ab394696c6d2b-4.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="">
</td>　　[注意]firefox和IE8+瀏覽器在overflow:scroll或auto時，存在padding-bottom缺失現象<td><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/214b254c0020cbd2cd8ab394696c6d2b-5.jpg?x-oss-process=image/resize,p_40" class="lazy" alt=""></td>
</tr>#<pre class="brush:php;toolbar:false">.box{
    width: 100px;
    height: 100px;
    padding: 50px;
    background-color: pink;
    overflow:scroll;
}.in{
    width: 100px;
    height: 200px;
    background-color: lightgreen;
}</pre>
</tbody>
</table>###<pre class="brush:php;toolbar:false">
    </pre>###　　左圖為chrome瀏覽器的情況，右圖為firefox瀏覽器的狀況############## ###########################hidden
　　元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见
no-display
　　当内容溢出容器时不显示元素，类似于元素添加了display:none属性一样
no-content
　　当内容溢出窗口时不显示内容，类似于元素添加了visibility: hidden属性一样
　　[注意]no-display和no-content这两个属性目前没有浏览器支持
 
<h3 id="失效">失效</h3>
 　　绝对定位元素不总是被父级overflow属性剪裁，尤其是当overflow在绝对定位元素及其包含块之间的时候
 　　　　[注意]由于固定定位是相对于视窗定位的，所以固定定位元素无法被其所有的父级元素overflow属性剪裁 
<iframe style="width: 100%; height: 230px;" src="https://demo.xiaohuochai.site/css/overflow/o3.html" frameborder="0" width="320" height="240"></iframe>
【解决办法】
【1】overflow元素自身为包含块
　　给父级设置position:absolute或fixed或relative
<iframe style="width: 100%; height: 260px;" src="https://demo.xiaohuochai.site/css/overflow/o4.html" frameborder="0" width="320" height="240"></iframe>
【2】overflow元素的子元素为包含块
　　在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative
 
<pre class="brush:php;toolbar:false">
    
        绝对定位元素    
        </pre>
 
<h3 id="应用">应用</h3>
　　当overflow设置为auto或scroll或hidden时可以触发BFC，使得overflow可以实现一些相关应用。关于BFC的详细信息移步至此
【1】清除浮动影响
<iframe style="width: 100%; height: 230px;" src="https://demo.xiaohuochai.site/css/overflow/o5.html" frameborder="0" width="320" height="240"></iframe>
　　[注意]IE6-浏览器使用overflow这种方式并不能清除浮动，常用的消除浮动的方法是
 
<pre class="brush:php;toolbar:false">.clear{
    *zoom: 1;
}.clear:after{
    content: '';
    display: block;
    clear: both;
}</pre>
 
【2】避免margin穿透
<iframe style="width: 100%; height: 230px;" src="https://demo.xiaohuochai.site/css/overflow/o6.html" frameborder="0" width="320" height="240"></iframe>
　　[注意]使用overflow属性只是避免margin穿透的很多方法中的一个，其他的方法还有BFC化、设置padding、设置border等 
 
【3】两栏自适应布局
<iframe style="width: 100%; height: 230px;" src="https://demo.xiaohuochai.site/css/overflow/o7.html" frameborder="0" width="320" height="240"></iframe>
　　[注意]使用overflow属性的场景限制比较明显，常用的两栏自适应布局的方法:
 
<pre class="brush:php;toolbar:false">.cell{
    display: table-cell; width: 2000px;
    *display: inline-block; *width:auto;
}</pre>
 
【4】选项卡
 　　overflow选项卡主要用于单页应用
 
<pre class="brush:php;toolbar:false">
    </pre>
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <nav>
        <a>1</a>
        <a>2</a>
        <a>3</a>
        <a>4</a>
    </nav>     
<pre class="brush:php;toolbar:false">body{
    margin: 0;
    text-align: center;
}ul{
    margin: 0;
    padding: 0;
    list-style: none;
}a{
    text-decoration: none;
    color: inherit;
}.show{
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid black;
    line-height: 100px;
    font-size: 40px;
}    .show-in{
    width: 100px;
    height: 100px;
}#one{
    background-color: lightgreen;
}#two{
    background-color: lightyellow;
}#three{
    background-color: lightblue;
}#four{
    background-color: pink;
}.con{
    margin: 10px 0 0 10px;
    width: 100px;
}.con-in{
    display:inline-block;
    width: 16px;
    line-height: 16px;
    border: 1px solid black;
    background-color: gray;
}</pre>
<iframe style="width: 100%; height: 200px;" src="https://demo.xiaohuochai.site/css/overflow/o8.html" frameborder="0" width="320" height="240"></iframe>
本文转载自https://www.cnblogs.com/xiaohuochai/p/5289653.html 作者：小火柴的蓝色理想

以上是深入理解CSS溢出overflow的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：cnbolg。如有侵權，請聯絡admin@php.cn刪除

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract