Home > Web Front-end > HTML Tutorial > 深入理解CSS溢出overflow_html/css_WEB-ITnose

深入理解CSS溢出overflow_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:23:37
Original
1626 people have browsed it

× 目录 [1]定义 [2]属性 [3]失效 [4]应用

前面的话

  当一个元素固定为某个特定大小,但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况

 

定义

overflow溢出

  值: visible | hidden | scroll | auto | inherit

  初始值: visible

  应用于: 块级元素、替换元素、表单元格

  继承性: 无

  [注意]对于单元格td等,还需要table设置为table-layout:fixed才可行

overflow-X | overflow-y

  overflow-x和overflow-y的属性原本是IE浏览器独自拓展的属性,后来被CSS3采用,并标准化。overflow-x主要用来定义对水平方向内容溢出的剪切,而overflow-y主要用来定义对垂直方向内容溢出的剪切

  [注意]如果overflow-x和overflow-y值相同则等同于overflow。如果overflow-x和overflow-y值不同,且其中一个值显式设置为visible或未设置默认为visible,而另外一个值是非visible的值。则visible值会被重置为auto

  值: visible | hidden | scroll | auto | inherit | no-display | no-content

  初始值: visible

  应用于: 块级元素、替换元素、表单元格

  继承性: 无

 

属性

visible

  元素的内容在元素框之外也可见

  [注意1]IE6-浏览器中元素的包含块会延伸,使得可以包裹其超出的内容

.box{    height: 200px;    width: 200px;    background-color: lightgreen;}.in{    width: 300px;    height: 100px;    background-color: lightblue;}
Copy after login

<div class="box">    <div class="in"></div></div>
Copy after login
Copy after login

  左图为IE6-浏览器,右图为其他浏览器

  [注意2]IE7-浏览器的按钮(包括