[分享]css中宽和高谁在前面

pre { background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 3px; display: inline-block; font-size: 14px; margin: 0; padding: 16px; } p { font-size: 16px; line-height: 1.5; margin: 0 0 24px; }

CSS是前端工程师必须掌握的技能之一，而在CSS中，宽度和高度是经常会使用到的属性。但是，在设置宽度和高度时，你知道它们的书写顺序吗？是宽度在前，还是高度在前呢？那么，来看看本文详细介绍的答案吧。

在CSS中，设置宽度和高度的属性分别是width和height。虽然两者都表示元素的尺寸大小，但是它们的书写顺序是不同的，一般情况下，应该先书写宽度再书写高度。

/* 正确的写法 */
width: 100px;
height: 50px;

/* 错误的写法 */
height: 50px;
width: 100px;

为什么要遵守这种顺序呢？主要是为了符合阅读习惯和便于维护。

首先，宽度和高度是描述元素大小的两个属性，将宽度放在前面，也就是先描述元素的水平方向的大小，符合人们从左往右阅读的习惯。

其次，如果你在开发过程中需要修改元素的大小，那么只需要修改宽度或者高度的值就可以了。如果按照书写顺序，先书写宽度，后书写高度，那么修改时也只需要修改宽度的值。这样就方便了开发者的维护工作。

当然，这个书写顺序不是一定要遵循的，只是为了提高代码的可读性和可维护性，需要我们自己在实际开发中逐渐培养这个习惯。