div标签小知识

最新推荐文章于 2025-05-22 07:00:00 发布

wolf_kk

最新推荐文章于 2025-05-22 07:00:00 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 HTML div

本文链接：https://blog.youkuaiyun.com/qq_41560865/article/details/89790032

在web前端开发中，div标签常被使用。其面积被均分为12列，设计界面时可通过在div标签中使用class=“col-sm-x”（x取值1 - 12）设定占比，还能使用style=\width:~px\属性设置div模块宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在进行web前端开发时经常用到div这个标签，一个div标签的面积被均分为12列，类似下图：
在这里插入图片描述
因此我们在设计界面的时候就可以根据这个来设计版面，具体用法为：在div标签中使用class=“col-sm-x”（其中x为具体数值）来设定。x的取值为1~12，具体数值占面积比如下：

col-sm-12 {
		width: 100%
	}
	.col-sm-11 {
		width: 91.66666667%
	}
	.col-sm-10 {
		width: 83.33333333%
	}
	.col-sm-9 {
		width: 75%
	}
	.col-sm-8 {
		width: 66.66666667%
	}
	.col-sm-7 {
		width: 58.33333333%
	}
	.col-sm-6 {
		width: 50%
	}
	.col-sm-5 {
		width: 41.66666667%
	}
	.col-sm-4 {
		width: 33.33333333%
	}
	.col-sm-3 {
		width: 25%
	}
	.col-sm-2 {
		width: 16.66666667%
	}
	.col-sm-1 {
		width: 8.33333333%
	}

另外：可以在div中使用style="width:~px"属性设置div模块的宽度。