Tiefes Verständnis des CSS-Überlaufs

Vorherige Wörter

Wenn ein Element auf eine bestimmte Größe festgelegt ist, der Inhalt jedoch nicht in das Element passt. Zu diesem Zeitpunkt können Sie das Überlaufattribut verwenden, um diese Situation zu steuern

Definition

Überlaufüberlauf

Wert: sichtbar |. scroll |. auto |. Anfangswert: sichtbar

Gilt für: Elemente auf Blockebene, Tabellenzellen

Vererbung: Keine

[Hinweis] Mit Ausnahme des IE7-Browsers unterstützen andere Browser das Setzen des Überlaufattributs für das Tabellenzellenelement nicht. Firefox- und IE11-Browser unterstützen nicht das Festlegen des Überlaufattributs für untergeordnete Elemente des Tabellenzellenelements, die auf 100 % Höhe eingestellt sind

overflow- X |. overflow- y

Die Attribute overflow-x und overflow-y waren ursprünglich unabhängig vom IE-Browser entwickelte Attribute und wurden später von CSS3 übernommen und standardisiert. overflow-x wird hauptsächlich zum Definieren der Scherung des horizontalen Inhaltsüberlaufs verwendet, während overflow-y hauptsächlich zum Definieren der Scherung des vertikalen Inhaltsüberlaufs verwendet wird

[Hinweis] Wenn die Werte overflow-x und overflow-y The Das Gleiche entspricht einem Überlauf. Wenn die Werte für Überlauf-x und Überlauf-y unterschiedlich sind und einer der Werte explizit auf sichtbar gesetzt oder nicht gesetzt ist, ist der Standardwert sichtbar und der andere Wert ist ein nicht sichtbarer Wert. Der sichtbare Wert wird auf automatisch zurückgesetzt.

Wert: sichtbar | an: Elemente auf Blockebene, Ersetzungselemente, Tabellenzellen

Vererbung: Keine

Attribute

sichtbar

Der Inhalt des Elements ist auch außerhalb der Elementbox sichtbar

[Hinweis 1] Der enthaltende Block des Elements im IE6-Browser wird erweitert , wodurch der überschüssige Inhalt umschlossen werden kann

Das Bild links ist der IE6-Browser, das Bild auf rechts sind andere Browser

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

[Hinweis 2] Es gibt einen Fehler in den Schaltflächen des IE7-Browsers (einschließlich und ) . Wenn der Text auf der Schaltfläche ist: Je größer die Zahl, desto größer der Abstand auf beiden Seiten der Schaltfläche. Dieses Problem kann durch Festlegen von overflow:visible

<p class="box">
    <p class="in"></p></p>

gelöst werden. Das Bild links zeigt die Standardsituation und das Bild rechts zeigt die Situation nach dem Festlegen von overflow

auto

Wenn der Inhalt abgeschnitten ist, zeigt der Browser Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen

[Hinweis] Für allgemeine Browser sind textarea> hat das Attribut overflow:auto. Aber IE7-Browser ist anders. Standardmäßig gibt es eine vertikale Bildlaufleiste

Scrollen

Das Element befindet sich im Element. Der Rand des Felds ist abgeschnitten, aber der Browser zeigt eine Bildlaufleiste an, um den Rest des Inhalts anzuzeigen.

//IE7-浏览器 
html{overflow-y: scroll;}//其他浏览器
html{overflow: auto;}//去除页面默认滚动条
html{overflow: hidden;}

[Hinweis] Firefox- und IE8+-Browser weisen ein fehlendes Padding-Bottom-Phänomen auf, wenn Verwenden von overflow:scroll oder auto

Das Bild links zeigt die Situation des Chrome-Browsers und des Das Bild rechts zeigt die Situation des Firefox-Browsers

.box{
    width: 100px;
    height: 100px;
    padding: 50px;
    background-color: pink;
    overflow:scroll;
}.in{
    width: 100px;
    height: 200px;
    background-color: lightgreen;
}

hidden

　　元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见

no-display

　　当内容溢出容器时不显示元素，类似于元素添加了display:none属性一样

no-content

　　当内容溢出窗口时不显示内容，类似于元素添加了visibility: hidden属性一样

　　[注意]no-display和no-content这两个属性目前没有浏览器支持

 

失效

　　绝对定位元素不总是被父级overflow属性剪裁，尤其是当overflow在绝对定位元素及其包含块之间的时候

　　　　[注意]由于固定定位是相对于视窗定位的，所以固定定位元素无法被其所有的父级元素overflow属性剪裁 

【解决办法】

【1】overflow元素自身为包含块

　　给父级设置position:absolute或fixed或relative

【2】overflow元素的子元素为包含块

　　在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative

<p style="overflow:hidden;">
    <p style="position:relative">
        <p style="position:absolute">绝对定位元素</p>    
    </p>    </p>

 

应用

　　当overflow设置为auto或scroll或hidden时可以触发BFC，使得overflow可以实现一些相关应用。关于BFC的详细信息移步至此

【1】清除浮动影响

　　[注意]IE6-浏览器使用overflow这种方式并不能清除浮动，常用的消除浮动的方法是

.clear{
    *zoom: 1;
}.clear:after{
    content: '';
    display: block;
    clear: both;
}

 

【2】避免margin穿透

　　[注意]使用overflow属性只是避免margin穿透的很多方法中的一个，其他的方法还有BFC化、设置padding、设置border等 

 

【3】两栏自适应布局

　　[注意]使用overflow属性的场景限制比较明显，常用的两栏自适应布局的方法:

.cell{
    display: table-cell; width: 2000px;
    *display: inline-block; *width:auto;
}

 

【4】选项卡

　　overflow选项卡主要用于单页应用

<p class="box">
    <ul class="show">
        <li class="show-in" id="one">1</li>
        <li class="show-in" id="two">2</li>
        <li class="show-in" id="three">3</li>
        <li class="show-in" id="four">4</li>
    </ul>
    <nav class="con">
        <a class="con-in" href="#one">1</a>
        <a class="con-in" href="#two">2</a>
        <a class="con-in" href="#three">3</a>
        <a class="con-in" href="#four">4</a>
    </nav>    </p>

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;
}

本文转载自https://www.cnblogs.com/xiaohuochai/p/5289653.html 作者：小火柴的蓝色理想

Das obige ist der detaillierte Inhalt vonTiefes Verständnis des CSS-Überlaufs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!