Home > Developer > JavaScript
Overflow attribute, overflow
Preface:
May 4, 2016 Youth Day, as a young student party, began his blog career and encouraged him to be a diligent and motivated young man. Fantasizing about a career with a monthly salary of W + after graduation ......
However, I still had no control over self-control, but I caught up with "Ode to Joy" yesterday. Ah, ah, it seems like a whole day, it's just a decadent Capital !!!
Haha, I believe that many people are pursuing this drama. In this drama, everyone should be able to find their favorite roles and find similar places from them, I personally think it is a very interesting drama.
However, once again, the stories in the drama are all from others, and we should return to real life in time to become our main character and find out what kind of life we want, or do not look like a life, go ahead in a down-to-earth manner...
Ah, please don't flip this bowl of chicken soup, don't spray, thank you!
Also, today is Mother's Day. Remember to call your mother... From <a dream front-end, Xiao Bai>
Overflow has the following four attributes (from W3School)
1. overflow: visible
The Code is as follows:
<!DOCTYPE html>The effect is as follows:
Overflow: visible is also the default attribute value of overflow. As shown in the effect, the portion that exceeds the parent element is still displayed, and the excess portion does not support the height of the parent element.
2. overflow: hidden
The Code is as follows:
<!DOCTYPE html>The effect is as follows:
The child element is displayed in the parent element, and the part beyond the parent element is hidden. At the same time, we also talked about the last floating clearance problem. We can add overflow: hidden to the parent element to clear the floating.
3. overflow: scroll
The Code is as follows:
<!DOCTYPE html>The effect is as follows:
As shown in, overflow: scroll, x, and y will generate a scroll bar, and a scroll bar will be generated when the width of the parent element is sufficient to the width of the child element, if overflow-y: scroll is set, the scroll bar is not generated in the horizontal direction. The effect is as follows:
4. overflow: auto
The Code is as follows:
<!DOCTYPE html>The effect is as follows:
In this case, the browser automatically sets the scroll bar based on the width and height of the Parent and Child elements.
Of course, the above overflow attributes are implemented based on the fixed width and height of the parent element.
I hope the above introduction will be helpful to you. At the same time, it is just a process of internalization. Thank you for choosing the blog Park platform! ---- From <a dream front-end hacker>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
