<#def title = "块样式"/> <#def keyword = "ZhiqimUI"/> <#def desc = "块样式是指对一个块区域增加样式规则,如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。"/> <#def prevUrl = "text.htm"/> <#def nextUrl = "table.htm"/> ${zhiqim_com_header()} ${zhiqim_com_topnav()}
${zhiqim_com_ui("tutorial", "ui", "css", "block")}
${zhiqim_com_breadcrumb("文库", "教程", "块样式")}
<#-- 标题 -->

块样式:

块样式是指对一个块区域增加样式规则,如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。

<#-- 一、块定位 -->
一、块定位
名称 样式 说明
.z-fixed
.zi-fixed
        .z-fixed{position:fixed;}
        .zi-fixed{position:fixed !important;}
    
固定定位
.z-absolute
.zi-absolute
        .z-absolute{position:absolute;}
        .zi-absolute{position:absolute !important;}
    
绝对定位
.z-relative
.zi-relative
        .z-relative{position:relative;}
        .zi-relative{position:relative !important;}
    
相对定位
<#-- 二、块浮动对齐 -->
二、块浮动对齐
名称 样式 说明
.z-float-left
.zi-float-left
        .z-float-left{float:left;}
        .zi-float-left{float:left !important;}
    
左对齐
.z-float-center
.zi-float-center
        .z-float-center{margin-left:auto;margin-right:auto;}
        .zi-float-center{margin-left:auto !important;margin-right:auto !important;}
    
居中对齐
.z-float-right
.zi-float-right
        .z-float-right{float:right;}
        .zi-float-right{float:right !important;}
    
右对齐
<#-- 三、块定位+浮动对齐 -->
三、块定位+浮动对齐
名称 样式 说明
.z-relative-left
.zi-relative-left
        .z-relative-left{position:relative;float:left;}
        .zi-relative-left{position:relative !important;float:left !important;}
    
相对左对齐
.z-relative-center
.zi-relative-center
        .z-relative-center{position:relative;margin-left:auto;margin-right:auto;}
        .zi-relative-center{position:relative !important;margin-left:auto !important;margin-right:auto !important;}
    
相对居中
.z-relative-right
.zi-relative-right
        .z-relative-right{position:relative;float:right;}
        .zi-relative-right{position:relative !important;float:right !important;}
    
相对右对齐
.z-absolute-center-middle
.zi-absolute-center-middle
        .z-absolute-center-middle{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;}
        .zi-absolute-center-middle{position:absolute !important;margin:auto !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;}
    
绝对居中,内部块在父块的上下左右居中
<#-- 四、块溢出 -->
四、块溢出
名称 样式 说明
.z-overflow-auto
        .z-overflow-auto{overflow:auto;}
    
块溢出自动设置,指定高度,当内部超时时显示滚动条
.z-overflow-hidden
        .z-overflow-hidden{overflow:hidden;}
    
块溢出的部分不显示
.z-overflow-scroll
        .z-overflow-scroll{overflow:scroll;}
    
块始终显示滚动条,不管内部高度是否超过
.z-overflow-x-auto
        .z-overflow-x-auto{overflow-x:auto;}
    
块X轴溢出自动设置,指定高度,当内部超时时显示滚动条
.z-overflow-x-hidden
        .z-overflow-x-hidden{overflow-x:hidden;}
    
块X轴溢出的部分不显示
.z-overflow-x-scroll
        .z-overflow-x-scroll{overflow-x:scroll;}
    
块X轴始终显示滚动条,不管内部高度是否超过
.z-overflow-y-auto
        .z-overflow-y-auto{overflow-y:auto;}
    
块Y轴溢出自动设置,指定高度,当内部超时时显示滚动条
.z-overflow-y-hidden
        .z-overflow-y-hidden{overflow-y:hidden;}
    
块Y轴溢出的部分不显示
.z-overflow-y-scroll
        .z-overflow-y-scroll{overflow-y:scroll;}
    
块Y轴始终显示滚动条,不管内部高度是否超过
<#-- 五、块手势 -->
五、块鼠标标志
名称 样式 说明
.z-pointer
        .z-pointer{cursor:pointer;}
    
显示手标志,即可点击状态
.z-forbidden
        .z-forbidden{cursor:not-allowed;}
    
禁止使用,显示禁止标志
<#-- 六、块隐藏和显示 -->
六、块隐藏和显示
名称 举例 说明
.z-hide
.zi-hide
        .z-hide{display:none;}
        .zi-hide{display:none !important;}
        
隐藏,不占位
.z-show
.z-show-b
.z-show-ib
.zi-show
.zi-show-b
.zi-show-ib
        .z-show{display:inline;}
        .z-show-b{display:block;}
        .z-show-ib{display:inline-block;}
        .zi-show{display:inline !important;}
        .zi-show-b{display:block !important;}
        .zi-show-ib{display:inline-block !important;}
        
显示的三种状态
1、z-show适用于<span>,<a>,<label>,<input>,<img>
2、z-show-b适用<div>,<p>,<h1>,<form>,<ul><li>
3、z-show-ib适用于把块作为内联方式。
.z-visible
.zi-visible
        .z-visible{visibility:visible !important;}
        .zi-visible{visibility:visible !important;}
    
用于保留占位的显示
.z-hidden
.zi-hidden
        .z-hidden{visibility:hidden !important;}
        .zi-hidden{visibility:hidden !important;}
    
用于保留占位的隐藏
<#-- 七、块宽度 -->
七、块宽度定义(像素宽度 & 百分比宽度)
名称 样式 举例 说明
宽度(w20-w1200)
.z-w20
.zi-w20
        .z-w20{width:20px;}
        .zi-w20{width:20px !important;}
    
宽度
宽度20px
.z-w30
.zi-w30
        .z-w30{width:30px;}
        .zi-w30{width:30px !important;}
    
宽度
宽度30px
.z-w40
.zi-w40
        .z-w40{width:40px;}
        .zi-w40{width:40px !important;}
    
宽度
宽度40px
.z-w50
.zi-w50
        .z-w50{width:50px;}
        .zi-w50{width:50px !important;}
    
宽度
宽度50px
.z-w60
.zi-w60
        .z-w60{width:60px;}
        .zi-w60{width:60px !important;}
    
宽度
宽度60px
.z-w70
.zi-w70
        .z-w70{width:70px;}
        .zi-w70{width:70px !important;}
    
宽度
宽度70px
.z-w80
.zi-w80
        .z-w80{width:80px;}
        .zi-w80{width:80px !important;}
    
宽度
宽度80px
.z-w90
.zi-w90
        .z-w90{width:90px;}
        .zi-w90{width:90px !important;}
    
宽度
宽度90px
.z-w100
.zi-w100
        .z-w100{width:100px;}
        .zi-w100{width:100px !important;}
    
宽度
宽度100px
.z-w110
.zi-w110
        .z-w110{width:110px;}
        .zi-w110{width:110px !important;}
    
宽度
宽度110px
.z-w120
.zi-w120
        .z-w120{width:120px;}
        .zi-w120{width:120px !important;}
    
宽度
宽度120px
.z-w130
.zi-w130
        .z-w130{width:130px;}
        .zi-w130{width:130px !important;}
    
宽度
宽度130px
.z-w140
.zi-w140
        .z-w140{width:140px;}
        .zi-w140{width:140px !important;}
    
宽度
宽度140px
.z-w150
.zi-w150
        .z-w150{width:150px;}
        .zi-w150{width:150px !important;}
    
宽度
宽度150px
.z-w200
.zi-w200
.z-w300
.zi-w300
.z-w400
.zi-w400
.z-w500
.zi-w500
.z-w600
.zi-w600
.z-w700
.zi-w700
.z-w800
.zi-w800
.z-w900
.zi-w900
.z-w1000
.zi-w1000
.z-w1200
.zi-w1200
        .z-w200{width:200px;}
        .z-w300{width:300px;}
        .z-w400{width:400px;}
        .z-w500{width:500px;}
        .z-w600{width:600px;}
        .z-w700{width:700px;}
        .z-w800{width:800px;}
        .z-w900{width:900px;}
        .z-w1000{width:1000px;}
        .z-w1200{width:1200px;}
        
        .zi-w200{width:200px !important;}
        .zi-w300{width:300px !important;}
        .zi-w400{width:400px !important;}
        .zi-w500{width:500px !important;}
        .zi-w600{width:600px !important;}
        .zi-w700{width:700px !important;}
        .zi-w800{width:800px !important;}
        .zi-w900{width:900px !important;}
        .zi-w1000{width:1000px !important;}
        .zi-w1200{width:1200px !important;}
    
宽度
宽度200px
宽度百分比
.z-w5p
.zi-w5p
        .z-w5p{width:5%;}
        .zi-w5p{width:5% !important;}
    
宽度
宽度5%
.z-w8p
.zi-w8p
        .z-w8p{width:8%;}
        .zi-w8p{width:8% !important;}
    
宽度
宽度8%
.z-w10p
.zi-w10p
        .z-w10p{width:10%;}
        .zi-w10p{width:10% !important;}
    
宽度
宽度10%
.z-w12p
.zi-w12p
        .z-w12p{width:12%;}
        .zi-w12p{width:12% !important;}
    
宽度
宽度12%
.z-w15p
.zi-w15p
        .z-w15p{width:15%;}
        .zi-w15p{width:15% !important;}
    
宽度
宽度15%
.z-w20p
.zi-w20p
        .z-w20p{width:20%;}
        .zi-w20p{width:20% !important;}
    
宽度
宽度20%
.z-w30p
.zi-w30p
        .z-w30p{width:30%;}
        .zi-w30p{width:30% !important;}
    
宽度
宽度30%
.z-w40p
.zi-w40p
        .z-w40p{width:40%;}
        .zi-w40p{width:40% !important;}
    
宽度
宽度40%
.z-w50p
.zi-w50p
        .z-w50p{width:50%;}
        .zi-w50p{width:50% !important;}
    
宽度
宽度50%
.z-w60p
.zi-w60p
        .z-w60p{width:60%;}
        .zi-w60p{width:60% !important;}
    
宽度
宽度60%
.z-w70p
.zi-w70p
        .z-w70p{width:70%;}
        .zi-w70p{width:70% !important;}
    
宽度
宽度70%
.z-w80p
.zi-w80p
        .z-w80p{width:80%;}
        .zi-w80p{width:80% !important;}
    
宽度
宽度80%
.z-w90p
.zi-w90p
        .z-w90p{width:90%;}
        .zi-w90p{width:90% !important;}
    
宽度
宽度90%
.z-w100p
.zi-w100p
        .z-w100p{width:100%;}
        .zi-w100p{width:100% !important;}
    
宽度
宽度100%
.z-w100p2
.zi-w100p2
        .z-w100p2{width:50%;}
        .zi-w100p2{width:50% !important;}
    
宽度
宽度二分之一
.z-w100p3
.zi-w100p3
        .z-w100p3{width:33.333333%;}
        .zi-w100p3{width:33.333333% !important;}
    
宽度
宽度三分之一
.z-w100p4
.zi-w100p4
        .z-w100p4{width:25%;}
        .zi-w100p4{width:25% !important;}
    
宽度
宽度四分之一
.z-w100p5
.zi-w100p5
        .z-w100p5{width:20%;}
        .zi-w100p5{width:20% !important;}
    
宽度
宽度五分之一
.z-w100p6
.zi-w100p6
        .z-w100p6{width:16.666666%;}
        .zi-w100p6{width:16.666666% !important;}
    
宽度
宽度六分之一
.z-w100p7
.zi-w100p7
        .z-w100p7{width:14.285714%;}
        .zi-w100p7{width:14.285714% !important;}
    
宽度
宽度七分之一
.z-w100p8
.zi-w100p8
        .z-w100p8{width:12.5%;}
        .zi-w100p8{width:12.5% !important;}
    
宽度
宽度八分之一
.z-w100p9
.zi-w100p9
        .z-w100p9{width:11.111111%;}
        .zi-w100p9{width:11.111111% !important;}
    
宽度
宽度九分之一
<#-- 八、块高度定义 -->
八、块高度定义(像素高度 & 百分比高度)
名称 样式 举例 说明
高度定义h20-h1200
.z-h20
.zi-h20
        .z-h20{height:20px;}
        .zi-h20{height:20px !important;}
    
高度
高度20px
.z-h30
.zi-h30
        .z-h30{height:30px;}
        .zi-h30{height:30px !important;}
    
高度
高度30px
.z-h40
.zi-h40
        .z-h40{height:40px;}
        .zi-h40{height:40px !important;}
    
高度
高度40px
.z-h50
.zi-h50
        .z-h50{height:50px;}
        .zi-h50{height:50px !important;}
    
高度
高度50px
.z-h60
.zi-h60
        .z-h60{height:60px;}
        .zi-h60{height:60px !important;}
    
高度
高度60px
.z-h70
.zi-h70
        .z-h70{height:70px;}
        .zi-h70{height:70px !important;}
    
高度
高度70px
.z-h80
.zi-h80
        .z-h80{height:80px;}
        .zi-h80{height:80px !important;}
    
高度
高度80px
.z-h90
.zi-h90
        .z-h90{height:90px;}
        .zi-h90{height:90px !important;}
    
高度
高度90px
.z-h100
.zi-h100
        .z-h100{height:100px;}
        .zi-h100{height:100px !important;}
    
高度
高度100px
.z-h110
.zi-h110
        .z-h110{height:110px;}
        .zi-h110{height:110px !important;}
    
高度
高度110px
.z-h120
.zi-h120
        .z-h120{height:120px;}
        .zi-h120{height:120px !important;}
    
高度
高度120px
.z-h130
.zi-h130
        .z-h130{height:130px;}
        .zi-h130{height:130px !important;}
    
高度
高度130px
.z-h140
.zi-h140
        .z-h140{height:140px;}
        .zi-h140{height:140px !important;}
    
高度
高度140px
.z-h150
.zi-h150
        .z-h150{height:150px;}
        .zi-h150{height:150px !important;}
    
高度
高度150px
.z-h200
.zi-h200
.z-h300
.zi-h300
.z-h400
.zi-h400
.z-h500
.zi-h500
.z-h600
.zi-h600
.z-h700
.zi-h700
.z-h800
.zi-h800
.z-h900
.zi-h900
.z-h1000
.zi-h1000
.z-h1200
.zi-h1200
        .z-h200{height:200px;}
        .z-h300{height:300px;}
        .z-h400{height:400px;}
        .z-h500{height:500px;}
        .z-h600{height:600px;}
        .z-h700{height:700px;}
        .z-h800{height:800px;}
        .z-h900{height:900px;}
        .z-h1000{height:1000px;}
        .z-h1200{height:1200px;}
        
        .zi-h200{height:200px !important;}
        .zi-h300{height:300px !important;}
        .zi-h400{height:400px !important;}
        .zi-h500{height:500px !important;}
        .zi-h600{height:600px !important;}
        .zi-h700{height:700px !important;}
        .zi-h800{height:800px !important;}
        .zi-h900{height:900px !important;}
        .zi-h1000{height:1000px !important;}
        .zi-h1200{height:1200px !important;}
    
高度
高度200px
高度百分比
.z-h5p
.zi-h5p
        .z-h5p{height:5%;}
        .zi-h5p{height:5% !important;}
    
高度
高度5%
.z-h8p
.zi-h8p
        .z-h8p{height:8%;}
        .zi-h8p{height:8% !important;}
    
高度
高度8%
.z-h10p
.zi-h10p
        .z-h10p{height:10%;}
        .zi-h10p{height:10% !important;}
    
高度
高度10%
.z-h12p
.zi-h12p
        .z-h12p{height:12%;}
        .zi-h12p{height:12% !important;}
    
高度
高度12%
.z-h15p
.zi-h15p
        .z-h15p{height:15%;}
        .zi-h15p{height:15% !important;}
    
高度
高度15%
.z-h20p
.zi-h20p
        .z-h20p{height:20%;}
        .zi-h20p{height:20% !important;}
    
高度
高度20%
.z-h30p
.zi-h30p
        .z-h30p{height:30%;}
        .zi-h30p{height:30% !important;}
    
高度
高度30%
.z-h40p
.zi-h40p
        .z-h40p{height:40%;}
        .zi-h40p{height:40% !important;}
    
高度
高度40%
.z-h50p
.zi-h50p
        .z-h50p{height:50%;}
        .zi-h50p{height:50% !important;}
    
高度
高度50%
.z-h60p
.zi-h60p
        .z-h60p{height:60%;}
        .zi-h60p{height:60% !important;}
    
高度
高度60%
.z-h70p
.zi-h70p
        .z-h70p{height:70%;}
        .zi-h70p{height:70% !important;}
    
高度
高度70%
.z-h80p
.zi-h80p
        .z-h80p{height:80%;}
        .zi-h80p{height:80% !important;}
    
高度
高度80%
.z-h90p
.zi-h90p
        .z-h90p{height:90%;}
        .zi-h90p{height:90% !important;}
    
高度
高度90%
.z-h100p
.zi-h100p
        .z-h100p{height:100%;}
        .zi-h100p{height:100% !important;}
    
高度
高度100%
<#-- 九、块内边距定义 -->
九、块内边距定义(pd0-pd20),由于定义靠前,后续定义会覆盖,如果.z-pd{x}无效时请使用.zi-pd{x}
名称 样式 举例 说明
.z-pd0系列
        .z-pd0{padding:0;}
        .z-pd-l0{padding-left:0;}
        .z-pd-r0{padding-right:0;}
        .z-pd-t0{padding-top:0;}
        .z-pd-b0{padding-bottom:0;}
        
        .zi-pd0{padding:0 !important;}
        .zi-pd-l0{padding-left:0 !important;}
        .zi-pd-r0{padding-right:0 !important;}
        .zi-pd-t0{padding-top:0 !important;}
        .zi-pd-b0{padding-bottom:0 !important;}
    
内边距
内边距为0
.z-pd3系列
        .z-pd3{padding:3px;}
        .z-pd-l3{padding-left:3px;}
        .z-pd-r3{padding-right:3px;}
        .z-pd-t3{padding-top:3px;}
        .z-pd-b3{padding-bottom:3px;}
        
        .zi-pd3{padding:3px !important;}
        .zi-pd-l3{padding-left:3px !important;}
        .zi-pd-r3{padding-right:3px !important;}
        .zi-pd-t3{padding-top:3px !important;}
        .zi-pd-b3{padding-bottom:3px !important;}
    
内边距
内边距为3
.z-pd4系列
        .z-pd4{padding:4px;}
        .z-pd-l4{padding-left:4px;}
        .z-pd-r4{padding-right:4px;}
        .z-pd-t4{padding-top:4px;}
        .z-pd-b4{padding-bottom:4px;}
        
        .zi-pd4{padding:4px !important;}
        .zi-pd-l4{padding-left:4px !important;}
        .zi-pd-r4{padding-right:4px !important;}
        .zi-pd-t4{padding-top:4px !important;}
        .zi-pd-b4{padding-bottom:4px !important;}
    
内边距
内边距为4
.z-pd5系列
        .z-pd5{padding:5px;}
        .z-pd-l5{padding-left:5px;}
        .z-pd-r5{padding-right:5px;}
        .z-pd-t5{padding-top:5px;}
        .z-pd-b5{padding-bottom:5px;}
        
        .zi-pd5{padding:5px !important;}
        .zi-pd-l5{padding-left:5px !important;}
        .zi-pd-r5{padding-right:5px !important;}
        .zi-pd-t5{padding-top:5px !important;}
        .zi-pd-b5{padding-bottom:5px !important;}
    
内边距
内边距为5
.z-pd6系列
        .z-pd6{padding:6px;}
        .z-pd-l6{padding-left:6px;}
        .z-pd-r6{padding-right:6px;}
        .z-pd-t6{padding-top:6px;}
        .z-pd-b6{padding-bottom:6px;}
        
        .zi-pd6{padding:6px !important;}
        .zi-pd-l6{padding-left:6px !important;}
        .zi-pd-r6{padding-right:6px !important;}
        .zi-pd-t6{padding-top:6px !important;}
        .zi-pd-b6{padding-bottom:6px !important;}
    
内边距
内边距为6
.z-pd8系列
        .z-pd8{padding:8px;}
        .z-pd-l8{padding-left:8px;}
        .z-pd-r8{padding-right:8px;}
        .z-pd-t8{padding-top:8px;}
        .z-pd-b8{padding-bottom:8px;}
        
        .zi-pd8{padding:8px !important;}
        .zi-pd-l8{padding-left:8px !important;}
        .zi-pd-r8{padding-right:8px !important;}
        .zi-pd-t8{padding-top:8px !important;}
        .zi-pd-b8{padding-bottom:8px !important;}
    
内边距
内边距为8
.z-pd10系列
        .z-pd10{padding:10px;}
        .z-pd-l10{padding-left:10px;}
        .z-pd-r10{padding-right:10px;}
        .z-pd-t10{padding-top:10px;}
        .z-pd-b10{padding-bottom:10px;}
        
        .zi-pd10{padding:10px !important;}
        .zi-pd-l10{padding-left:10px !important;}
        .zi-pd-r10{padding-right:10px !important;}
        .zi-pd-t10{padding-top:10px !important;}
        .zi-pd-b10{padding-bottom:10px !important;}
    
内边距
内边距为10
.z-pd12系列
        .z-pd12{padding:12px;}
        .z-pd-l12{padding-left:12px;}
        .z-pd-r12{padding-right:12px;}
        .z-pd-t12{padding-top:12px;}
        .z-pd-b12{padding-bottom:12px;}
        
        .zi-pd12{padding:12px !important;}
        .zi-pd-l12{padding-left:12px !important;}
        .zi-pd-r12{padding-right:12px !important;}
        .zi-pd-t12{padding-top:12px !important;}
        .zi-pd-b12{padding-bottom:12px !important;}
    
内边距
内边距为12
.z-pd14系列
        .z-pd14{padding:14px;}
        .z-pd-l14{padding-left:14px;}
        .z-pd-r14{padding-right:14px;}
        .z-pd-t14{padding-top:14px;}
        .z-pd-b14{padding-bottom:14px;}
        
        .zi-pd14{padding:14px !important;}
        .zi-pd-l14{padding-left:14px !important;}
        .zi-pd-r14{padding-right:14px !important;}
        .zi-pd-t14{padding-top:14px !important;}
        .zi-pd-b14{padding-bottom:14px !important;}
    
内边距
内边距为14
.z-pd15系列
        .z-pd15{padding:15px;}
        .z-pd-l15{padding-left:15px;}
        .z-pd-r15{padding-right:15px;}
        .z-pd-t15{padding-top:15px;}
        .z-pd-b15{padding-bottom:15px;}
        
        .zi-pd15{padding:15px !important;}
        .zi-pd-l15{padding-left:15px !important;}
        .zi-pd-r15{padding-right:15px !important;}
        .zi-pd-t15{padding-top:15px !important;}
        .zi-pd-b15{padding-bottom:15px !important;}
    
内边距
内边距为15
.z-pd16系列
        .z-pd16{padding:16px;}
        .z-pd-l16{padding-left:16px;}
        .z-pd-r16{padding-right:16px;}
        .z-pd-t16{padding-top:16px;}
        .z-pd-b16{padding-bottom:16px;}
        
        .zi-pd16{padding:16px !important;}
        .zi-pd-l16{padding-left:16px !important;}
        .zi-pd-r16{padding-right:16px !important;}
        .zi-pd-t16{padding-top:16px !important;}
        .zi-pd-b16{padding-bottom:16px !important;}
    
内边距
内边距为16
.z-pd18系列
        .z-pd18{padding:18px;}
        .z-pd-l18{padding-left:18px;}
        .z-pd-r18{padding-right:18px;}
        .z-pd-t18{padding-top:18px;}
        .z-pd-b18{padding-bottom:18px;}
        
        .zi-pd18{padding:18px !important;}
        .zi-pd-l18{padding-left:18px !important;}
        .zi-pd-r18{padding-right:18px !important;}
        .zi-pd-t18{padding-top:18px !important;}
        .zi-pd-b18{padding-bottom:18px !important;}
    
内边距
内边距为18
.z-pd20系列
        .z-pd20{padding:20px;}
        .z-pd-l20{padding-left:20px;}
        .z-pd-r20{padding-right:20px;}
        .z-pd-t20{padding-top:20px;}
        .z-pd-b20{padding-bottom:20px;}
        
        .zi-pd20{padding:20px !important;}
        .zi-pd-l20{padding-left:20px !important;}
        .zi-pd-r20{padding-right:20px !important;}
        .zi-pd-t20{padding-top:20px !important;}
        .zi-pd-b20{padding-bottom:20px !important;}
    
内边距
内边距为20
<#-- 十、块外边距定义 -->
十、块外边距定义(mg0-mg20),由于定义靠前,后续定义会覆盖,如果.z-mg{x}无效时请使用.zi-mg{x}
名称 样式 举例 说明
.z-mg0系列
        .z-mg0{margin:0;}
        .z-mg-l0{margin-left:0;}
        .z-mg-r0{margin-right:0;}
        .z-mg-t0{margin-top:0;}
        .z-mg-b0{margin-bottom:0;}
        
        .zi-mg0{margin:0 !important;}
        .zi-mg-l0{margin-left:0 !important;}
        .zi-mg-r0{margin-right:0 !important;}
        .zi-mg-t0{margin-top:0 !important;}
        .zi-mg-b0{margin-bottom:0 !important;}
    
外边距
外边距为0
.z-mg3系列
        .z-mg3{margin:3px;}
        .z-mg-l3{margin-left:3px;}
        .z-mg-r3{margin-right:3px;}
        .z-mg-t3{margin-top:3px;}
        .z-mg-b3{margin-bottom:3px;}
        
        .zi-mg3{margin:3px !important;}
        .zi-mg-l3{margin-left:3px !important;}
        .zi-mg-r3{margin-right:3px !important;}
        .zi-mg-t3{margin-top:3px !important;}
        .zi-mg-b3{margin-bottom:3px !important;}
    
外边距
外边距为3
.z-mg4系列
        .z-mg4{margin:4px;}
        .z-mg-l4{margin-left:4px;}
        .z-mg-r4{margin-right:4px;}
        .z-mg-t4{margin-top:4px;}
        .z-mg-b4{margin-bottom:4px;}
        
        .zi-mg4{margin:4px !important;}
        .zi-mg-l4{margin-left:4px !important;}
        .zi-mg-r4{margin-right:4px !important;}
        .zi-mg-t4{margin-top:4px !important;}
        .zi-mg-b4{margin-bottom:4px !important;}
    
外边距
外边距为4
.z-mg5系列
        .z-mg5{margin:5px;}
        .z-mg-l5{margin-left:5px;}
        .z-mg-r5{margin-right:5px;}
        .z-mg-t5{margin-top:5px;}
        .z-mg-b5{margin-bottom:5px;}
        
        .zi-mg5{margin:5px !important;}
        .zi-mg-l5{margin-left:5px !important;}
        .zi-mg-r5{margin-right:5px !important;}
        .zi-mg-t5{margin-top:5px !important;}
        .zi-mg-b5{margin-bottom:5px !important;}
    
外边距
外边距为5
.z-mg6系列
        .z-mg6{margin:6px;}
        .z-mg-l6{margin-left:6px;}
        .z-mg-r6{margin-right:6px;}
        .z-mg-t6{margin-top:6px;}
        .z-mg-b6{margin-bottom:6px;}
        
        .zi-mg6{margin:6px !important;}
        .zi-mg-l6{margin-left:6px !important;}
        .zi-mg-r6{margin-right:6px !important;}
        .zi-mg-t6{margin-top:6px !important;}
        .zi-mg-b6{margin-bottom:6px !important;}
    
外边距
外边距为6
.z-mg8系列
        .z-mg8{margin:8px;}
        .z-mg-l8{margin-left:8px;}
        .z-mg-r8{margin-right:8px;}
        .z-mg-t8{margin-top:8px;}
        .z-mg-b8{margin-bottom:8px;}
        
        .zi-mg8{margin:8px !important;}
        .zi-mg-l8{margin-left:8px !important;}
        .zi-mg-r8{margin-right:8px !important;}
        .zi-mg-t8{margin-top:8px !important;}
        .zi-mg-b8{margin-bottom:8px !important;}
    
外边距
外边距为8
.z-mg10系列
        .z-mg10{margin:10px;}
        .z-mg-l10{margin-left:10px;}
        .z-mg-r10{margin-right:10px;}
        .z-mg-t10{margin-top:10px;}
        .z-mg-b10{margin-bottom:10px;}
        
        .zi-mg10{margin:10px !important;}
        .zi-mg-l10{margin-left:10px !important;}
        .zi-mg-r10{margin-right:10px !important;}
        .zi-mg-t10{margin-top:10px !important;}
        .zi-mg-b10{margin-bottom:10px !important;}
    
外边距
外边距为10
.z-mg12系列
        .z-mg12{margin:12px;}
        .z-mg-l12{margin-left:12px;}
        .z-mg-r12{margin-right:12px;}
        .z-mg-t12{margin-top:12px;}
        .z-mg-b12{margin-bottom:12px;}
        
        .zi-mg12{margin:12px !important;}
        .zi-mg-l12{margin-left:12px !important;}
        .zi-mg-r12{margin-right:12px !important;}
        .zi-mg-t12{margin-top:12px !important;}
        .zi-mg-b12{margin-bottom:12px !important;}
    
外边距
外边距为12
.z-mg14系列
        .z-mg14{margin:14px;}
        .z-mg-l14{margin-left:14px;}
        .z-mg-r14{margin-right:14px;}
        .z-mg-t14{margin-top:14px;}
        .z-mg-b14{margin-bottom:14px;}
        
        .zi-mg14{margin:14px !important;}
        .zi-mg-l14{margin-left:14px !important;}
        .zi-mg-r14{margin-right:14px !important;}
        .zi-mg-t14{margin-top:14px !important;}
        .zi-mg-b14{margin-bottom:14px !important;}
    
外边距
外边距为14
.z-mg15系列
        .z-mg15{margin:15px;}
        .z-mg-l15{margin-left:15px;}
        .z-mg-r15{margin-right:15px;}
        .z-mg-t15{margin-top:15px;}
        .z-mg-b15{margin-bottom:15px;}
        
        .zi-mg15{margin:15px !important;}
        .zi-mg-l15{margin-left:15px !important;}
        .zi-mg-r15{margin-right:15px !important;}
        .zi-mg-t15{margin-top:15px !important;}
        .zi-mg-b15{margin-bottom:15px !important;}
    
外边距
外边距为15
.z-mg16系列
        .z-mg16{margin:16px;}
        .z-mg-l16{margin-left:16px;}
        .z-mg-r16{margin-right:16px;}
        .z-mg-t16{margin-top:16px;}
        .z-mg-b16{margin-bottom:16px;}
        
        .zi-mg16{margin:16px !important;}
        .zi-mg-l16{margin-left:16px !important;}
        .zi-mg-r16{margin-right:16px !important;}
        .zi-mg-t16{margin-top:16px !important;}
        .zi-mg-b16{margin-bottom:16px !important;}
    
外边距
外边距为16
.z-mg18系列
        .z-mg18{margin:18px;}
        .z-mg-l18{margin-left:18px;}
        .z-mg-r18{margin-right:18px;}
        .z-mg-t18{margin-top:18px;}
        .z-mg-b18{margin-bottom:18px;}
        
        .zi-mg18{margin:18px !important;}
        .zi-mg-l18{margin-left:18px !important;}
        .zi-mg-r18{margin-right:18px !important;}
        .zi-mg-t18{margin-top:18px !important;}
        .zi-mg-b18{margin-bottom:18px !important;}
    
外边距
外边距为18
.z-mg20系列
        .z-mg20{margin:20px;}
        .z-mg-l20{margin-left:20px;}
        .z-mg-r20{margin-right:20px;}
        .z-mg-t20{margin-top:20px;}
        .z-mg-b20{margin-bottom:20px;}
        
        .zi-mg20{margin:20px !important;}
        .zi-mg-l20{margin-left:20px !important;}
        .zi-mg-r20{margin-right:20px !important;}
        .zi-mg-t20{margin-top:20px !important;}
        .zi-mg-b20{margin-bottom:20px !important;}
    
外边距
外边距为20
.z-mg30系列
        .z-mg30{margin:30px;}
        .z-mg-l30{margin-left:30px;}
        .z-mg-r30{margin-right:30px;}
        .z-mg-t30{margin-top:30px;}
        .z-mg-b30{margin-bottom:30px;}
        
        .zi-mg30{margin:30px !important;}
        .zi-mg-l30{margin-left:30px !important;}
        .zi-mg-r30{margin-right:30px !important;}
        .zi-mg-t30{margin-top:30px !important;}
        .zi-mg-b30{margin-bottom:30px !important;}
    
外边距
外边距为30
.z-mg40系列
        .z-mg40{margin:40px;}
        .z-mg-l40{margin-left:40px;}
        .z-mg-r40{margin-right:40px;}
        .z-mg-t40{margin-top:40px;}
        .z-mg-b40{margin-bottom:40px;}
        
        .zi-mg40{margin:40px !important;}
        .zi-mg-l40{margin-left:40px !important;}
        .zi-mg-r40{margin-right:40px !important;}
        .zi-mg-t40{margin-top:40px !important;}
        .zi-mg-b40{margin-bottom:40px !important;}
    
外边距
外边距为40
.z-mg50系列
        .z-mg50{margin:50px;}
        .z-mg-l50{margin-left:50px;}
        .z-mg-r50{margin-right:50px;}
        .z-mg-t50{margin-top:50px;}
        .z-mg-b50{margin-bottom:50px;}
        
        .zi-mg50{margin:50px !important;}
        .zi-mg-l50{margin-left:50px !important;}
        .zi-mg-r50{margin-right:50px !important;}
        .zi-mg-t50{margin-top:50px !important;}
        .zi-mg-b50{margin-bottom:50px !important;}
    
外边距
外边距为50
${zhiqim_com_chapter()}
${zhiqim_com_footer()}