• 技术文章 >web前端 >html教程

    html div怎么设置宽度

    青灯夜游青灯夜游2021-12-13 14:59:28原创3985

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

    本教程操作环境: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中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html div 设置宽度
    上一篇:html怎么禁止文字选择 下一篇:html怎么设置div高度
    千万级数据并发解决方案

    相关文章推荐

    • html怎么添加字体删除线• html怎么设置input的宽度自适应• html怎么跳转到指定页面• html怎么禁止文字选择• html5中什么元素用于描述文档
    1/1

    PHP中文网