HTML/CSS/Box Model/overflow

Материал из Web эксперт
Перейти к: навигация, поиск

H2 with overflow hidden

 
<!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>
<h2><span>span</span>Header 2 Header 2 Header 2 Header 2 Header 2
</h2>
  <p>This is a test.</p>
</body>
</html>



Overflow auto

 

<!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>
    <p class="menu">
      this is a test. 
    </p>
    <p class="top">
      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. 
    </p>
  </body>
</html>



Overflow auto method demonstrated

 
<!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>
<div id="parent1">
<p>This is the first parent container</p>
<p class="floatleft">This is floated content.</p>
<p class="floatright">This is floated content.</p>
</div>
</body>
</html>



overflow auto, white space, nowrap

 
<!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>
            <p>
          Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>
          Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>
          Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>
      </p>
        </body>
    </html>



overflow determines what happens when an element"s content is larger than its inner box. The default is to show the overflowing content.

 

<!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>

<h1>Box Model</h1> 
<div class="box"></div> 
</body> 
</html>



overflow: scroll

 
<!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>
<p><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
this is a test. this is a test. 
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
</p>
</body>
</html>



Overflow value

 
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.



The overflow Property

 
<?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>
<h1>Overflow</h1>
<p>this is a test. <BR/> this is a test. <BR/>this is a test. <BR/>this is a test. <BR/>
this is a test. <BR/>this is a test. <BR/>this is a test. <BR/>this is a test. <BR/>
this is a test. <BR/>this is a test. <BR/>this is a test. <BR/></p>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/overflow&oldid=5238»