CSS背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background</title>
<style>
div{
width: 100%;
height: 1500px;
border: 10px solid red;
background: skyblue url(img/bg-little.png) no-repeat top right fixed;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css3背景
background-size指定了背景图片是否扩大缩小。contain一边紧贴边缘拉伸，最终高或者宽有留白。 cover按照一遍拉伸，很可能内容区域超出。而设置100% 100%是高，宽都能将内容显示出来。具体还是跟图片有关。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Size</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
}
div {
width: 800px;
height: 400px;
padding: 50px;
border: 50px solid transparent;
/*background: color position size repeat origin clip attachment image;*/
/*background: #abcdef center 50% no-repeat content-box content-box fixed url('bg1.jpg');*/
background: #abcdef url('bg1.jpg') no-repeat center center;
background-size: 50%;
background-origin: content-box;
background-clip: content-box;
background-attachment: fixed;
}
span.div_border {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 400px;
padding: 50px;
border: 50px solid rgba(255, 0, 0, .25);
}
span.div_padding {
position: absolute;
top: 50px;
left: 50px;
width: 800px;
height: 400px;
border: 50px solid rgba(255, 255, 0, .25);
}
</style>
</head>
<body>
<div></div>
<span class="div_border"></span>
<span class="div_padding"></span>
</body>
</html>
浮动
就是高度丢失了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
.container {
border:1px solid blue;
margin:100px;
/*overflow: hidden;*/
/*zoom: 1;*/
}
.block1 {
width:50px;
height:50px;
background-color: red;
float: left;
}
.block2 {
width:50px;
height:50px;
background-color: black;
float: left;
}
.block3 {
width:50px;
height:50px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="block1"><span>1</span></div>
<div class="block2"><span>22</span></div>
<div class="block3"><span>333</span></div>
</div>
</body>
</html
还有一个现象，叫文字环绕，将图片左浮动，后面的文字就会环绕图片周围，这是因为浮动元素脱离文档流，但还是在文本流当中。