盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
#box{
/*1. width,height只是设置内容区大小,不是设置标签大小
2.如果没有为标签设置内边距和边框,那么内容就是标签大小
3.标签大小=内容区+内边距+边框 */
color: azure;
width: 200px;
height: 200px;
background-color: cadetblue;
/* padding:两组数据就是(上下,左右的顺序);
如果四组数据就是(上右下左)的顺序*/
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
</style>
<body>
<div id="box">
盒子模型
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 浏览器为了在页面中没有样式时，也可以有一个比较好
的显示效果，所以为很多的标签都设置了一些默认的margin
和padding，而它的这些默认样式，正常情况下我们是不需
要使用的。*/
*{
margin: 0;
padding: 0;
}
#pc{
width: 326px;
height: 200px;
background-color: chartreuse;
padding: 100px 37px;
/* bordor设置边框
设置边框为圆角
border:直接加数据 无序;
边框样式可以设置为
dotted（点线）
dashed（虚线
solid（实线）
double（双线
groove （槽线）
border-top-left-radius设置左上为圆角边框
*/
border-radius: 40px;
border: 20px red solid;
}
#px{
width: 100px;
background-color: aquamarine;
padding: 20px 150px;
/* 外边距不会影响盒子整体大小,但会影响盒子位置
margin-top/right/bottom/left。
margin的值可以为负值。
margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为auto时，
浏览器会将左右外边距设置为相等.
垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。
*/
margin:20px;
}
</style>
</head>
<body>
<div id="pc">
<img src="img/c2643c6d15973682.jpg" />
</div>
<div id="px">
这是云
</div>
</body>
</html>