css盒子模型
<!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>