1. div宽度的设置
1.1 设置固定宽度
div {
width: 200px;
height: 100px;
background-color: #ccc;
}
在上面的代码中，我们设置了div的宽度为200像素，高度为100像素，并将背景颜色设置为灰色。这意味着无论div内部的内容有多宽或多窄，其宽度都将保持不变。
需要注意的是，设置固定宽度的div在不同设备上可能会显示出不同的效果，因为屏幕大小和分辨率不同。
1.2 使用百分比设置宽度
div {
width: 50%;
height: 100px;
background-color: #ccc;
}
在这个例子中，我们设置div的宽度为50%。这意味着在较小的屏幕上，div元素将缩小。同样，当屏幕窗口变大时，div元素也会随之增大。
1.3 最大和最小宽度
例如，下面的代码确保div元素默认最大宽度为600像素，在大于600像素的屏幕上，div元素将停止增长。同样，最小宽度的设置在屏幕尺寸过小时可以防止div过小而变得无法阅读。
div {
max-width: 600px;
min-width: 200px;
height: 100px;
background-color: #ccc;
}
2. 实例演示
2.1 设置div元素的宽度为100%
div {
width: 100%;
height: 200px;
background-color: #ccc;
}
设置div元素的宽度为100%可能会导致其溢出其容器。为了避免此问题，可以使用box-sizing属性设置元素的盒子模型。
* {
box-sizing: border-box;
}
div {
width: 100%;
height: 200px;
background-color: #ccc;
}
box-sizing属性设置为border-box可以令元素的内边距和边框宽度计算进元素的总宽度中，而不仅是内容宽度。
2.2 设置固定宽度
div {
width: 200px;
height: 100px;
background-color: #ccc;
}
设置固定宽度的div元素可以通过居中对齐来优化布局。
div {
width: 200px;
height: 100px;
background-color: #ccc;
margin: 0 auto;
}
在这个例子中，我们使用了margin属性来将div元素在页面上居中对齐。 margin: 0 auto 这个简单的CSS风格将使div元素水平居中对齐。
2.3 设置最大和最小宽度属性
div {
max-width: 600px;
min-width: 200px;
height: 100px;
background-color: #ccc;
}
使用最大和最小宽度属性可以保持布局稳定，并在不同大小的屏幕上保持良好的外观。