.html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置内容溢出处理方式</title>
<link href="../2.css/04.设置内容溢出处理方式.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="box">
<img src="../4.img/133303.png" width="710" height="150" alt="" />
<img src="../4.img/133304.png" width="710" height="150" alt="" />
<img src="../4.img/133305.png" width="710" height="150" alt="" />
</div>
</body>
</html>
.CSS部分
@charset "utf-8";
/* CSS Document */
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 14px;
color: #DE987C;
line-height: 20px;
background-image: url(../4.img/133301.jpg);
background-repeat: repeat;
}
/*
overflow-x overflow-y:visible|hidden|auto|scroll|no-display|no-content
*visible:默认值 超出部分始终显示(盒元素之外)
*hidden:超出部分被裁剪
*auto:自动显示滚动条
*scroll:显示显示滚动条
*no-display:当盒子溢出时,不显示元素(含没溢出部分)
*no-content:当盒子溢出时,不显示内容(有待研究其是否兼容)
*/
#box {
width: 830px;
height: 352px;
background-image: url(../4.img/133302.png);
background-repeat: no-repeat;
margin: 100px auto 0px auto;
padding: 20px;
text-align: center;
/* overflow-x: no-content; */
/* overflow-y: no-content; */
overflow-y: hidden;
}
#box img {
border: solid 5px #FFF;
margin-top: 10px;
margin-bottom: 10px;
}