css宽度定长 |html5 css3 全屏 飞入 飞出

在CSS中，设置宽度可以使用width属性。默认情况下，宽度是根据内容自适应的，但是有时候大家需要设置宽度为定长，具体有哪些场景呢？

.box {
width: 500px;
height: 300px;
background-color: #ccc;
margin: 0 auto;
}

比如上面的代码，设置了一个宽度为500px、高度为300px的容器。此时，容器的宽度已经被固定下来了，不会随内容的变化而变化。

还有一个应用场景是实现水平居中，在实现水平居中的时候，大家需要让容器的宽度为定长，才能保证它的位置正确。

.container {
width: 800px;
margin: 0 auto;
}
.box {
width: 500px;
height: 300px;
background-color: #ccc;
}

上面的代码中，父容器container宽度为800px，margin值是0 auto，表示容器水平居中。而子容器box的宽度为500px，使其在父容器中水平居中。

总之，设置CSS宽度定长可以实现内容不随窗口变化而变化，也方便实现水平居中等功能。但是要注意，如果容器中内容过多，会导致宽度不够而使用滚动条，影响用户体验。