HTML/CSS/Box Model/overflow
Содержание
- 1 H2 with overflow hidden
- 2 spanHeader 2 Header 2 Header 2 Header 2 Header 2
- 3 Overflow auto
- 4 Overflow auto method demonstrated
- 5 overflow auto, white space, nowrap
- 6 overflow determines what happens when an element"s content is larger than its inner box. The default is to show the overflowing content.
- 7 Box Model
- 8 Overflow
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> h2 {
margin:0; position: relative; overflow: hidden; float: left;
} h2 span {
position: absolute; width: 100%; height: 5em; background: red;
} p {
clear: left;
} </style> </head> <body>
spanHeader 2 Header 2 Header 2 Header 2 Header 2
This is a test.
</body> </html>
</source>
Overflow auto
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>Using Container Attributes</title> <style type="text/css" rel="stylesheet">
p.menu {
border: thin solid gray; margin: 10px; padding: 10px;
} p.top {
width: 100px; height:100px; overflow: auto; border: thin solid gray; margin:10px; padding: 10px;
}
</style> </head> <body>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body>
</html>
</source>
Overflow auto method demonstrated
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">
- parent1 {
border: 5px solid purple; padding: 10px; overflow: auto; width: 100%;
} .floatleft {
border: 5px solid red; float: left; width: 200px; background: white;
} .floatright {
border: 5px solid green; float: right; width: 200px; background: white;
} </style> </head> <body>
This is the first parent container
This is floated content.
This is floated content.
</body> </html>
</source>
overflow auto, white space, nowrap
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
padding: 10px;
margin: 10px;
border: thin solid black;
width: 150px;
height: 150px;
overflow: auto;
white-space: nowrap;
}
</style>
</head>
<body>
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
</body> </html> </source>
overflow determines what happens when an element"s content is larger than its inner box. The default is to show the overflowing content.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">
- .box {
display: static; overflow: visible; visibility: visible; width: 160px; height: 150px; padding: 30px; margin-left: 230px; margin-top: 80px; background-color: #ccc;
} </style> </head> <body>
Box Model
</body> </html>
</source>
overflow: scroll
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Overflow example</title> <style type="text/css"> p {
height: 150px; overflow: scroll; width: 170px;
} </style> </head> <body>
this is a test. this is a test.
</body> </html>
</source>
Overflow value
<source lang="html4strict">
Value Purpose visible Allows the content to overflow the borders of its containing element. hidden The content of the nested element is cut off. scroll scrollbars are added to allow the user to scroll to see the content. auto scrollbar will be shown only if the content does overflow.
</source>
The overflow Property
<source lang="html4strict">
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>The overflow Property</title> <style rel="stylesheet" type="text/css">
body {
font-size: 12px; margin: 10px; border-style: solid; border-width: 1px; border-color: #000000;
} h1 {
font-size: 28px;
} p {
background-color: #FFFFFF; width: 150px; height: 100px; overflow: auto;
} </style> </head> <body>
Overflow
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
</body> </html>
</source>
