The setting of the web page is to be intuitive. In many cases, it does not exactly fit one page. For example, some news websites use paging loading of data. If you want to see more text, you need to keep sliding down. The right side of the browser will always There is a scroll bar, which is the element explained in this article. In web pages, when one page cannot accommodate all the data, we often use overflow to set it.
The role of the overflow attribute is to specify what happens when content overflows the element box, and defines how content that overflows the element's content area will be handled.
1.overflow
In order to better handle overflow content, CSS provides an attribute called overflow. This attribute can set how to handle the content of the overflow element content area. The optional values of the attribute are as shown in the following table:
Example:
<!DOCTYPEhtml><html><head><style>div{width:550px;height:100px;margin-top:20px;border:1pxsolidred;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll ;}div.auto{overflow:au to;}</style></head><body><divclass=hidden>The setting of the web page is to be intuitive. In many cases, it does not exactly satisfy one page. For example, some news websites use paging loading of data. If you want to see more There is a lot of text and you need to keep sliding down. There will always be a scroll bar on the right side of the browser. This is the element explained in this article. On web pages, when one page cannot accommodate all the data, we often use overflow. Make settings. The role of the overflow attribute is to specify what happens when content overflows the element box, and defines how content that overflows the element's content area will be handled. <div> Sliding, there will always be a scroll bar on the right side of the browser. This is the element explained in this article. In web pages, when one page cannot accommodate all the data, we often use overflow to set it. The role of the overflow attribute is to specify what happens when content overflows the element box, and defines how content that overflows the element's content area will be handled. <div> Sliding, there will always be a scroll bar on the right side of the browser. This is the element explained in this article. In web pages, when one page cannot accommodate all the data, we often use overflow to set it. The role of the overflow attribute is to specify what happens when content overflows the element box, and defines how content that overflows the element's content area will be handled. </div></body></html>Running results:
2.overflow-x, overflow-y
CSS3 also provides two attributes, overflow-x and overflow-y. Their functions are similar to the overflow attribute. The optional values of the attribute are the same as the overflow attribute, where:
overflow-x: Set how to handle the overflow content when the content of the element's content area overflows the element in the horizontal direction;
overflow-y: Set how to handle overflow content when the content of the element's content area overflows the element in the vertical direction.
3. The magical usage of overflow
The first usage: solve the margin-top delivery problem
Margin-top transfer problem: The margin-top of the child element will bring down the parent element together. This can be solved by adding overflow:hidden to the parent element.
Second usage: Clear the impact of floating - the height of the parent element collapses
universal removal method
overflow:hidden
clear: both
The third usage: Revealing and hiding animation-beyond hiding
Fourth usage: Single line text exceeds omission
Example:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>dotcpp programming</title><styletype=text/css>#{margin:0px;padding:0px;}section{width:800px; height:460px;marg in:auto;}article{float:left;width:200px;height:460px;overflow:hidden;}h3{font-size:16px;font-weight:bold;margin:10px50px;}p{margin:10px50px;} .chapter_1 {background-color:#A3A3A3;}.chapter_2{background-color:#81559d;}.chapter_3{background-color:#54709d;}.chapter_4{background-color:#4f9d89;}section:hover >article{overflow:hidden;width:50px;}section>article:hover{width:650px;}</style></head><body><section><articleclass=chapter_1><h3>Volume 1</ h3><p>Welcome to the world of C language! C language is a powerful and specialized programming language that is popular among amateur and professional programmers. Let us understand and recognize it before learning! The prototype of C language is A language (ALGOL60 language). </p></article><articleclass=chapter_2><h3>Volume 2</h3><p>Welcome to the world of C language! C language is a powerful and specialized programming language that is popular among amateur and professional programmers. Let us understand and recognize it before learning! The prototype of C language is A language (ALGOL60 language). </p></article><articleclass=chapter_3><h3>Volume 3</h3><p>Welcome to the world of C language! C language is a powerful and specialized programming language that is popular among amateur and professional programmers. Let us understand and recognize it before learning! The prototype of C language is A language (ALGOL60 language). </p></article><articleclass=chapter_4><h3>Volume 4</h3><p>Welcome to the world of C language! C language is a powerful and specialized programming language that is popular among amateur and professional programmers. Let us understand and recognize it before learning! The prototype of C language is A language (ALGOL60 language). </p></article></section></body></html>Running results:
