12.16~12.23工作日志

 

2016.12.16
1.cick事件调用的函数中加入touchmove等事件会发生事件穿透，详情（http://www.tuicool.com/articles/6NfaUnM）
  移动设备的click事件有300ms延迟，用于判断是否双击
 
2.ios设备会有一个默认的css样式，如input按钮在电脑上默认为方形，而在iPhone上默认为圆形，清除ipone默认样式方法：
Input{-webkit-appearance:none;}
 
3.border-radius:0;按钮为直角    border-radius:15px;圆角
 
4.input text标签在chorm中点击时，会出现黄色边框，消除办法：
   input:focus {
    outline: none;
   }
   input text标签在手机上中点击时，会出现灰色背景，消除办法：
   html中加入：
   <meta name="msapplication-tap-highlight" content="no">
   
5.vw、vh是相对于屏幕尺寸的百分比，不是相对于父元素。
 
2016.12.19
1.微信浏览器下拉回弹解决办法：
document.querySelector('body').addEventListener('touchstart',function (ev) {
        event.preventDefault();
    })
 
2.当div没有内容的时候，边框为四个同顶点的三角形构成的一个正方形
 
 
3.手机1px问题：参考：http://www.jianshu.com/p/7e63f5a32636  
   已使用伪类解决：
CSS代码：
.hairlines1,
.hairlines2 {
    position: relative;
    border: none;
}
 
.hairlines1:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #ececec;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: left top;
}
.hairlines2:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #ececec;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    transform: scale(1/3);
    transform-origin: left top;
}
JS代码：
if(3>window.devicePixelRatio && devicePixelRatio >= 2){
    document.getElementById("wrap").className = 'hairlines1';
}
if(window.devicePixelRatio && devicePixelRatio >= 3){
    document.getElementById("wrap").className = 'hairlines2';
}


2016.12.20
 
2.960中<div ></div>
 1️⃣ 清除浮动影响放在浮动元素的下方
 2️⃣ 可以用来换行，即使本行内容没有沾满所有列
    A、margin参数是alpha和omega；
    B、padding参数是prefix和suffix；
    C、脱离文档流移动参数是push和pull；
    D、clear是块回车换行。
 
3.响应式pc端屏幕尺寸及媒体断点
 
4.bootstrap:
   <meta http-equiv="X-UA-Compatible" content="IE=edge”>j兼容i.e.
   <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要.   用可以移除 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]—>
 
5.bootstrap表单实现步骤：
垂直表单：
 
  • 1️⃣向父 <form> 元素添加 role="form"。
  • 2️⃣把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
  • 3️⃣向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
  • <form role="form”>
  • <div class="form-group”>
  • <label for="name">名称</label>
  • <input type="text"class="form-control"id="name"placeholder="请输入名称”>
  • </div></form>
内联表单：(所有元素是内联的，向左对齐的，标签是并排的)
向 <form> 标签添加 class .form-inline。
<form class="form-inline” role="form”>
注意：
  • 默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，需要在表单控件上设置一个宽度。
  • 使用 class .sr-only，可以隐藏内联表单的标签。
水平表单：
 
  • 1️⃣向父 <form> 元素添加 class .form-horizontal。
  • 2️⃣把标签和控件放在一个带有 class .form-group 的 <div> 中。
  • 3️⃣向标签添加 class .control-label。
  • <form class="form-horizontal"role="form">
 
2016.12.21
1.bootstrap:

复选框（Checkbox）和单选框（Radio）

在label中加入checkbox-inline 或 .radio-inline class 内联选择框
<div class="checkbox”>
<label><inputtype="checkbox"value="">选项 1</label>
</div>
<div class="checkbox”>
<label><inputtype="checkbox"value="">选项 2</label>
</div>
<div class="radio”>
<label><input type="radio"name=“optionsRadios" id="optionsRadios1"value="option1"checked>选项 1</label>
</div>
<div class="radio”>
<label><input type="radio"name="optionsRadios"id="optionsRadios2"value="option2">选项 2 - 选择它将会取消选择选项 1</label>
</div>

选择框（Select）

 
  • 使用 multiple="multiple" 允许用户选择多个选项。<select multiple class="form-control">
  • <form role="form”>
  • <divclass="form-group”>
  • <label for="name">选择列表</label>
  • <selectclass="form-control”>
  • <option>1</option>
  • <option>2</option>
  • <option>3</option>
  • <option>4</option>
  • <option>5</option>
  • </select>
  • </form>
  • 静态控件
在一个水平表单内的表单标签后放置纯文本时，在 <p> 上使用 class .form-control-static.
  • <form class="form-horizontal"role="form”>
  • <div class="form-group”>
  • <label class="col-sm-2 control-label">Email</label>
  • <div class="col-sm-10”>
  • <p class="form-control-static">email@example.com</p>
  • </div>
  • </div><
  • /form>
 
2.知识点：雪碧图，css命名规范，负margin值
 
2016.12.22
 
2.一张图片和一段文字在同一行如何垂直居中？
1️⃣实验后得：
   文字竖直平均分为三分，下三分之一处为基线，当行内元素的文字与图片共处一行时，文字的基线与图片底部是对齐的；
 
3.间距是段落之间的距离，行距是段落中每一行之间的距离
  设置p元素margin、padding值为0即可消除p标签自带的段落上下间距；
 
4.行内元素和其他元素在同一行，如span，不可以设置margin-top和margin-bottom，只能设
   置left和right
   Padding-left和padding-ringt可以设置并且可以显示效果，但是对其他元素并无影响，不能
   够用来控制元素上下间的距离。
 
5.关于flexbox；
 
6.<hr/>水平线颜色设置：
1️⃣<hr color=“red" />有效
 
2️⃣hr{
Color:red;//无效，color定义的是内容的颜色
}
 
3️⃣hr{
Color:red;//无效，color定义的是内容的颜色，ie有效
}
 
4️⃣hr{
background-color：red；//chrom无效
}
 
5️⃣hr{
    border:1px solid #d7d9d9;//chrom有效
}
 
2016.12.23
1.文字纵向从右向左显示
   writing-mode:tb-rl
参数：
    1、lr-tb：从左向右，从上往下
    2、tb-rl：从上往下，从右向左
英文字符横向了，解决办法（IE不支持）：text-orientation:upright  
 
2.border image
 
3.问题：
      包裹层宽度100%，内含四个25%宽度子div，子div均设置display；inline-  block
   第四个div溢出到下一行，margin：0、padding：0无法消除
   原因：
      内联元素会把标签之间的空格当做一个元素显示出来占用一定的宽度
   解决办法：
     1.不使用inline-block，使用float left
     2.子div标签不换行，前一个闭合标签和后一个开始标签紧密写，不留空格
     3.使用负margin值；
                     
4.round（平铺），repeat（重复），stretch（拉伸）
   图片平铺与重复的区别：
   平铺可能会改变了原图片显示的大小，重复不改变图片显示的大小
 
   平铺就是自动调整图片的比例，以完整的单元铺满整个区域（每张图片都完整显示，不       
   会出现半截图片的情况）
   重复：最后一次重复放不下的时候，超出容器宽度的部分不显示