CSS盒子模型与背景图片

——她那么美丽，也不及你的笑

---

从背景图到 BOX MODEL

盒子模型听过很多次了，刚开始也马马虎虎看过，遗忘曲线不是闹着玩儿的。
今天我试着给一段文字加上背景图，有那种好看的背景图，文字看起来也很美的。

<div class="boxdemo">
    <p>一段简单的文字，如果它平淡无奇，还让你心起波澜，请你别忘了，就算是淡如水，也够味儿。</p>
</div>

这是一个div demo，之后我要给这个div加上一些属性了。
CSS规范里写的顺序，能用就用上，规范之所以为规范，是有道理的，就算你还不懂，道理还在，领悟就是了。

/*大小，文字系列，背景，其他*/
/*一次性写background也很舒服，*/

.boxdemo {
        margin: 10px;
        padding: 10px;
        background: #eee url(1.jpg) no-repeat;
}

盒子模型：http://www.cnblogs.com/linjiqin/p/3556497.html
图片贴起来不方便，这个讲的就是盒子模型。

看完了吧，其实前面的代码还是可以有个背景的样子
加个border吧

.boxdemo {
    margin:10px;
    border:5px solid #aaa; /*border写在这里可以吗？*/
    padding: 10px;
    background: #eee url(1.jpg) no-repeat;/*border应该挨着background吗？*/
}

/*这次有了边框吧*/

确实是个盒子了，可是背景图很糟糕。图片很小（十几kb左右）
浏览器缩放时，盒子会有宽窄变化，图片却纹丝不动：

浏览器放大，盒子长而窄，图片左上角在内容区域里，右边是背景色#eee；
浏览器缩小，盒子瘦高，图片左侧一小部分在内容区域里，而下方是背景色#eee；

没错，就是背景的问题，盒子已经有了，现在去找背景的问题。

/*
    讲background的事情
    在一个声明中设置所有背景属性
    （我查资料：其实最多五个，剩下的还是要单独写才有效）
*/

background: #eee url(1.jpg) no-repeat;

这三个分别是
    background-color:
    background-image:  url(path) 
    background-repeat: repeat/no-repeat/repeat-x/repeat-y
//path无需加引号
//repeat按xy方向还是no

可设置的五个属性里还有两个
    background-attachment: fixed/scroll;
    background-position:

//背景图片固定或是随着页面滚动

//position的取值
//1. top/bottom/center  left/right/center 如果只规定了一个关键词，那么第二个值默认为"center"
//2. x% y% 水平和垂直，左上角是0% 0% ，右下角是100% 100% 如果只规定了一个值，另一个默认为 50%
//3. xpos ypos 同2可以混用

可见这些属性都没有提到背景图片自适应框的大小的。

w3c有的介绍很全了，注意到

    background-size /*规定背景图片的尺寸*/

    /*
    length: 80px 80px ,第二个值缺省默认auto
    percentage:以百分比设置，同length
    cover: 把背景图片扩展至足够大，以使背景图像完全覆盖背景区域。也许会导致背景图片的某些部分无法显示在背景定位区域中。
    contain:把背景图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
    */

这里要注意了，cover和contain的区别就在于
contain使图片始终在内容区域内，并不一定完全占满内容区域
cover完全占满内容区域

所以，在

.boxdemo {
        margin: 10px;
        border: 5px solid #aaa;
        padding: 10px;
        background: #eee url(1.jpg) no-repeat;
        /*important*/
        background-size: cover;
}

这次，背景图片算是入我的眼了。
但是老动我就不想看了，固定大小一般是强硬的。

.boxdemo {
        width: 300px;
        min-height: 200px;
        margin: 10px;
        border: 5px solid #aaa;
        padding: 10px;
        background: #eee url(1.jpg) no-repeat;
        /*important*/
        background-size: cover;
}
/*宽度设定，高度最小为200px*/