CSS 常用样式类总结-优快云博客

本文总结了一系列 CSS 中常用的样式类，包括去除边框、调整内外边距、设置文本对齐方式、定义显示模式及定位等。这些样式类有助于快速实现网页布局和美化，提高开发效率。

/*========================常用样式========================*/

/*边框*/
.no-border {
    border: none !important;
}

.no-border-top {
    border-top: none !important;
}

.no-border-right {
    border-right: none !important;
}

.no-border-bottom {
    border-bottom: none !important;
}

.no-border-left {
    border-left: none !important;
}

/*外边距*/
.no-margin {
    margin: 0 !important;
}

.no-margin-top {
    margin-top: 0 !important;
}

.no-margin-right {
    margin-right: 0 !important;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

.no-margin-left {
    margin-left: 0 !important;
}

/*内边距*/
.no-padding {
    padding: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-padding-left {
    padding-left: 0 !important;
}

/*对齐方式*/
.align-left {
    text-align: left !important;
}

.align-center {
    text-align: center !important;
}

.align-right {
    text-align: right !important;
}

.align-top {
    vertical-align: top !important;
}

.align-middle {
    vertical-align: middle !important;
}

.align-bottom {
    vertical-align: bottom !important;
}

.align-justify {
    text-align: justify !important;
}

/*盒子设置*/
.display-block {
    display: block !important;
}

.display-inline {
    display: inline !important;
}

.display-inline-block {
    display: inline-block !important;
}

.display-table {
    display: table !important;
}

.display-table-cell {
    display: table-cell !important;
}

/*定位设置*/
.position-static {
    position: static !important;
}

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

/*========================/常用样式========================*/

转载于:https://www.cnblogs.com/stumpx/p/6530889.html

css常用样式