base-flex
Version:
重置浏览器默认的一些样式，包含 flexbox 布局，使用 scss 语法编写
21 lines • 15.2 kB
CSS
@charset 'UTF-8';/*!
* base-flex.scss
*
* @vaersion 2.4.2
* @author 欧鹏程 vxhly <pengchengou@gmail.com>
*
* 参考地址：
* 语法：scss
*
* @description 重置浏览器默认的一些样式，包含 flexbox 布局
*/blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}article,aside,audio,details,figcaption,figure,footer,header,hgroup,main,mark,menu,nav,section,summary,time,video{display:block;margin:0;padding:0}[hidden],script,template{display:none}canvas{display:inline-block}summary{display:list-item}img{vertical-align:middle;-ms-interpolation-mode:bicubic;border:0}body,html{overflow:hidden;min-height:100%}address,blockquote,dl,fieldset,figure,hr,ol,p,pre,ul{margin:0 0 1rem}a,b,big,code,font,i,img,q,span,time{display:inline-block;margin:.3rem 0}:focus{outline:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}::after,::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}hr{overflow:visible;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:100%;overflow-y:auto;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{color:#12c2e9;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{text-decoration:underline;color:#317023}a:visited{text-decoration:none;color:#12c2e9}a:focus{outline:thin dotted;outline:1px auto -webkit-focus-ring-color;outline-offset:-2px}a:active,a:hover{outline-width:0}sup{vertical-align:text-top}sub{vertical-align:text-bottom}abbr[title]{text-decoration:underline dotted;border-bottom:1px dotted;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted}::-moz-selection{color:#fff;background:#12c2e9;text-shadow:none}::-moz-selection,::selection{color:#fff;background:#12c2e9;text-shadow:none}a,ins{text-decoration:none}ins,mark{color:#333;background:#ffa}abbr[title],dfn[title]{cursor:help}dfn[title]{font-style:normal;border-bottom:1px dotted}html{font-size:16px;-webkit-tap-highlight-color:transparent}body{font-family:'Segoe UI','Lucida Grande',Helvetica,Arial,'Microsoft YaHei',FreeSans,Arimo,'Droid Sans','wenquanyi micro hei','Hiragino Sans GB','Hiragino Sans GB W3',FontAwesome,sans-serif;font-weight:400;line-height:1.6;color:#333;background:#fff}h1,h2,h3,h4,h5,h6{font-weight:600;margin:0 0 1rem}address,cite,dfn,em,var{font-style:normal italic}code,kbd,pre,samp{font-family:Monaco,Menlo,Consolas,'Courier New',FontAwesome,monospace;font-size:1em}small{font-size:80%}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}mark{color:#000;background:#ff0}b,strong{font-weight:inherit}sub,sup{font-size:75%;line-height:0}pre{white-space:pre-wrap}q{quotes:'\201C' '\201D' '\2018' '\2019'}i{font-size:1.3rem}ol,ul{list-style:none}legend{color:#000}fieldset,img{border:0}button,input,select,textarea{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga','kern'}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal;*overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{cursor:pointer;-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}legend{display:table;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width:100%;padding:0;white-space:normal;color:inherit}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}button,input{line-height:normal}button,select{text-transform:none}table{border-spacing:0;border-collapse:collapse}table td{vertical-align:top}table button,table input{*overflow:auto}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}svg:not(:root){overflow:hidden}@media print{*{color:#000;color:#000;background:0 0;background:0 0;-webkit-box-shadow:none;box-shadow:none;text-shadow:none;text-shadow:none;-webkit-filter:none;filter:none;-ms-filter:none}::after,::before{color:#000;background:0 0;-webkit-box-shadow:none;box-shadow:none;text-shadow:none}a{text-decoration:underline}a:visited{text-decoration:underline}a[href]::after{content:' (' attr(href) ')'}a[href^='#']::after,a[href^='javascript:']::after{content:''}abbr[title]::after{content:' (' attr(title) ')'}blockquote,pre{border:1px solid #ccc;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}@media only screen and (max-width:640px){body{word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;-ms-hyphens:auto}}/*!
* scss-flex.scss
*
* @vaersion 1.5.0
* @author 欧鹏程 vxhly <pengchengou@gmail.com>
*
* 参考地址：https://github.com/lzxb/flex.css
* 语法：scss
*
* @description：flexbox 布局模式是一种新的 CSS3，是专为现代网络更复杂的需求
*/[flex]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}[flex]>*{display:block}[flex]>[flex]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}[flex~='dir:left']{flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row}[flex~='dir:right']{flex-direction:row-reverse;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse}[flex~='dir:top']{flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column}[flex~='dir:bottom']{flex-direction:column-reverse;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse}[flex~='wrap:nowrap']{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}[flex~='wrap:wrap']{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}[flex~='wrap:reverse']{-webkit-flex-wrap:wrap-reverse;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}[flex~='flow:left-nowrap']{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap}[flex~='flow:left-wrap']{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap}[flex~='flow:left-reverse']{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap-reverse;-ms-flex-flow:row wrap-reverse;flex-flow:row wrap-reverse}[flex~='flow:right-nowrap']{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-flow:row-reverse nowrap;-ms-flex-flow:row-reverse nowrap;flex-flow:row-reverse nowrap}[flex~='flow:right-wrap']{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-flow:row-reverse wrap;-ms-flex-flow:row-reverse wrap;flex-flow:row-reverse wrap}[flex~='flow:right-reverse']{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-flow:row-reverse wrap-reverse;-ms-flex-flow:row-reverse wrap-reverse;flex-flow:row-reverse wrap-reverse}[flex~='flow:top-nowrap']{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column nowrap;-ms-flex-flow:column nowrap;flex-flow:column nowrap}[flex~='flow:top-wrap']{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column wrap;-ms-flex-flow:column wrap;flex-flow:column wrap}[flex~='flow:top-reverse']{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column wrap-reverse;-ms-flex-flow:column wrap-reverse;flex-flow:column wrap-reverse}[flex~='flow:bottom-nowrap']{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-flow:column-reverse nowrap;-ms-flex-flow:column-reverse nowrap;flex-flow:column-reverse nowrap}[flex~='flow:bottom-wrap']{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-flow:column-reverse wrap;-ms-flex-flow:column-reverse wrap;flex-flow:column-reverse wrap}[flex~='flow:bottom-reverse']{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-flow:column-reverse wrap-reverse;-ms-flex-flow:column-reverse wrap-reverse;flex-flow:column-reverse wrap-reverse}[flex~='main:left']{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}[flex~='main:right']{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}[flex~='main:between']{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}[flex~='main:around']{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}[flex~='main:center']{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}[flex~='cross:top']{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}[flex~='cross:bottom']{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}[flex~='cross:center']{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}[flex~='cross:baseline']{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}[flex~='cross:stretch']{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}[flex~='main-cross:center']{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}[flex~='content:stretch']{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch}[flex~='content:start']{-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}[flex~='content:end']{-webkit-align-content:flex-end;-ms-flex-line-pack:end;align-content:flex-end}[flex~='content:center']{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center}[flex~='content:between']{-webkit-align-content:between;-ms-flex-line-pack:between;align-content:between}[flex~='content:around']{-webkit-align-content:around;-ms-flex-line-pack:around;align-content:around}[flex~='box:first']>*,[flex~='box:justify']>*,[flex~='box:last']>*,[flex~='box:mean']>*{width:0;height:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}[flex~='box:first']>:first-child,[flex~='box:last']>:last-child{width:auto;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}[flex~='box:justify']>:first-child,[flex~='box:justify']>:last-child{width:auto;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}[flex~='dir:top'][flex~='box:first']>*,[flex~='dir:top'][flex~='box:justify']>*,[flex~='dir:top'][flex~='box:last']>*,[flex~='dir:top'][flex~='box:mean']>*{width:auto;height:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}[flex~='dir:bottom'][flex~='box:first']>*,[flex~='dir:bottom'][flex~='box:justify']>*,[flex~='dir:bottom'][flex~='box:last']>*,[flex~='dir:bottom'][flex~='box:mean']>*{width:auto;height:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}[flex~='dir:top'][flex~='box:first']>:first-child,[flex~='dir:top'][flex~='box:last']>:last-child{height:auto;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}[flex~='dir:top'][flex~='box:justify']>:first-child,[flex~='dir:top'][flex~='box:justify']>:last-child{height:auto;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}[flex~='dir:bottom'][flex~='box:first']>:first-child,[flex~='dir:bottom'][flex~='box:justify']>:first-child [flex~='dir:bottom'][flex~='box:justify']>:last-child,[flex~='dir:bottom'][flex~='box:last']>:last-child{height:auto;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}[flex-box='0']{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}[flex-box='1']{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}[flex-box='2']{-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;-webkit-flex-shrink:2;-ms-flex-negative:2;flex-shrink:2}[flex-box='3']{-webkit-box-flex:3;-webkit-flex-grow:3;-ms-flex-positive:3;flex-grow:3;-webkit-flex-shrink:3;-ms-flex-negative:3;flex-shrink:3}[flex-box='4']{-webkit-box-flex:4;-webkit-flex-grow:4;-ms-flex-positive:4;flex-grow:4;-webkit-flex-shrink:4;-ms-flex-negative:4;flex-shrink:4}[flex-box='5']{-webkit-box-flex:5;-webkit-flex-grow:5;-ms-flex-positive:5;flex-grow:5;-webkit-flex-shrink:5;-ms-flex-negative:5;flex-shrink:5}[flex-box='6']{-webkit-box-flex:6;-webkit-flex-grow:6;-ms-flex-positive:6;flex-grow:6;-webkit-flex-shrink:6;-ms-flex-negative:6;flex-shrink:6}[flex-box='7']{-webkit-box-flex:7;-webkit-flex-grow:7;-ms-flex-positive:7;flex-grow:7;-webkit-flex-shrink:7;-ms-flex-negative:7;flex-shrink:7}[flex-box='8']{-webkit-box-flex:8;-webkit-flex-grow:8;-ms-flex-positive:8;flex-grow:8;-webkit-flex-shrink:8;-ms-flex-negative:8;flex-shrink:8}[flex-box='9']{-webkit-box-flex:9;-webkit-flex-grow:9;-ms-flex-positive:9;flex-grow:9;-webkit-flex-shrink:9;-ms-flex-negative:9;flex-shrink:9}[flex-box='10']{-webkit-box-flex:10;-webkit-flex-grow:10;-ms-flex-positive:10;flex-grow:10;-webkit-flex-shrink:10;-ms-flex-negative:10;flex-shrink:10}