如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
/*
清除网页默认属性
*/
margin: 0px;
padding: 0px;
}
#box{
/*
width和height 只设置内容区大小，不是设置标签整体的大小
如果没有为标签设置内边距和边框，那么就是标签的大小
标签大小=内容区+内边距+边框
*/
width: 1409px;
height: 1406px;
background-color: aqua;
/*
内边距：就是内容区到边框之间的距离，会影响标签的大小
padding-top,left,right,bottom;
周围边距都相同padding：number px；
padding：上 右 下 左；
*/
padding: 50px;
margin: 0px auto;
}
img{
/*<img/>是行级标签，有间距
所以通过display转化为块级标签
*/
display：block；
}
input{
/*
边框：标签的最外层
border-top:2px red solid;(宽度、颜色、样式三样缺一不可)
border-radius:20px;设置圆角边框
*/
border:5px red solid ;
border-radius: 20px;
/*
外边距：margin
外边框不会影响大小，但会影响盒子位置
margin：0px auto;上下 左右居中
*/
margin: 0px auto;
}
</style>
</head>
<body>
<img src="图片路径"/>
<div id="box">
<input type="text" />
</div>
<hr />
<input type="text" />
</body>
</html>
标签大小=内容区+内边距+边框
内容区：width height
内边距：padding-top,left,right,bottom;
边框：border-top:2px red solid;(宽度、颜色、样式三样缺一不可)
圆角边框：border-radius:20px;
外边距：margin（不影响标签大小）
原文：https://www.cnblogs.com/xiaofanmi/p/14792746.html