<#def title = "块样式"/> <#def keyword = "ZhiqimUI"/> <#def desc = "块样式是指对一个块区域增加样式规则，如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。"/> <#def prevUrl = "text.htm"/> <#def nextUrl = "../js/js.htm"/> ${zhiqim_com_header()} ${zhiqim_com_topnav()} ${zhiqim_com_mobileUI_scrollJs()}
${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;}
用于保留占位的隐藏
${zhiqim_com_ZmUI_demo_start()}
ZhiqimUI.mobile
文案 文案 文案 文案
这里是内容
${zhiqim_com_ZmUI_demo_end()}
${zhiqim_com_chapter()}
${zhiqim_com_footer()}