CSS 오버플로에 대한 깊은 이해

이전 단어

요소가 특정 크기로 고정되어 있지만 내용이 요소에 맞지 않는 경우. 이때, Overflow 속성을 사용하여 이 상황을 제어할 수 있습니다

Definition

overflow Overflow

　 값: visible | hide | to: 블록 수준 요소, 대체 요소, 테이블 셀

　상속: None

　[참고] IE7 브라우저를 제외한 다른 브라우저는 테이블 셀 요소에 대한 오버플로 속성 설정을 지원하지 않습니다. Firefox 및 IE11 브라우저는 100% height

overflow-X | Overflow-y

로 설정된 table-cell 요소의 하위 요소에 대한 오버플로 속성 설정을 지원하지 않습니다. IE 브라우저에서 개발되었으며 나중에 CSS3에서 채택되고 표준화되었습니다. Overflow-x는 주로 가로 콘텐츠 오버플로의 전단을 정의하는 데 사용되는 반면, Overflow-y는 주로 세로 콘텐츠 오버플로의 전단을 정의하는 데 사용됩니다.

　 [참고] Overflow-x 및 Overflow-y 값이 다음과 같은 경우 마찬가지로 오버플로와 동일합니다. Overflow-x와 Overflow-y 값이 다르고, 값 중 하나가 명시적으로 표시되도록 설정되거나 설정되지 않은 경우 기본값은 표시되고 다른 값은 표시되지 않는 값입니다. 그러면 보이는 값은 auto　 값: visible | auto | no-content

　 초기값: visible

적용 대상: 블록 수준 요소, 테이블 cells Grid

　상속: None

Attribute

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:visible

을 설정하면 해결할 수 있습니다. 왼쪽 그림은 기본 상황이고, 오른쪽 그림은 Overflow

auto

를 설정한 후의 상황입니다. 브라우저는 나머지 콘텐츠를 보기 위해 스크롤 막대를 표시합니다

　 [참고] 일반 브라우저의 경우 및 하지만 IE7 브라우저는 다릅니다. 기본적으로 세로 스크롤 막대가 있습니다<strong></strong>

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

scroll

　요소의 내용은 요소 상자 경계에서 잘리지만 브라우저에서는 스크롤 막대가 표시됩니다. 나머지 내용을 보시려면

[참고] Firefox 및 IE8+ 브라우저에서 Overflow:scroll 또는 auto

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

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

　왼쪽 사진이 해당 상황입니다. 크롬 브라우저이고, 오른쪽 사진은 파이어폭스 브라우저의 상황입니다

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>
    </p><p>
        </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>
    </p>

        
• 1
        
• 2
        
• 3
        
• 4
    

    

        1         2         3         4     

    

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 作者：小火柴的蓝色理想

위 내용은 CSS 오버플로에 대한 깊은 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!