当前位置: 主页 > vuejs >

css属性声明顺序

2021-09-14    来源:

下面前端入门建站教程为大家介绍一下css属性声明顺序

相关的属性声明按右边的顺序做分组处理,组之间需要有一个空行。实例如下:

.declaration-order {
    display: block;
    float: right;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    border: 1px solid #e5e5e5;
    border-radius: 3px;
    width: 100px;
    height: 100px;

    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    text-align: center;

    color: #333;
    background-color: #f5f5f5;

    opacity: 1;
}

书写顺序前后为:

1、定位属性:position display float left top right bottom overflow clear z-index

2、自身属性:width height padding border margin background

3、文字样式:font-family font-size font-style font-weight font-varient color

4、文本属性:text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

目的:减少浏览器reflow(回流),提升浏览器渲染dom的性能

上面是“css属性声明顺序”的全面内容,想了解更多关于 vuejs 文章,请继续关注前端入门建站教程。

最新文章

猜你喜欢