Chinaunix首页 | 论坛 | 博客
  • 博客访问: 569141
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: Html/Css

2019-02-14 13:56:41


点击(此处)折叠或打开

  1. /**Flex伸缩盒模型兼容性写法库***/
  2. /***FLex:
  3.  *     flex-wrap:nowrap(默认)不换行|| wrap换行第一行在上方||wrap-reverse换行,第一行在下方
  4.  *     flex-flow:flex-direction 和flex-wrap 简写形式 默认值为:row nowrap (横向 不换行)
  5.  *     对齐方式(主轴水平)
  6.  * justify-content:flex-start(默认)左对齐
  7.  *                     flex-end右对齐
  8.  *                     center 居中
  9.  *                     space-between 两端对齐项目之间的间隔都相等
  10.  *                     space-around 每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍
  11.  * 一根轴线的对齐方式(侧轴垂直)
  12.  * align-item:flex-start 上对齐
  13.  *              flex-end 下对齐
  14.  *              center 中间对齐
  15.  * baseline 第一行文字的基线对齐
  16.  *              strecth(默认值)如果项目未设置高度或设置auto,将占满整个容器的高度
  17.  * 多根轴线的对齐方式:
  18.  * align-content:flex-start 上对齐
  19.  *                  flex-end 下对齐
  20.  *                 center 中间对齐
  21.  *                 space-between:两端对齐
  22.  *                 space-around轴线两侧间隔相等
  23.  *                 stretch(默认)轴线占满这个交叉轴
  24.  *
  25.  * 项目属性:
  26.  * order排列的顺序
  27.  * flex-grow项目的放大比例
  28.  * flex-shrink项目的缩放比例
  29.  * flex-basis分配多余空间之前,项目占据主轴空间 默认值为auto
  30.  * align-self:允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父级的align-items属性
  31.  *
  32.  * order:属相定义了项目的排列顺序。数值越小,排列越来靠前,默认为0
  33.  * flex-grow属性定义项目的放大比例,默认为0,如果没有存在剩余空间,也不会放大
  34.  * flex-shrink属性定义了项目的虽小比例,默认为1,如果空间不足该项目该缩小
  35.  *
  36.  * ***/
  37. .Flex{
  38.     display: -webkit-box; /**ios6 safari***/
  39.     display: -moz-box;        /**FF19***/
  40.     display: -ms-flexbox; /***IE10**/
  41.     display:-webkit-flex; /***chrome**/
  42.     display: flex; /**Opera FF 20+***/
  43. }
  44. /**伸缩流方向*/
  45. .flex-direction_column{
  46.     -webkit-box-orient: vertical;
  47.     -ms-flex-direction: column;
  48.     -webkit-flex-direction: column;
  49.     flex-direction: column;
  50. }
  51. /*主轴对齐*/
  52. .justify-content_flex-center{
  53.     -webkit-box-pack: center;
  54.     -ms-flex-pack: center;
  55.     -webkit-justify-content: center;
  56.     justify-content: center;
  57. }
  58. .justify-content_flex-end{
  59.     -webkit-box-pack: end;
  60.     -ms-flex-pack: end;
  61.     -webkit-justify-content: flex-end;
  62.     justify-content: flex-end;
  63. }
  64. .justify-content_flex-justify{
  65.     -webkit-box-pack: justify;
  66.     -ms-flex-pack: justify;
  67.     -webkit-justify-content: space-between;
  68.     justify-content: space-between;
  69. }
  70. /*侧轴对齐*/
  71. .align-items_flex-start{
  72.     -webkit-box-align: start;
  73.     -ms-flex-align: start;
  74.     -webkit-align-items: flex-start;
  75.     align-items: flex-start;
  76. }
  77. .align-items_flex-end{
  78.     -webkit-box-align: end;
  79.     -ms-flex-align: end;
  80.     -webkit-align-items: flex-end;
  81.     align-items: flex-end;
  82. }
  83. .align-items_center{
  84.     -webkit-box-align: center;
  85.     -ms-flex-align: center;
  86.     -webkit-align-items: center;
  87.     align-items: center;
  88. }
  89. .align-items_baseline{
  90.     -webkit-box-align: baseline;
  91.     -ms-flex-align: baseline;
  92.     -webkit-align-items: baseline;
  93.     align-items: baseline;
  94. }
  95. /*伸缩性*/
  96. .flex_auto{
  97.     -webkit-box-flex: 1;
  98.     -ms-flex: auto;
  99.     -webkit-flex: auto;
  100.     flex: auto;
  101. }
  102. .flex_1{
  103.     width: 0;
  104.     -webkit-box-flex: 1;
  105.     -ms-flex: 1;
  106.     -webkit-flex: 1;
  107.     flex: 1;
  108. }
  109. /*显示顺序*/
  110. .order_2{
  111.     -webkit-box-ordinal-group: 2;
  112.     -ms-flex-order: 2;
  113.     -webkit-order: 2;
  114.     order: 2;
  115. }
  116. .order_3{
  117.     -webkit-box-ordinal-group: 3;
  118.     -ms-flex-order: 3;
  119.     -webkit-order: 3;
  120.     order: 3;
  121. }
  122. /****placeholder****/
  123. input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  124.     color: #fff;
  125.     opacity:1;
  126. }

  127. input::-moz-placeholder { /* Mozilla Firefox 19+ */
  128.     color: #fff;
  129.     opacity:1;
  130. }

  131. input:-ms-input-placeholder{
  132.     color: #fff;
  133.     opacity:1;
  134. }

  135. input::-webkit-input-placeholder{
  136.     color: #fff;
  137.     opacity:1;
  138. }
  139. /*去掉移动端点击高亮样式*/
  140. -webkit-tap-highlight-color: transparent;
  141. /* 匹配手机号的正则表达式
  142.  * 匹配手机号码的正则表达式:/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/
  143.  * */
  144. /***********媒体查询**************/
  145. /*@media only screen and (min-width: 370px) and (max-width: 450px) {}
  146. @media only screen and (min-width: 450px) and (max-width: 650px) {}
  147. @media only screen and (min-width: 650px) and (max-width: 850px) {}
  148. @media only screen and (min-width: 580px) and (max-width: 1000px) {}*/
  149. /******只能输入数字onkeyup="value=value.replace(/[^\d]/g,'')"********/
  150. /*********移动端input maxlength 失效 解决办法:oninput="if(value.length>11)value=value.slice(0,11)"*************/
  151. /*******判断吧移动端,还是pc端*
  152.  *
  153.  *
  154.  *     Navigator userAgent属性
  155.  * 定义用法:
  156.  * userAgent属性是一个只读的字符串,生命了浏览器用于HTTP请求的用户代理头的值
  157.  * navigator.userAgent
  158.  * document.write("用户代理"+ navigator.userAgent);
  159.  *
  160.  *
  161.  *
  162.  *
  163.  * <script type="text/javascript">
  164.     if(navigator.appName == 'Microsoft Internet Explorer'){
  165.         if(navigator.userAgent.indexOf("MSIE 5.0")>0 || navigator.userAgent.indexOf("MSIE 6.0")>0 || navigator.userAgent.indexOf("MSIE 7.0")>0) {
  166.             alert('您使用的 IE 浏览器版本过低, 推荐使用 Chrome 浏览器或 IE8 及以上版本浏览器.');
  167.         }
  168.     }
  169.     window.sysinfo = {
  170.                                         'isfounder': 0,
  171.         'family': 'x',
  172.         'siteroot': 'https://www.hoso9.com/',
  173.         'siteurl': 'https://www.hoso9.com/web/index.php?c=user&a=login',
  174.         'attachurl': 'https://www.hoso9.com/attachment/',
  175.         'attachurl_local': 'https://www.hoso9.com/attachment/',
  176.         'attachurl_remote': '',
  177.         'module' : {'url' : '', 'name' : ''},
  178.         'cookie' : {'pre': '6388_'},
  179.         'account' : null,
  180.         'server' : {'php' : '5.6.27'},
  181.     };
  182.     </script>
  183.  *
  184.  * *******/

阅读(887) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册