CSS和CSS3（背景，图片，浮动等）

CSS和CSS3背景图片

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

还有一个现象，叫文字环绕，将图片左浮动，后面的文字就会环绕图片周围，这是因为浮动元素脱离文档流，但还是在文本流当中。

定位

relative 相对定位，可定位的祖先元素，相对定位的元素不会离开常规流。

absolute 绝对定位，使元素脱离常规流，使元素的位置与文档流无关，因此不占据空间。元素绝对定位后生成块状元素，不论原来它在正常文档流中是什么类型的元素。可结合 top、left、right bottom 使用。绝对定位的元素的位置相对于最近的已定位祖先元素进行定位，可以是 absolute、relative、fixed。

fixed 固定定位，固定定位元素不会随着视口滚动而滚动，继承absolute特点，参照物是视口。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>position-relative</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
    .block {
        position: relative;
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        line-height: 80px;
        border: 2px solid black;
        text-align: center;
        float: left;
        z-index: 9;
    }

    .block:nth-child(2) {
        position: relative;
        top: 0;
        left: -80px;
        border-color: red;
        z-index: 1;
    }
    </style>
</head>

<body>
    <div class="block">A</div>
    <div class="block">B</div>
</body>

</html>

居中

元素内容单行，多行居中，table-cell针对Margin并不感冒，vertical-align，要有高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>block、inline</title>
    <style type="text/css">
        #dan{
            width:300px;   
            height:300px;
            border: 1px solid red;
            margin: 0 auto;
            text-align: center;
            line-height: 300px;
        }
        #warp{
            width:300px;
            height:300px;
            border: 1px solid red;
            margin: 0 auto;
        }
        #duo{
            height:300px;
            text-align: center;
            display: table-cell;
            vertical-align: middle;

        }

    </style>
</head>
<body>
    <div id="dan">单行文本内容</div>
    <div id="warp">
        <div id="duo">
            多行文本居中
            多行文本居中
            多行文本居中
            多行文本居中
            多行文本居中
            多行文本居中
        </div>
    </div>
</body>
</html>