盒子模型(框模型):
1.可以HTML元素看做一个盒子,这个盒子会有宽,高,边框,内边距,外边距 组成。
2.盒子模型组成:内容(content),内边距(padding),边框(border),外边距(margin)。9
margin:控制自身元素与其他元素之间的位置关系。
padding:控制自身内容与自身边框之间的距离关系。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
/*宽*/
width: 100px;
/*高*/
height: 100px;
/*边框*/
border: 2px solid blue;
/*背景颜色*/
background-color: cyan;
/*内边距*/
padding: 10px;
/*外边距*/
/*margin: 40px;
四个方都是40
margin: 40px 60px;
第一个值代表上下,第二值代表左右
margin: 40px 60px 120px;
第一个值代表上,第二个值代表左右,第三个只代表下
margin: 40px 60px 120px 160px;
第一个值代表上,第二个值代表右,第三个值代表下,第四个值代表左
总宽度=内容宽(100)+内边距(左右20)+边框(4)+外边距(220);
总高度=内容高(100)+内边距(左右20)+边框(4)+外边距(160)*/
margin-top: 40px;
margin-right: 60px;
margin-bottom: 120px;
margin-left: 160px;
}
</style>
</head>