首页 > 代码库 > 块元素和行内元素之间的转换，overflow与visibility
块元素和行内元素之间的转换，overflow与visibility
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素和行内元素之间的转换，overflow与visibility</title>
<style>
a{
width:100px;
height:100px;
border:1px solid #000000;
background:red;
display:block;/*使行内元素a变成块级元素，让它独占了一行*/
/*行内元素特点同行排列，不能设定宽高，块级元素特点独占一行*/
display:inline-block;/*变成行内块级元素*/
}
div{
width:200px;
height:200px;
border:1px solid #000000;
display:inline;/*使块级元素变成行内元素*/
}
#p1{
width:300px;
height:300px;
border:1px solid #000000;
overflow:scroll;/*overflow是针对溢出内容的操作*/
/*overflow:hidden超出部分的内容隐藏*/
/*overflow-x:hidden横向隐藏，竖向显示滚动条*/
/*overflow:auto内容超出时显示滚动条，不超出就不显示滚动条*/
/*overflow:scroll总是显示滚动条*/
}
</style>
</head>
<body>
<h1 style="visibility:hidden">元素消失了</h1>
<!--display:none让元素消失不保留原有空间-->
<!--visibility:hidden让元素消失保留原有空间-->
<!--visibility:visible是默认值，元素可见-->
<a href="http://www.mamicode.com/#">百度</a>
<span>给上面的行内元素a变成块级元素或者行内块级元素做参考</span>
<div>块级元素变成行内元素</div>
<p id="p1">
学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性学习overflow属性
</p>
</body>
</html>
块元素和行内元素之间的转换，overflow与visibility