HTML上下左右布局

HTML中div上下左右布局，可使用div+css中的margin，表示与上下左右div的距离，单位：px。

<div id="5" style="width:250px;height:130px;margin-top: 20px;margin-left: 20px;">
			<form action="http://www.baidu.com" method="get">				
				<input type="submit" value="111"/>
			</form>			
		</div>

注意：一般情况，默认的div是写一个换一行，那么如何定义多个div横向排列而不换行呢？

1、先在head中定义div样式style,如：

<style>
	.div-a{display: inline;}
	.div-b{display: inline-block;}	
</style>

2、在body的div中，加上class属性

备注：class属性名不包含定义样式前面的. 属性名为后面的div-a/div-b

<div class="div-a" id='2' style="background-color:rgb(0, 255, 0);width:300px;height:240px;text-align:center;margin-top: 10px;margin-left: 20px;"></div>
<div class="div-a" id='2' style="background-color:rgb(0, 255, 0);width:300px;height:240px;text-align:center;margin-top: 10px;margin-left: 20px;"></div>
div块里面可以嵌套加入各种元素

备注：display的值inline和inline-block都表示不换行，但是inline不能在div属性中设置宽高，inline-block可以在div属性中设置宽高

定义文本边距(文本上下左右布局)

使用padding方法:

怎样调整文本在div中对齐方式

左右对齐方式：使用text-align：

备注：对于超链接，调整左右对齐方式：使用text-align，此属性要加到标签的父级 style属性中

上下对齐方式 line-height

后面的属性值设置和父级的盒状标签高度相同，这样就可以做到文字垂直方向上居中了

<div class="div-a" id='2' style="background-color:rgb(0, 255, 0);width:200px;height:50px;text-align:center;line-height:50px;margin-top: 10px;margin-left: 20px;">
			<a href="http://testscf.dmall.com">测试环境</a>
		</div>

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 java开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的Gitee获取。
还有 高级java全套视频教程 java进阶架构师 视频+资料+代码+面试题！

全方面的java进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。