june-common-css v1.0.0

june-comm-css文档

june-comm-css封装了常用的css基础类，可以帮助您快速完成页面开发和布局。

flex布局

flex布局根据 flex-direction 以及 justify-content 封装，align-items 单独封装为辅助的工具类

横向flex布局

.j-row-start .j-row-end
.j-row-center
.j-row-between
.j-row-around

class规则：

.j-row-start {
    display: flex; /* flex布局 */
    flex-direction: row; /* 横向 */
    justify-content: flex-start; /* flex-start排列 */
}

/* 其他以此类推，只改变 flex-direction 属性 */

纵向flex布局

.j-col-start .j-col-end
.j-col-center
.j-col-between
.j-col-around

class规则：

.j-col-start {
    display: flex; /* flex布局 */
    flex-direction: column; /* 纵向 */
    justify-content: flex-start; /* flex-start排列 */
}

/* 其他以此类推，只改变 flex-direction 属性 */

align-items 辅助类

.j-align-start
.j-align-end
.j-align-center
.j-align-stretch
.j-align-baseline

flex布局其他辅助类

.j-flex-center -- flex左右上下居中 .j-flex-warp -- flex-wrap: wrap; .j-flex-nowarp -- flex-wrap: nowrap; .j-flex-noshrink -- flex-shrink: 0;

flex子元素

.j-flex-@{n}

june-common-css 提供了 flex: n 的样式，n可选值为 1-10

定位

.j-rela -- 相对定位 .j-relative -- 相对定位

.j-abso -- 绝对定位 .j-absolute -- 绝对定位

.j-fixed -- 固定定位

浮动

.j-float-left -- 左浮动
.j-float-right -- 左浮动
.j-float-none -- 不浮动 ；一般用于覆盖浮动样式

.j-clear -- 清除浮动 .j-clear-left -- 清除左浮动 .j-clear-right -- 清除右浮动

文本样式

对齐

.j-text-left 左对齐
.j-text-right 右对齐
.j-text-center 居中对齐
.j-text-justify 两端对齐

字体大小

j-fz-n n像素字体，提供 10 - 30 像素整数值字体

谷歌等浏览器对最小字体有限制，一般最小为 12px

溢出隐藏

.j-line-n 文字超过 n 行溢出隐藏，n 值为 1-10 的整数

边距

外边距

n取值为 0-100之间可以被5整出的数

.j-margin-n 四个外边距为 n 像素 .j-m-n 四个外边距为 n 像素（简写）

.j-margin-left-n 左外边距为 n 像素 .j-m-l-n 左外边距为 n 像素（简写）

.j-margin-right-n 右外边距为 n 像素 .j-m-r-n 右外边距为 n 像素（简写）

.j-margin-bottom-n 下外边距为 n 像素 .j-m-b-n 下外边距为 n 像素（简写）

.j-margin-top-n 上外边距为 n 像素 .j-m-t-n 上外边距为 n 像素（简写）

内边距

n取值为 0-100之间可以被5整出的数

.j-margin-n 四个外边距为 n 像素 .j-m-n 四个外边距为 n 像素（简写）

.j-margin-left-n 左外边距为 n 像素 .j-m-l-n 左外边距为 n 像素（简写）

.j-margin-right-n 右外边距为 n 像素 .j-m-r-n 右外边距为 n 像素（简写）

.j-margin-bottom-n 下外边距为 n 像素 .j-m-b-n 下外边距为 n 像素（简写）

.j-margin-top-n 上外边距为 n 像素 .j-m-t-n 上外边距为 n 像素（简写）

透明度

.j-opacity-n n为1-10之间的整数，1表示0.1透明度，10表示不透明

溢出隐藏

.j-scroll-x x轴auto，y轴溢出隐藏 .j-scroll-y y轴auto，x轴溢出隐藏 .j-scroll-disable x轴和y轴溢出隐藏

圆角

j-round 50%的圆角

.j-radius-n n 为0-30之间的偶数