ziqim/zhiqim_ui/document/tutorial/uim/css/css.htm

<#def title = "全局定义"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "全局定义是指在全局定义里的标签缺省下的样式规则，包括三部分。"/>
<#def prevUrl = "../index.htm"/>
<#def nextUrl = "rem.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
${zhiqim_com_head_end()}

${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}

<!--容器开始 -->
<div id="container" class="container">

${zhiqim_com_container_ui("ZmUI", "css", "global")}

<!--主体-->
<div id="mainbody" class="mainbody">

${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "全局定义")}

<!-- content开始 -->
<div id="mobileUI_content" class="content">

<!-- 左侧详情 -->
<div class="mobileUI-left">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
    <p class="z-text-blue">全局定义：</p>
    <p class="z-color-333" style="text-indent:38px;">
        全局定义是指在全局定义里的标签缺省下的样式规则，包括三部分：<br>
        1、HTML5新模板和兼容：包括十二个block新标签、三个inline-block新标签，以及隐藏等其他属性；<br>
        2、全局标记一致性定义：约定html、body、img、p等标签在所有浏览器中一致性定义；<br>
        3、表单一致性定义：约定button、input、checkbox、radio等表单属性在所有浏览器中一致性定义。<br>
    </p>
</div>

<#-- 全局HTML5新模板和兼容问题 -->
<div class="tutorial title">全局HTML5新模板和兼容问题</div>

<table class="z-table z-pd10 z-lh200p">
<tr>
    <td class="zi-px18">一、十二个新标签（block）：</td>
</tr>
<tr>
    <td>
<span class="z-text-prewrap z-pre">
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
</span>
    </td>
</tr>
<tr>
    <td class="zi-px18">二、三个新标签（inline-block）：</td>
</tr>
<tr>
    <td>
<span class="z-text-prewrap z-pre">
audio,canvas,video{display:inline-block;vertical-align:baseline;}
</span>
    </td>
</tr>
<tr>
    <td class="zi-px18">三、音频模块兼容性问题</td>
</tr>
<tr>
    <td>
<span class="z-text-prewrap z-pre">
audio:not([controls]){display:none;height:0;}

为防止主流浏览器中，显示"不带控制按钮的音频模块"这一问题。以及解决iOS5移动端显示多余高度的兼容性问题。
</span>
    </td>
</tr>
<tr>
    <td class="zi-px18">四、有隐藏属性或标记为模板的的设置为隐藏</td>
</tr>
<tr>
    <td>
<span class="z-text-prewrap z-pre">
[hidden],template{display:none;}
</span>
    </td>
</tr>
<tr>
    <td class="zi-px18">五、设置svg非根元素的元素不显示仅占位</td>
</tr>
<tr>
    <td>
<span class="z-text-prewrap z-pre">
svg:not(:root){overflow:hidden;}

只支持一个根元素如(&lt;svg&gt;&lt;/svg&gt;)，除了&lt;svg&gt;内部的，其他的都不显示
</span>
    </td>
</tr>
</table>

<#-- 全局标记一致性定义 -->
<div class="tutorial title">全局标记一致性定义</div>

<table class="z-table z-pd10 z-lh200p z-bd-rd8">
<tr><td class="zi-px18">一、所有标签（*,*:before,*:after）</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
*{border-box;box-sizing:border-box;}
*:before,*:after{box-sizing:border-box;}

默认所有元素含插入内容前后宽高设置采用border-box方式，即宽高包括border和padding，向内扩充
</span>
</td></tr>
<tr><td class="zi-px18">二、HTML标签</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
html{
    font-family:"微软雅黑","宋体",Arial,sans-serif;
    overflow-x:hidden;overflow-y:auto;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
@media screen and (max-width: 320px) {
    html {
        font-size:83.33px;
        font-size:26.66667vw
    }
}
... ...
@media screen and (min-width: 769px) {
    html {
        font-size:204.8px
    }
}
html,body{width:100%;height:100%;position:relative;overflow:hidden;}

1、设置全局字体，防止一些设备上字体随屏幕放大而改变字体大小,如webkit的Safari
2、指定文档宽高并隐藏超出
3、当屏幕横坚切换时字体大小调整和以前一样
4、文档字体大小以rem为主，所以用@media screen自定义不同的html字体大小
</span>
</td></tr>
<tr><td class="zi-px18">二、默认字体大小行高颜色、背景颜色，无外边框</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
body{color:#333;background-color:#fff;}
body,table,td,div{font-size:12px;line-height:120%;}
body,form,figure{margin:0;}
</span>
</td></tr>
<tr><td class="zi-px18">三、图片无边框、居中、不超时父边框宽高，IE7以上支持缩放不失真（bicubic）</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
img{border:0;vertical-align:middle;max-width:100%;max-height:100%;-ms-interpolation-mode:bicubic;}
</span>
</td></tr>
<tr><td class="zi-px18">四、段落无内外边距，这样p和br功能相同</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
p{margin:0px;padding:0px;}
</span>
</td></tr>
<tr><td class="zi-px18">五、字段集合默认边框、左右两像素外边距，和内边距设置，名称无边框和内边距</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
p{margin:0px;padding:0px;}
</span>
</td></tr>
<tr><td class="zi-px18">六、分隔线修改为上边框一条1像素的线，上下1em高度</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
hr{
    -webkit-box-sizing:content-box;
       -moz-box-sizing:content-box;
            box-sizing:content-box;
    height:0;border:0;border-top:1px solid #eee;margin:1em 0;
}
</span>
</td></tr>
<tr><td class="zi-px18">七、列表无前序号，无内外边距，行高1.25em</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
ul,dl,ol,li{list-style:none;padding:0;margin:0;}
li{line-height:1.25em;}
</span>
</td></tr>
<tr><td class="zi-px18">八、链接，初始和访问后相同，淡黑色背景透明，移入无下标线、默认淡青色</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
a,a:visited{color:#333;text-decoration:none;background-color:transparent;}
a:focus{color:#43cd6e;outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
a:active,a:hover{color:#43cd6e;outline:0;text-decoration:underline;}

<a href="javascript:void(0);">这里是文本连接效果</a>
</span>
</td></tr>
</table>

<#-- 表单一致性定义 -->
<div class="tutorial title">表单一致性定义</div>

<table class="z-table z-pd10 z-lh200p z-bd-rd8">
<tr><td class="zi-px18">一、统一按钮和输入框无内外边距（Firefox默认按扭和输入框padding 0 2px）</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
</span>
</td></tr>
<tr><td class="zi-px18">二、输入框行高强制成正常（各个浏览器默认值不一样）</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
input{line-height:normal;}
</span>
</td></tr>
<tr><td class="zi-px18">三、表单控件不显示选中边框（webkit默认有边框）</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
button,input,select,optgroup,textarea{color:inherit;font:inherit;margin:0;outline:none;}
</span>
</td></tr>
<tr><td class="zi-px18">四、按钮可见，webkit渲染，不可用时手势为禁止，取消可能的大小写文本转换</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
button{overflow:visible;}
button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:not-allowed;}
button,select{text-transform:none;}
</span>
</td></tr>
<tr><td class="zi-px18">五、单多选按钮有2像素偏下,IE高度和背景白色问题，修改成高度为13px，背景透明</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
input[type="checkbox"],input[type="radio"]{margin-top:-2px;border:0;padding:0;vertical-align:middle;height:13px;background-color:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
</span>
</td></tr>
<tr><td class="zi-px18">六、选项框（select）中的分组默认加粗</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
optgroup{font-weight:bold;}
</span>
</td></tr>
<tr><td class="zi-px18">七、移动设备上webkit自定义数字框高度自动</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}
</span>
</td></tr>
<tr><td class="zi-px18">八、移动设备上webkit自定义搜索框为文本字段，宽高设置采用content-box，按钮取消原生样式</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
input[type="search"]{
    -webkit-appearance:textfield;
    -webkit-box-sizing:content-box;
       -moz-box-sizing:content-box;
            box-sizing:content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{
    -webkit-appearance:none;
}
</span>
</td></tr>
</table>
</div>

<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
    <a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
    <div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
    <a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
    <div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}

<!-- content结束 -->
</div>

${zhiqim_com_chapter()}
<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>

${zhiqim_com_footer()}