CSS中overflow属性怎么使用

2024-01-17 15:49 小编
 我们首先来看一下overflow属性的值有哪些?
 
  overflow属性规定当内容溢出元素框时发生的事情。
 
  overflow有以下四个属性值
 
  visible:初始值,内容不会被修剪,会呈现在元素框之外。
 
  scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
 
  hidden:内容会被修剪,并且其余内容是不可见的。
 
  auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
 
  下面我们来详细说一说overflow属性的这四个值
 
  我们来看具体的示例
 
  代码如下
 
  HTML代码
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <title>CSSoverflow</title>
 
  <linkrel="stylesheet"type="text/css"href="sample.css">
 
  </head>
 
  <body>
 
  <divclass="hid">
 
  <p>
 
  TheEuropeanlanguagesaremembersofthesamefamily.Theirseparateexistenceisamyth.Forscience,music,sport,etc,Europeusesthesamevocabulary.Thelanguagesonlydifferintheirgrammar,theirpronunciationandtheirmostcommonwords.Everyonerealizeswhyanewcommonlanguagewouldbedesirable:onecouldrefusetopayexpensivetranslators.
 
  </p>
 
  </div>
 
  <br>
 
  <divclass="scr">
 
  <p>
 
  TheEuropeanlanguagesaremembersofthesamefamily.Theirseparateexistenceisamyth.Forscience,music,sport,etc,Europeusesthesamevocabulary.Thelanguagesonlydifferintheirgrammar,theirpronunciationandtheirmostcommonwords.Everyonerealizeswhyanewcommonlanguagewouldbedesirable:onecouldrefusetopayexpensivetranslators.
 
  </p>
 
  </div>
 
  <br>
 
  <divclass="vis">
 
  <p>
 
  TheEuropeanlanguagesaremembersofthesamefamily.Theirseparateexistenceisamyth.Forscience,music,sport,etc,Europeusesthesamevocabulary.Thelanguagesonlydifferintheirgrammar,theirpronunciationandtheirmostcommonwords.Everyonerealizeswhyanewcommonlanguagewouldbedesirable:onecouldrefusetopayexpensivetranslators.
 
  </p>
 
  </div>
 
  </body>
 
  </html>
 
  CSS代码
 
  
 
  /*hidden*/
 
  div.hid{
 
  width:200px;
 
  height:100px;
 
  overflow:hidden;
 
  background-color:#FF9999;
 
  }
 
  /*scroll*/
 
  div.scr{
 
  width:200px;
 
  height:100px;
 
  overflow:scroll;
 
  background-color:#99FF99;
 
  }
 
  /*visible*/
 
  div.vis{
 
  width:200px;
 
  height:100px;
 
  overflow:visible;
 
  background-color:#9999FF;
 
  }


Tag: 怎么
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码