您的位置：首页 > Web前端 > HTML5

[html5入门-18]浅谈html5布局中的overflow和display的用法

2016-10-06 03:04 856 查看

作为页面布局中两个常用的标签，overflow和display在我的学习中经常用到，本文总结了两者各自的用法。

一．Overflow的用法

在W3C标准中，overflow表示当内容溢出元素框时的处理，它具有hidden，scroll，auto，visible和inherit四个属性值，默认值为visible，各属性值描述分别如下

Hidden：内容会被修剪，并且其余内容是不可见的。

Scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

Auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

Visible：默认值。内容不会被修剪，会呈现在元素框之外。

Inherit：规定应该从父元素继承 overflow属性的值。

举例说明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow用法</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: aqua;
overflow:hidden;
}
.div2{
width: 100px;
height: 100px;
background: aqua;
overflow:scroll;
}
.div3{
width: 100px;
height: 100px;
background: aqua;
overflow:auto;
}
.div4{
width: 100px;
height: 100px;
background: aqua;
overflow:visible;
}
</style>
</head>
<body>
<div class="div1">北风卷地白草折，胡天八月即飞雪。 忽如一夜春风来，千树万树梨花开。 散入珠帘湿罗幕，狐裘不暖锦衾薄。 将军角弓不得控，都护铁衣冷难着。</div><br />
<div class="div2">北风卷地白草折，胡天八月即飞雪。 忽如一夜春风来，千树万树梨花开。 散入珠帘湿罗幕，狐裘不暖锦衾薄。 将军角弓不得控，都护铁衣冷难着。</div><br />
<div class="div3">北风卷地白草折，胡天八月即飞雪。 忽如一夜春风来，千树万树梨花开。 散入珠帘湿罗幕，狐裘不暖锦衾薄。 将军角弓不得控，都护铁衣冷难着。</div><br />
<div class="div4">北风卷地白草折，胡天八月即飞雪。 忽如一夜春风来，千树万树梨花开。 散入珠帘湿罗幕，狐裘不暖锦衾薄。 将军角弓不得控，都护铁衣冷难着。</div>
</body>
</html>

分别给div1到div4的overflow设置了hidden，scroll，auto，visible四个属性值得到了不同的结果，在实际应用中可以利用这些值来显示需要展示给读者的内容。

一．Display的用法

在W3C标准中，display规定元素应该生成的框的类型，它具有多个属性值，常用的有none，block，inline，inline-block等，默认值为inline。

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。

举例说明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow用法</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: aqua;
display: none;
}
.div2{
width: 100px;
height: 100px;
background: wheat;
display: inline;
}
.div3{
width: 100px;
height: 100px;
background: teal;
display: inline-block;
}
.div4{
width: 100px;
height: 100px;
background: chartreuse;
display: inline-block;
}
.span5{
width: 100px;
height: 100px;
background:coral;
display: block;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<span class="span5">span5</span>
</body>
</html>

从结果可以看出设置display值为none的div1不显示，值为inline的div2变成行内（内联）标签，设置宽高不再显示，而是有内容撑开，且设置值为inline-block的div3紧跟div2后面，而同样设置值为inline-block的div4也跟div3成了一行，设置display值为block的span5却成了块级标签独占一行，宽度和高度显示出来了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航