酒盒举例
对应网页中的盒子模型 http://www.w3school.com.cn/css/css_boxmodel.asp
盒子三要素:内边距,外边距和边框。(内边距和外边距也就是内填充和外填充)
内边距:padding 外边距:margin 边框:border
高宽指的是内容的高宽 width height
盒子宽度计算
width+(padding+border+margin)*2
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>基本盒子</title>
<style type="text/css">
body{
padding:0px;
margin:0px;
}
div{
width:300px;
height:300px;
border:10px solid;
padding:20px;
margin:30px;
}
</style>
</head>
<body>
<div>
1111122223333444444555556666
</div>
eqwqweqweqweqw
</body>
</html>