css盒子模型

/*蓝色-外边距margin */ margin-left: 100px; margin-right: 100px; margin-top: 80px;margin-bottom: 80px;
margin本身是无法设置其背景颜色，所以给元素box嵌套了一个div，给这个div设置背景颜色。
 
/*红色-边框border */     border: solid 50px red;
 
/*黄色-内边距padding */padding-top:70px ; padding-bottom: 70px;padding-left: 100px; padding-right: 100px;
 
/*莹绿色-内容content */
width为莹绿色背景的宽度，此时width的宽度只是内容的宽度、
 
内容content的宽度为200px，那么它的背景颜色宽度为200px。
而padding的背景颜色宽度为内容的宽度加上padding-left与padding-right的宽度，也就是内容（width：200px）+左内边距（padding-left：100px）+右内边距（padding-right：100px）=400px。
padding背景颜色的高度为它的上内边距（padding-top）加上它的下内边距（padding-bottom）再加上内容的高度。
边框（border）的背景颜色为在padding周围扩充50px像素大小的矩形框
但是border的背景颜色并不与padding的背景颜色重叠，它只是包围在padding外的一层厚度为50px的框
 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
text-align: center;
margin: 0;
padding: 0;
}
#box{
width: 200px;
padding-top:70px ;
padding-bottom: 70px;
padding-left: 100px;
padding-right: 100px;
border: solid 50px red;/*红色-边框border */
background: yellow;/*黄色-内边距padding */
color: black;
margin-left: 100px;
margin-right: 100px;
margin-top: 80px;
margin-bottom: 80px;

}
#box_margin{
background: blue;/*蓝色-外边距margin */
position: absolute;
}
a{
background: palegreen;/*莹绿色-内容content */
display: block;
}
</style>
</head>
<body>
<div id="box_margin">
<div id="box">
<a>内容content</a>
</div>
</div>

</body>
</html>

 

box-sizing的两个值content-box与border-box

当使用content-box时，元素的总宽度等于边框（border）+内边距（padding）+内容宽度（width）

当使用border-box时，这时元素的总宽度就是width的的宽度，width这时的宽度包含border的宽度与padding的宽度

此时内容的宽度等于总宽度width-border的宽度*2-padding的宽度*2

 

content-box下的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 300px;
        padding: 200px;
        border:solid 50px greenyellow;
        background: blue;
        color: white;
    }
    a{
        background: red;
        display: block;
    }
        </style>
    </head>
    <body>
        <div class="content-box">
            <a>内容</a>
        </div>
    </body>
</html>

 border-box下代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 600px;
        padding: 200px;
        border:solid 50px greenyellow;
        background: blue;
        color: white;
    }
    a{
        background: red;
        display: block;
    }
        </style>
    </head>
    <body>
        <div class="border-box">
            <a>内容</a>
        </div>
    </body>
</html>

 

posted @ 2016-09-06 10:52  桃园  阅读(156)  评论(0)    收藏  举报