CSS声明顺序

最新推荐文章于 2022-04-23 11:37:13 发布

Terry_wn

最新推荐文章于 2022-04-23 11:37:13 发布

阅读量171

点赞数

文章标签： CSS

博客介绍了CSS相关属性声明的分组及排列顺序，应将属性声明归为定位、盒模型、视觉、排版四组，定位因可移除元素并覆盖盒模型样式排首位，盒模型决定组件尺寸和位置排第二，其他属性排后面。

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

相关的属性声明应当归为一组，并按照下面的顺序排列：

1.Positioning
2.Box model
3.Visual
4.Typographic

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    /* Misc */
    opacity: 1;
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5; color: #333;
    text-align: center;
}