12.16~12.23工作日誌_ZenDei技術網路在線

2016.12.16 1.cick事件調用的函數中加入touchmove等事件會發生事件穿透，詳情（http://www.tuicool.com/articles/6NfaUnM）移動設備的click事件有300ms延遲，用於判斷是否雙擊 2.ios設備會有一個預設的css樣式，如input按鈕在 ...

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 1.960gs 中文資料http://blog.chinaunix.net/uid-22414998-id-2878529.html 960css下載http://cdn.bootcss.com/960gs/0/960.css 2.960中<div class="clear"></div> 1️⃣ 清除浮動影響放在浮動元素的下方 2️⃣ 可以用來換行，即使本行內容沒有沾滿所有列 A、margin參數是alpha和omega；     B、padding參數是prefix和suffix；     C、脫離文檔流移動參數是push和pull；     D、clear是塊回車換行。 3.響應式pc端屏幕尺寸及媒體斷點 .http://www.bubuko.com/infodetail-1045273.html 4.bootstrap: <meta http-equiv="X-UA-Compatible" content="IE=edge”>j相容i.e.          <!--[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 protected]</p>
</div>
</div><
/form>

2.知識點：雪碧圖，css命名規範，負margin值 2016.12.22
1.背景圖片定位方法http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 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：從上往下，從右向左
http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/ 英文字元橫向了，解決辦法（IE不支持）：text-orientation:upright 2.border image http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/ http://www.w3cplus.com/content/css3-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（拉伸）圖片平鋪與重覆的區別：平鋪可能會改變了原圖片顯示的大小，重覆不改變圖片顯示的大小
平鋪就是自動調整圖片的比例，以完整的單元鋪滿整個區域（每張圖片都完整顯示，不
會出現半截圖片的情況）重覆：最後一次重覆放不下的時候，超出容器寬度的部分不顯示