说明muiv3.0版本(含)以上的dialog控件支持换行（\n）显示有四种模式的对话框，弹出的对话框为非阻塞模式。组件名作用alert警告框confirm确认框prompt输入对话框toast消息提示框相应代码块mdalert、mdconfirm、mdprompt、mdtoast（在标签里生效）官方文档：https://dev.dcloud.net.cn/mui/ui/#dialog警告框alertalert(message,title,btnValue,callback[,type])message：提示内容title：提示的标题btnValue：弹出框按钮的文字callback：点击btnValue按钮执行的函数。实例<divclass="mui-row"><!--事件按钮--><buttonid="alert"type="button"class="mui-btnmui-btn-bluemui-btn-block">按钮</button><pid="msg">按钮回调函数提示信息</p></div><scripttype="text/javascript">//获取p标签varmsg=document.getElementById("msg")//绑定按钮点击事件document.getElementById("alert").addEventListener("tap",function(){//弹出消息框mui.alert("连接中断...","温馨提示：","好的",function(){msg.innerHTML="点击了确定"})})</script>确认框confirmconfirm(message,title,btnValue,callback[,type])message：提示内容title：提示的标题btnValue：弹出框按钮的文字，这里是一个数组callback：点击btnValue按钮执行的函数，通过回调函数传入的值判断点击的按钮。实例<divclass="mui-row"><!--事件按钮--><buttonid="alert"type="button"class="mui-btnmui-btn-bluemui-btn-block">confirm弹出框按钮</button><pid="msg">按钮回调函数提示信息</p></div><scripttype="text/javascript">//获取p标签varmsg=document.getElementById("msg")//绑定按钮点击事件document.getElementById("alert").addEventListener("tap",function(){//弹出消息框mui.confirm("是否删除","温馨提示：",["确定","取消"],function(event){//判断event来，确定点击了某个按钮if(event.index==0){msg.innerHTML="点击了确定"}else{msg.innerHTML="点击了取消"}})})</script>输入对话框promptprompt(message,placeholder,title,btnValue,callback[,type])message：提示内容placeholder：输入框的内容提示title：提示标题btnValue：弹出框按钮的文字，这里是一个数组callback：点击btnValue按钮执行的函数，通过回调函数传入的index判断点击的按钮。value判断输入的值。实例<divclass="mui-row"><!--事件按钮--><buttonid="alert"type="button"class="mui-btnmui-btn-bluemui-btn-block">prompt弹出框按钮</button><pid="msg">按钮回调函数提示信息</p></div><scripttype="text/javascript">//获取p标签varmsg=document.getElementById("msg")//绑定按钮点击事件document.getElementById("alert").addEventListener("tap",function(){//弹出消息框mui.prompt("你输入你反馈建议：","","反馈建议",["完成","取消"],function(event){if(event.index==0){//通过event.value获取输入框的值msg.innerHTML="点击了完成"+"输入内容："+event.value}else{msg.innerHTML="点击了取消"}})})</script>消息提示框toasttoast(message[,options])message：提示内容[options]：Json；类型参数：{duration:'long',type:'div'}duration：支持两个值long(3500ms),short(2000ms)type:就默认"div"就好。实例<divclass="mui-row"><!--事件按钮--><buttonid="alert"type="button"class="mui-btnmui-btn-bluemui-btn-block">toast消息框按钮</button></div><scripttype="text/javascript">//获取p标签varmsg=document.getElementById("msg")//绑定按钮点击事件document.getElementById("alert").addEventListener("tap",function(){//弹出消息框mui.toast("点击了消息框",{duration:'long',type:'div'})})</script>
说明官网地址：https://dev.dcloud.net.cn/mui/ui/#switch开关（默认样式）快捷键：mSwitch设置mui-active类，默认为开启状态。加上mui-switch-blue，可变成蓝色主题。<divclass="mui-input-row"><label>默认开关</label><!--默认开启--><divclass="mui-switchmui-activemui-switch-blue"><divclass="mui-switch-handle"></div></div></div>开关（迷你版）就是没有开关（off、on）文字<divclass="mui-input-row"><label>迷你版开关</label><divclass="mui-switchmui-switch-minimui-active"><divclass="mui-switch-handle"></div></div></div>修改显示文字通过修改伪类的内容来修改<styletype="text/css">#switch-sex::before{content:"男";}#switch-sex.mui-active:before{content:"女";}</style><divclass="mui-input-row"><label>性别</label><divid="switch-sex"class="mui-switchmui-active"><divclass="mui-switch-handle"></div></div></div>检测开关状态主要就是查看是否包含mui-activevarisActive=document.getElementById("mySwitch").classList.contains("mui-active");if(isActive){console.log("打开状态");}else{console.log("关闭状态");}控制开关状态mui("#mySwitch").switch().toggle();
说明快捷键：mbuttonmui默认按钮为灰色色系：蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系对应五种场景，primary、success、warning、danger、royal；使用.mui-btn类即可生成一个默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮。默认按钮有底色<divclass="mui-content"><!--距离边框有点距离好看一点--><divclass="mui-content-padded"><!--mbutton--><h5>普通按钮</h5><buttontype="button"class="mui-btn">默认</button><buttontype="button"class="mui-btnmui-btn-primary">蓝色</button><buttontype="button"class="mui-btnmui-btn-success">绿色</button><buttontype="button"class="mui-btnmui-btn-warning">黄色</button><buttontype="button"class="mui-btnmui-btn-danger">红色</button><buttontype="button"class="mui-btnmui-btn-royal">紫色</button></div></div>无底色无底色，仅需增加.mui-btn-outlined类即可<divclass="mui-content"><divclass="mui-content-padded"><!--mbutton--><h5>无底色</h5><buttontype="button"class="mui-btnmui-btn-outlined">默认</button><buttontype="button"class="mui-btnmui-btn-primarymui-btn-outlined">蓝色</button><buttontype="button"class="mui-btnmui-btn-successmui-btn-outlined">绿色</button><buttontype="button"class="mui-btnmui-btn-warningmui-btn-outlined">黄色</button><buttontype="button"class="mui-btnmui-btn-dangermui-btn-outlined">红色</button><buttontype="button"class="mui-btnmui-btn-royalmui-btn-outlined">紫色</button></div></div>带图标数字角标的按钮可以直接在按钮上加，也能在包裹一个标签`。带图标的按钮<divclass="mui-content-padded"><h5>直接写</h5><buttontype="button"class="mui-btnmui-btn-successmui-iconmui-icon-qq"></button><h5>包裹图标</h5><buttontype="button"class="mui-btnmui-btn-success"><spanclass="mui-iconmui-icon-qq"></span></button></div>带数字角标的按钮角标的背景颜色会自动透明，需要其他颜色自己定义。<divclass="mui-content-padded"><h5>带数字角标按钮</h5><buttontype="button"class="mui-btnmui-btn-success"><span>请求成功</span><spanclass="mui-badge">12</span></button></div>加载中按钮属性名作用data-loading-textloading状态显示的文案,默认为:loadingdata-loading-iconloading状态显示的图标,默认为mui-spinner或mui-spinnermui-spinner-white（根据按钮样式自动识别），为空表示不使用icondata-loading-icon-positionloading状态显示的icon的位置,支持left/right默认left方式一：官方的写法<divclass="mui-content-padded"><h5>加载中按钮</h5><buttonid="login"type="button"class="mui-btnmui-btn-success"data-loading-text="登录中">登录</button><script>//绑定是一个事件mui(document.body).on("tap","#login",function(e){varbtn=mui(this)//改变按钮为加载中的样式btn.button("loading");//两秒后还原setTimeout(function(){//还原按钮btn.button("reset")},2000)})</script></div>方式二：使用点击事件<divclass="mui-content-padded"><h5>加载中按钮</h5><buttononclick="login(this)"type="button"class="mui-btnmui-btn-success"data-loading-text="登录中">登录</button><script>//传入thisfunctionlogin(e){varbtn=mui(e)btn.button("loading");//两秒后还原setTimeout(function(){btn.button("reset")},2000)}</script></div>方式三：事件监听<divclass="mui-content-padded"><h5>加载中按钮：事件监听</h5><buttonid="login"type="button"class="mui-btnmui-btn-success"data-loading-text="登录中">登录</button><script>document.getElementById("login").addEventListener("tap",functionlogin(e){varbtn=mui(this)btn.button("loading");//两秒后还原setTimeout(function(){btn.button("reset")},2000)})</script></div>
说明数字角标一般和其它控件（列表、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;}注意：行内元素为了兼容，尽量只设置左右外边距，不设置上下内外边距。