说明数字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。角标的核心类是.mui-badge，默认为实心灰色背景；同时，mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标官方说明：https://dev.dcloud.net.cn/mui/ui/#badges有底色<spanclass="mui-badge">12</span><spanclass="mui-badgemui-badge-purple">12</span><spanclass="mui-badgemui-badge-primary">12</span><spanclass="mui-badgemui-badge-blue">12</span><spanclass="mui-badgemui-badge-success">12</span><spanclass="mui-badgemui-badge-green">12</span><spanclass="mui-badgemui-badge-warning">12</span><spanclass="mui-badgemui-badge-yellow">12</span><spanclass="mui-badgemui-badge-danger">12</span><spanclass="mui-badgemui-badge-red">12</span>无底色无底色只需要加上mui-badge-inverted类<spanclass="mui-badgemui-badge-inverted">12</span><spanclass="mui-badgemui-badge-purplemui-badge-inverted">12</span><spanclass="mui-badgemui-badge-primarymui-badge-inverted">12</span><spanclass="mui-badgemui-badge-bluemui-badge-inverted">12</span><spanclass="mui-badgemui-badge-successmui-badge-inverted">12</span><spanclass="mui-badgemui-badge-greenmui-badge-inverted">12</span><spanclass="mui-badgemui-badge-warningmui-badge-inverted">12</span><spanclass="mui-badgemui-badge-yellowmui-badge-inverted">12</span><spanclass="mui-badgemui-badge-dangermui-badge-inverted">12</span><spanclass="mui-badgemui-badge-redmui-badge-inverted">12</span>
说明mui使用的是字体图标，有官方自定义的图标，也能使用第三方图标库。内置图标地址：https://dev.dcloud.net.cn/mui/ui/#icon使用只需要引入两个类使用图标：mui-icon使用图标样式：mui-icon-名称<divclass="mui-iconmui-icon-qq"></div>使用官方扩展图标使用扩展图标需要导入扩展扩展包官方地址：https://dev.dcloud.net.cn/mui/mui-icon-extra/index.html使用在对应目录引入css/mui-icon-extra.css、fonts/mui-icons-extra.ttf首先引入样式<linkhref="css/icons-extra.css"rel="stylesheet"/>使用<!--注意这里是mui-icon-extra--><spanclass="mui-icon-extramui-icon-extra-heart-filled"></span>使用第三方字体库导入第三方需要的文件，根据第三方提供的教程使用就好。阿里字体库：https://www.iconfont.cn
基础布局快捷键补全说明：Mui快捷键适用于HBuilder下载地址：https://www.dcloud.io/hbuilderx.html头部快捷键：mHeader<!--带返回的头部--><headerclass="mui-barmui-bar-nav"><aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><h1class="mui-title">标题</h1></header>主体快捷键：mbody<divclass="mui-content">大数据男孩</div>底部选项卡快捷键：mTab<navclass="mui-barmui-bar-tab"><aclass="mui-tab-itemmui-active"><spanclass="mui-iconmui-icon-home"></span><spanclass="mui-tab-label">首页</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-phone"></span><spanclass="mui-tab-label">电话</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-email"></span><spanclass="mui-tab-label">邮件</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-gear"></span><spanclass="mui-tab-label">设置</span></a></nav>效果
垂直对齐vertical-align垂直对齐只针对：行内元素、行内块元素语法vertical-align:baseline;值描述baseline（默认）跟基线对齐bottom跟底线对齐middle跟中线对齐top跟顶线对齐实现图片、表单和文字对齐效果<divclass="box"><imgsrc="./img/icon.png"style="vertical-align:top;">大数据男孩</div><divclass="box"><imgsrc="./img/icon.png"style="vertical-align:middle;">大数据男孩</div><divclass="box"><imgsrc="./img/icon.png"style="vertical-align:baseline;">大数据男孩</div><divclass="box"><imgsrc="./img/icon.png"style="vertical-align:bottom;">大数据男孩</div>去除图片底部空白缝隙方式一只要不是于基线对齐（baseline），就能去掉空隙。<styletype="text/css">.box{border:#00FFFF1pxsolid;}</style><divclass="box"><imgsrc="img/icon.png"alt=""></div><divclass="box"><imgsrc="img/icon.png"alt=""style="vertical-align:middle;"></div>方式二把<img>转为块元素也可以实现。<styletype="text/css">.box{border:#00FFFF1pxsolid;}</style><divclass="box"><imgsrc="img/icon.png"alt=""style="display:block;"></div>
绝对定位水平居中left:50%;：先使左端偏移中间。margin-left:-50px;在往左移动自身宽度的一半。实例<styletype="text/css">.box{width:200px;height:200px;background-color:tomato;/*相对定位*/position:relative;top:0px;left:0px;}.a{width:100px;height:100px;background-color:#00FFFF;/*绝对定位*/position:absolute;left:50%;margin-left:-50px;}</style><divclass="box"><divclass="a"></div></div>层叠顺序z-indexz-index值大的，在上面。z-index只用于定位。默认顺序改变属性
说明定位也是用于布局定位原理：首先确定定位模式，然后确定偏移程度偏移程度偏移程度使用top、right、bottom、left属来定义。偏移程度属性实例描述toptop:10%;定义元素相对于父元素上边线的距离rightright:13px;定义元素相对于父元素右边线的距离bottombottom:13px;定义元素相对于父元素下边线的距离leftleft:13px;定义元素相对于父元素左边线的距离定位模式定位模式使用position属性来定义。值含义static静态定位relative相对定位absolute绝对定位fixed固定定位静态定位（了解）静态定位就是元素默认的定位方式。（几乎不会使用）相对定位（重要）是相对于该元素原本在标准流的位置。但是原来的位置还是被占有。<styletype="text/css">div{width:100px;height:100px;background-color:tomato;}.a{position:relative;background-color:#00FFFF;top:50px;left:50px;}</style><div></div><divclass="a"></div><div></div>绝对定位绝对定位不会保留原来的位置子绝父相绝对定位一般搭配有定位的父容器使用（相对定位）。position:relative;top:100px;left:100px;绝对定位分两种情况：父容器没有定位、父容器有定位。父容器没有定位父容器没有定位，偏移参照就是浏览器窗口<styletype="text/css">.box{width:100px;height:100px;background-color:tomato;margin:100px;}.a{width:100px;height:100px;background-color:#00FFFF;position:absolute;top:50px;left:50px;}</style><divclass="box"><divclass="a"></div></div>父容器有定位父容器没有定位，偏移参照就是有定位的父容器这里父容器是泛指：只要是上层容器都算，<styletype="text/css">.box{width:100px;height:100px;background-color:tomato;position:relative;top:100px;left:100px;}.a{width:100px;height:100px;background-color:#00FFFF;position:absolute;top:50px;left:50px;}</style><divclass="box"><divclass="a"></div></div>固定定位固定定位是：固定在浏览器窗口的位置，不会随滚动条滚动。<styletype="text/css">.box{width:100px;height:1800px;background-color:tomato;top:100px;left:100px;}.a{width:100px;height:100px;background-color:#00FFFF;/*固定定位*/position:fixed;top:50px;left:50px;}</style><divclass="box"><divclass="a"></div></div>
清除浮动的原因蓝色Div是正常流，其他的浮动在蓝色Div上面，这样需要严格控制蓝色Div的高度。<head><styletype="text/css">*{padding:0px;margin:0px;}li{list-style:none;}.box{/*不指定父元素的高度*/width:600px;height:400px;background-color:#00FFFF;margin:auto;}.left{float:left;width:180px;height:400px;background-color:#7FFFD4;}.rightli{float:left;width:95px;height:195px;margin-left:10px;margin-bottom:10px;background-color:antiquewhite;}</style></head><body><divclass="box"><divclass="left"></div><ulclass="right"><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div></body>取消父容器的高度s清除浮动这是最常用清除浮动的方法，只需要在父元素class里面添加就好了。方式一使用after伪元素清除浮动/*清除浮动*/.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}/*ie67专门清除浮动的*/.clearfix{*zoom:1;}方式二使用双伪元素清除浮动.clearfix:before,.clearfix:after{content:"";display:table;}.clearfix:after{clear:both;}/*ie6，7专用方法*/.clearfix{*zoom:1;}还有其他的方法，自行网上查看
圆角圆角是CSS3的新特性小例子圆角是高度的一半<styletype="text/css">.a{width:100px;height:20px;text-align:center;background-color:tomato;border-radius:10px;}</style><divclass="a">大数据男孩</div>画一个圆<styletype="text/css">.b{width:50px;height:50px;text-align:center;background-color:tomato;border-radius:50%;}</style><divclass="b"></div>阴影阴影是CSS3的新特性语法顺序不能颠倒box-shadow:水平阴影垂直阴影模糊距离（虚实）阴影尺寸（影子大小）阴影颜色内外阴影值描述水平阴影必需。水平阴影位置。可为负值。垂直阴影1必需。垂直阴影位置。可为负值。模糊距离（虚实）可选。阴影尺寸（影子大小）可选。阴影颜色可选。可以十六进制，rgb，rgba…内外阴影可选。默认outset（外部阴影），（inset）内部阴影小例子<styletype="text/css">.b{width:50px;height:50px;text-align:center;background-color:tomato;box-shadow:015px30pxrgba(0,0,0,0.3);}</style><divclass="b"></div>
盒子模型说明盒子模型由四部分组成：内容，padding（内边距）、border（边框）、margin（外边距）内容就是盒子里的图片、文字等区域。盒子模型的实际宽度<styletype="text/css">/*实际看到div是100px+20px的宽高*/div{width:100px;height:100px;background-color:tomato;padding:20px;}</style><div>大数据男孩</div>所以在实际操作中，可能会看到设置内边距后，div变大了的情况，所以设置内边距后，需要适当减小div内容的宽高。如果没有指定盒子宽度，则padding就不会撑开盒子宽度。边框border语法以下语法没有顺序限制border:border-widthborder-styleborder-color;/*例如*/border:#00FFFFsolid1px;值描述border-width边框粗细，单位pxborder-style边框样式，常用样式：solid（实线）、dashed（虚线）、dotted（点线）border-width边框颜色，十六进制，rgb，rgba...边框写法总结因为边框有4个边框：top、bottom、left、right，所以可以单独设置某一边的边框。上边框（top）下边框（bottom）左边框（left）右边框（right）border-top-styleborder-bottom-styleborder-left-styleborder-right-styleborder-top-widthborder-bottom-widthborder-left-widthborder-right-widthborder-top-widthborder-bottom-widthborder-left-widthborder-right-widthborder-top（综合写法）border-bottom（综合写法）border-left（综合写法）border-right（综合写法）单独设置小技巧四边取消边框，只设置下边框。input{boder:none;boder-bottom:#00FFFFsolid1px;}内边距padding内容到边框的距离语法/*1个值：上下左右内边距都为1px*/padding:1px;/*2个值：上下1px左右2px*/padding:1px2px;/*3个值：上1px左右2px下3px*/padding:1px2px3px;/*4个值（顺时针）：上1px右2px下3px左4px*/padding:1px2px3px4px;四边单独写/*上边距*/padding-top:1px;/*右边距*/padding-right:1px;/*下边距*/padding-bottom:1px;/*左边距*/padding-left:1px;外边距margin外边距是盒子与盒子之间的距离/*1个值：上下左右内边距都为1px*/margin:1px;/*2个值：上下1px左右2px*/margin:1px2px;/*3个值：上1px左右2px下3px*/margin:1px2px3px;/*4个值（顺时针）：上1px右2px下3px左4px*/margin:1px2px3px4px;四边单独写/*上边距*/margin-top:1px;/*右边距*/margin-right:1px;/*下边距*/margin-bottom:1px;/*左边距*/margin-left:1px;块级盒子水平居中让一个块级盒子水平居中必须要:盒子必须指定宽度（width），以为块级元素不指定宽度，默认100%(占满)。然后左右外边距设置为auto。常见写法：div{width:100px;margin:0auto;}其他写法：div{width:100px;margin-left:auto;margin-right:auto;}div{width:100px;margin:auto;}行内元素、行内块元素的居中使用text-align:center;清除标签默认内外边距一般这就是以后Css的第一句话*{margin：0px;padding:0px;}注意：行内元素为了兼容，尽量只设置左右外边距，不设置上下内外边距。
背景颜色background-color默认背景是透明的语法/*十六进制颜色*/background-color:#00FFFF;/*rgb颜色*/background-color:rgb(255,99,71);/*rgba颜色*/background-color:rgba(255,99,71,0.5);背景图片background-image语法url()是必加的background-image:url(./img/icon.png);背景平铺background-repeat语法background-repeat:no-repeat;值描述repeat背景图片纵向横向铺满整个屏幕（默认）no-repeat不平铺repeat-xx轴平铺repeat-yy轴平铺背景位置background-position语法如果后面的位置只写一个则另一个默认居中。/*底部靠左*/background-position:bottomleft;/*表示x轴y轴，0,0在背景容器左上角*/background-position:10px20px;值描述length百分数、浮点数、px…都可以positiontop、center、bottom、right、left方位名词背景附着background-attachment语法background-attachment:scroll;值描述scroll背景会随对象内容滚动fixed背景图像固定背景简写background语法官方对背景简写没有顺序规定，约定以下面顺序写。下列不写的，就会自动使用默认值。background:背景颜色背景图片地址背景平铺背景滚动背景位置;背景透明背景透明其实是用颜色透明度实现的background-color:rgba(0,0,0,1);最后透明取值[0~1]之间注意是指：背景半透明，内容是不受影响的。
color文本颜色作用是：设置文本颜色值描述预留颜色比如：red、green、blue16进制比如：#00FFFFRGB代码比如：rgba(255,99,71)RGBA代码比RGB多一个透明度，比如：rgba(255,99,71,0.5).big{color:rgba(255,99,71,0.5);}text-align文字对齐方式用于设置标签里的文字的水平对齐方式。属性描述left左对齐（默认）right右对齐center水平居中.big{text-align:center;}line-height行高用于设置行间距。常用属性有三种：px（像素）、em（相对值）、%（百分比），使用最多的还是px。/*一般情况行高比字号大7、8像素就差不多了*/.big{line-height:26px;}text-indent首行文本缩进用于设置首行文本缩进缩进单位一般使用em，这里的em有单独的意思，1em是一个字的宽度，比如函汉子，1em就是一个字的宽度。.big{text-indent:2em;}text-decoration文本的装饰通常用于给链接的修改装饰。值描述none默认。通常用于取消<a>的下划线。underline定义文本下的一条线overline定义文本上的一条线line-through定义穿过文本的一条线。