移动端css总结

移动端css总结（一）

CreateTime:2016-11-18

一.css选择器

　　1.优先级：!important > 行内样式 > id选择器 > 类选择器 > tag选择器（同种类选择器后定义的样式的优先级高于先定义的样式的优先级）。

　　2.权重：

　　　　行内样式：1000 id选择器：100 类选择器、伪类选择器、属性选择器：10 元素选择器，伪元素选择器：1

　　　　通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。

　　　　body #content div[id="main-content"] h2 选择器权重：100+10+3*1=113

　　　　相关链接：http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php

二.css哪些属性是可以继承的，哪些是不可继承的？

　　1.可继承的属性：（备注：字体属性一般可继承）

　　　　所有元素可继承：visibility、cursor

　　　　内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-　style、

　　　　　　　　　　　　font-variant、font-weight、text- decoration、text-transform、direction

　　　　块级元素可继承：text-indent、text-align

　　　　列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

　　2.不可继承的属性：width、min-width、max-width、height、min-height、maxheight、margin、padding、border、display、float、position、top、　　　right、bottom、left、overflow、z-index、vertical-align、background、clear(备注：布局用的属性一般不可继承)

三. meta基础知识点：
　　1.页面窗口自动调整到设备宽度，并禁止用户及缩放页面:
　　　<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
　　　属性基本含义：
　　　　content="width=device-width：控制 viewport 的大小,device-width 为设备的宽度
　　　　initial-scale - 初始的缩放比例

　　　　minimum-scale - 允许用户缩放到的最小比例
　　　　maximum-scale - 允许用户缩放到的最大比例
　　　　user-scalable - 用户是否可以手动缩放
　　2.忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" />
　　3. 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" />
　　4. 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" />

　　5. 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

因此页面上通用的模板如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <title>标题</title>
        <link rel="shortcut icon" href="/favicon.ico">
    </head>
    <body>
        这里开始内容
    </body>
</html>

四. 在android或者IOS下拨打电话代码如下：<a href="tel:15602512356">打电话给:15602512356</a>

　　发短信(winphone系统无效)<a href="sms:10010">发短信给: 10010</a>

五. webkit表单输入框placeholder的颜色值改变：
　　1.如果想要默认的颜色显示红色，代码如下：input::-webkit-input-placeholder{color:red;}
　　2.如果想要用户点击变为蓝色，代码如下：input:focus::-webkit-input-placeholder{color:blue;}

六. 移动端IOS手机下清除表单元素默认样式，代码如下: input,textarea,select {-webkit-appearance: none;}

七. 在IOS中禁止长按链接与图片弹出菜单a, img {-webkit-touch-callout: none;}

八. box-sizing的理解及使用:
　　该属性是解决盒模型在不同的浏览器中表现不一致的问题。它有三个属性值分别是：

　　1. content-box: 默认值(标准盒模型); width和height只包括内容的宽和高，不包括边框，内边距;比如如下div元素：<div class="box">box</div>,css如下：

.box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:content-box;}

　　那么在浏览器下渲染的实际宽度和高度分别是：222px,222px; 因为在标准的盒模型下，在浏览器中渲染的实际宽度和高度包括

　　2. border-box: width与height是包括内边距和边框的，不包括外边距，这是IE的怪异模式使用的盒模型，比如还是上面的代码：<div class="box">box</div>

　　　 css代码如下：

.box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:border-box;}

　　　那么此时浏览器渲染的width会是178px，height也是178px; 因为此时定义的width和height会包含padding和border在内;

　　　备注：使用这个属性对于在使用百分比的情况下布局页面非常有用，比如有两列布局宽度都是50%;但是呢还有padding和border，那么这个时候如果我们不使用该属性的话　　　(当然我们也可以使用calc方法来计算); 那么总宽度会大于页面中的100%;因此这时候可以使用这个属性来使页面达到100%的布局.

九. 理解display:box的布局: display: box; box-flex 是css3新添加的盒子模型属性，它可以为我们解决按比列划分，水平均分，及垂直等高等。
　　1. 按比例划分：
　　目前box-flex 属性还没有得到firefox, Opera, chrome浏览器的完全支持，但我们可以使用它们的私有属性firefox(-moz-)，opera(-o-)，chrome/safari（-webkit-）;

　　box-flex属性主要让子容器针对父容器的宽度按一定的规则进行划分。代码如下：
　　

<div class="test">
      <p id="p1">Hello</p>
      <p id="p2">W3School</p>
</div>
<style>
   .test{
      display:-moz-box;
      display:-webkit-box;
      display:box;
      width:300px;
   }
   #p1{
      -moz-box-flex:1.0;
      -webkit-box-flex:1.0;
      box-flex:1;
      border:1px solid red;
   }
   #p2{
      -moz-box-flex:2.0;
      -webkit-box-flex:2.0;
      box-flex:2;
      border:1px solid blue;
   }
</style>

　　备注：
　　1. 必须给父容器定义 display: box, 其子元素才可以进行划分。如上给id为p1设置box-flex设置为1，给id为p2设置box-flex为2，说明分别给其设置1等分和2等分，也就是　　说给id为p1元素设置宽度为 300 * 1/3 = 100px; 给id为p2元素设置宽度为 300 * 2/3 = 200px;
　　2. 如果进行父容器划分的同时，他的子元素有的设置了宽度，有的要进行划分的话，那么划分的宽度 = 父容器的宽度 – 已经设置的宽度。再进行对应的划分。
十. box具体的属性如下：box-orient | box-direction | box-align | box-pack | box-lines
　　1. box-orient: 用来确定父容器里的子容器的排列方式，是水平还是垂直，可选属性如下所示：horizontal | vertical | inline-axis | block-axis | inherit
　　horizontal | inline-axis: 给box设置 horizontal 或 inline-axis 属性效果表现一致。都可以将子元素进行水平排列.

　　如下html代码：
　　

   <div class="test">
       <p id="p1">Hello</p>
       <p id="p2">W3School</p>
   </div>
   css代码如下：
   <style>
       .test{
          display:-moz-box;
          display:-webkit-box;
          display:box;
          width:300px;
          height:200px;
          -moz-box-orient:horizontal;
          -webkit-box-orient:horizontal;
          box-orient:horizontal;
       }
       #p1{
          -moz-box-flex:1.0;
          -webkit-box-flex:1.0;
          box-flex:1;
          border:1px solid red;
       }
       #p2{
          -moz-box-flex:2.0;
          -webkit-box-flex:2.0;
          box-flex:2;
          border:1px solid blue;
       }
    </style>

　　2. vertical 可以让子元素进行垂直排列，css代码如下：

<style>
   *{margin:0;padding:0;}
   .test{
      display:-moz-box;
      display:-webkit-box;
      display:box;
      width:300px;
      height:200px;
      -moz-box-orient:vertical;
      -webkit-box-orient:vertical;
      box-orient:vertical;
   }
   #p1{
      -moz-box-flex:1.0;
      -webkit-box-flex:1.0;
      box-flex:1;
      border:1px solid red;
   }
   #p2{
      -moz-box-flex:2.0;
      -webkit-box-flex:2.0;
      box-flex:2;
      border:1px solid blue;
   }
</style>