DIV与TABLE的HTML布局

最新推荐文章于 2023-01-03 10:55:02 发布

xvwen

最新推荐文章于 2023-01-03 10:55:02 发布

阅读量1.3k

点赞数

分类专栏：前端开发文章标签： css html5 html

本文链接：https://blog.csdn.net/xwh3165037789/article/details/120401136

版权

前端开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

DIV布局

div标签是块级元素，本身没有意义，用于其他元素的容器，由于div自带折行效果，因此div默认是列排列

// 两个div默认列排列
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div style="background-color: black; width: 100px ; height: 100px;">
			
		</div>
		
		<div style="background-color: blue; width: 100px; height: 100px;">
			
		</div>
	</body>
</html>

效果图：
列排列在这里插入图片描述

通过style元素可以改变div的排列和布局

float属性，float浮动布局

// style元素的float属性 left是之后从左往右排列，right是从右边向左排列
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div style="background-color: black; width: 100px ; height: 100px;">
			
		</div>
		
		<div style="background-color: blue; width: 100px; height: 100px;float: left;">
			
		</div>
		
		<div style="background-color: red; width: 100px; height: 100px;float: left;">
			
		</div>
	</body>
</html>

效果图：
在这里插入图片描述

宽高和背景颜色布局

// height:设置div的高; width：设置div的宽 (高600px，宽800px)
<div style="width=800px; height-600px; ">
	···
</div>

//background-color ：背景设置颜色

margin的外联样式

//margin : 设置div的外延边距，即到父容器的距离(上->右->下->左)
//margin-left:到父容器左边框的距离
//margin-right:到父容器有边框的距离
//margin-top:到父容器上边框的距离
//margin-bottom:到父容器下边框的距离
<div style="background-color: black ;width :600px ; height:400px; margin : 100px 200px 300px 100px">
	<div style="background-color:blue; width:200px; height:100px;">
		···
	</div>
</div>

效果图：
在这里插入图片描述

padding的内联样式

// padding设置div的内联边距，即到子容器的距离
//padding-left:左内边距
//padding-right:右内边距
//padding-top:上内边距
//padding-bottom:下内边距
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div style="padding: 100px 150px 200px 100px; background-color: blue;width: 600px ; height: 400px;">
			<div style="background-color: white; width: 200px; height: 100px;" >
				
			</div>
		</div>
		
	
	</body>
</html>

效果图：
在这里插入图片描述

不管是外联还是内联都要考虑容器本身大大小，最好以左上点为原点

position的布局定位改变div的位置

// relative定位设置左上定点定位
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div style="background-color: blue;width: 200px ; height: 200px;">
			<div style="position:relative;top:10px; left: 10px ;  background-color: white; width: 140px; height: 140px;" >
				···
			</div>
		</div>
		
	
	</body>
</html>

效果图：
在这里插入图片描述

// absolute设置left,right,top,bottom进行绝对定位（也可以只使用左上的点定位）,z-index设置div层叠顺序
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div style="position:absolute; top:50px; left:50px;  background-color:red; width: 200px ; height: 200px;">
			
		</div>
		<div style="position:absolute; top:60px; left: 60px;  background-color: green; width: 150px; height: 150px;" >
				
		</div>
		<div style="position:absolute; top:70px; left: 70px;  background-color: orange; width: 100px; height: 100px;" >
				
		</div>
	
	</body>
</html>

在第二个div中加入z-index体现层叠效果（下图中绿色将黄色覆盖了）
z-index：1

效果图：
在这里插入图片描述

// fixed相对于浏览器窗口定位，不管窗口如何变化，位置都不变始终以原窗口的距离为准
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div style="position: fixed; top: 210px; left: 210px; background-color: red; width: 400px; height: 300px;"></div>
	
	</body>
</html>

效果图（定义以整个浏览器窗口为准，缩小窗口布局指挥损失不会适应变化）：
在这里插入图片描述

// static默认值，系统默认

style的其他属性

1、font:指定DIV中文本的样式。

说明：font后可以跟文本样式的多个属性，如字粗细、字大小、字体等。

2、font-family:设置要用的字体名称。

3、font-weight:指定文本的粗细。

4、font-size:指定文本的大小。

5、font-style:指定文本样式。

6、color:指定文本颜色。

7、text-align:指定文本水平对齐方式。

8、text-decorator:用于文本的修饰。

9、text-indent:设置文本的缩进。

10、text-transform:设置文本的字母大小写。

11、direction:内容的流向。

12、line-height:指定文本的行高。

13、Word-spacing:字间距。

14、border:设置DIV的边框样式。

15、border-width:设置边框的宽度。

16、border-color：设置边框的颜色。

17、border-style:设置边框的样式。

18、background-position:在DIV中定位背景位置。