html div怎么设置宽度

青灯夜游
发布: 2021-12-13 14:59:28
原创
24369 人浏览过

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>
登录后复制

1.gif

2、使用min-width属性

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>
登录后复制

2.gif

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>
登录后复制

3.gif

推荐教程:《html视频教程

以上是html div怎么设置宽度的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!