基础 - CSS3盒模型 背景

CSS3盒模型

content

padding

border

margin

 

常见问题：

 

W3C盒子下的width height和 IE盒子下的width height?

W3C盒子下的width height　　padding内部的区域,即content

IE盒子下的width height　　　 margin内部的区域,即content+padding+border

 

CSS3的解决方案

/*以border为盒子界*/
box-sizing: border-box;

　　

 CSS3背景

.box {
    width: 400px;
    height: 225px;
    padding: 100px;
    border: 5px dashed #4845e7;
    margin: 100px;
    background: url(http://ww2.sinaimg.cn/large/82677043jw1em07zqgz5xj20zk0zvgyd.jpg) no-repeat  20px 20px scroll,
                url(http://ww2.sinaimg.cn/large/82677043jw1em07zqgz5xj20zk0zvgyd.jpg) no-repeat  0 0 scroll;
    background-color: #C81623;
    /*以content为盒子界*/
    box-sizing: content-box;
    background-origin: content-box;
    background-clip: content-box;
    background-size: 100% auto;
}

　　

.box {
    position: relative;
    width: 400px;
    height: 225px;
    border: 5px dashed #4845e7;
    margin: 100px auto;

}
.box::after,
.box:before {
    position: absolute;
    content: "";
    background: url(http://ww2.sinaimg.cn/large/82677043jw1em07zqgz5xj20zk0zvgyd.jpg) no-repeat  0 0 scroll;
    background-color: #C81623;
    /*以content为盒子界*/
    box-sizing: content-box;
    background-origin: content-box;
    background-clip: content-box;
    background-size: 100% auto;
}
.box::before{
    width: 100%;
    height: 100%;
}
.box::after{
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}