html div怎么设置宽度-html教程-PHP中文网

html div怎么设置宽度

青灯夜游

发布： 2021-12-13 14:55:24

原创

25871人浏览过

html div设置宽度的方法：1、给div元素添加“width:宽度值;”样式设置固定宽度；2、给div元素添加“min-width:宽度值;”样式设置最小宽度；3、给div元素添加“max-width:宽度值;”样式设置最大宽度。

html div怎么设置宽度

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

html div设置宽度

1、使用width属性

width属性设置元素的宽度。（注意： width属性不包括填充，边框和页边距！）

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>默认div宽度是自适应，由视口决定</div>
		<div style="width: 200px;">设置div宽度为200px</div>
	</body>
</html>

登录后复制

2、使用min-width属性

Chromox

Chromox是一款领先的AI在线生成平台，专为喜欢AI生成技术的爱好者制作的多种图像、视频生成方式的内容型工具平台。

184

查看详情

min-width属性设置元素的最小宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>默认div宽度是自适应，由视口决定</div>
		<div style="min-width: 200px;">设置div最小宽度为200px</div>
	</body>
</html>

登录后复制

3、使用max-width属性

max-width属性设置元素的最大宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>默认div宽度是自适应，由视口决定</div>
		<div style="max-width: 500px;">设置div最大宽度为500px</div>
	</body>
</html>

登录后复制