移動端要點

1.完整的meta設置：

width=device-width 約束視口爲出廠視口
initial-scale=1.0 默認視口1.0倍
minimum-scale=1.0 允許最小的視口1.0倍
maximum-scale=1.0 允許最大的視口1.0倍
user-scalable=no 不允許用戶縮放視口
2.百分比佈局：
1).子盒子佔父盒子的百分比，無視父盒子的padding
比如：

<div>
    <p></p>
</div>
div{width:600px;padding-left:100px;}
p{width:50%;}

此時p應該是300px寬度，因爲無視父親的padding。
2). 而padding，都參考父親的width。注意，豎直方向上的padding也是看父親的width，而不是height。
例如：

<div>
    <main></main>
</div>

div{
   width:800px;
   padding-left:400px;
   padding:153px 234px 341px;
}

padding全都是父盒子寬度的百分之多少

p{
   width:50%; //400px
   height:100px;   
   padding-left:10%;  //80px
   paading-right:10%; //80px
   padding-top:10%; //80px
   padding-bottom:10%;  80px
}

3）.margin，一律參考父親width，不參考父親的margin和height。
例如：

<div>
    <main></main>
</div>
div{
    width: 200px;
    height: 600px;
    border: 10% solid #000;
}
p{
    margin: 10%;
}

總結：無論margin、padding、width、height，無論豎直方向還是水平方向，參考的都是父親的width。 4）邊框帶來的麻煩。因爲邊框不能用百分比來寫，所以會帶來麻煩。

→ float: left;width:50%; border:1px solid red;

p就不能浮動成功，因爲總寬度已經是100%多了4個px。此時邊框不能寫成百分比，所以就不好減！

        div{
            width: 80%;
            height: 200px;
            margin: 0 auto;
            background-color: #eee;
        }
        p{
            float: left;
            width: 50%;→ 這裏不能輕鬆減去2px
            height: 200px;
            background: orange;
            border: 1px solid #000;
        }

解決方法：CSS3中增加了calc函數：

        div{
            width: 80%;
            height: 200px;
            margin: 0 auto;
            background-color: #eee;
        }
        p{
            float: left;
            **width: calc(50% - 2px);→ CSS3中增加了calc函數**
            height: 200px;
            background: orange;
            border: 1px solid #000;
        }

5).原來的盒模型都是外擴的有了padding和margin之後，css3新的盒模型，加上box-sizing: border-box;屬性，盒模型就是內減的，這個屬性兼容性很好，兼容到IE8，其他高級瀏覽器都兼容。
6）新的彈性盒屬性display:box;和display:flex;
當div設置了display:box;的時候，子盒子自動就會並排！不要寫浮動，寫了浮動反而出錯。
瀏覽器會自動檢測總份數，每個份數佔多少，你自己佔了幾份。不用需要計算8.3333%、16.666%了。這個屬性能夠顛覆百分比寫法！CSS中從此不出現百分號了。並且這個屬性足夠優秀，margin能夠自動減去，border也能自動減去。
這個屬性還有一個分支display:flex;給父盒子添加的屬性。
可以使用flex-direction來設置方向，值有四個：row、row-reverse、column、column-reverse；
flex-wrap : wrap;來設置自動換行；
設置對齊方式：justify-content:flex:end;justify-content:flex:space-between;，justify-content:flex:space-around;
設置順序：

<div>
    <p>A</p>  → order:5;
    <p>B</p>  → order:1;
    <p>C</p>
    <p>D</p>
    <p>E</p>
    <p>F</p>  → order:2
</div>

flex-grow屬性當空間多餘是否外延：1是 0否（默認）
flex-shrink屬性當空間不足是否縮小：1是（默認） 0否
用flex-basis:25%;屬性表示佔有多少面積，和width一致。
7)固比固：
三個盒子並排撐滿父親，兩頭的盒子固定120px尺寸，中間的盒子撐滿剩餘部分。
方法1：

<div>→ 相對定位，攜帶padding
    <p>A</p> → 絕對定位，top:0;left:0;
    <p>B</p>→ width:100%;
    <p>C</p>→ 絕對定位，top:0;right:0;
</div>

方法2：在display:-webkit-box;

<div>→ display:-webkit-box;
    <p>A</p> → width:120px; 沒有box-flex屬性
    <p>B</p>→  -webkit-box-flex:任意數值。
    <p>C</p>→ width:120px; 沒有box-flex屬性
</div>

8）高度的等比例變化：
a.插入圖片法:
一般來說，需要高度等比例變化的盒子，都是攜帶圖片的，因爲不希望圖片變形，所以盒子要等比例變化。
而img標籤天生具有等比例的性質。盒子約束圖片的寬度，圖片反着影響盒子的高度。
比如現在要製作三個1:1:1的盒子並排，並且他們的寬高比都是1:1，也就是正方形。

<div>→ width:80%; overflow:hidden;
    <p>→ float:left;width:33.33%;
        <img src="images/yangyang.png" alt="">→ width:100%;height:auto;
    </p>
    <p>→ float:left;width:33.33%;
        <img src="images/liyifeng.png" alt="">→ width:100%;height:auto;
    </p>
    <p>→ float:left;width:33.33%;
        <img src="images/xiaoming.png" alt=""> → width:100%;height:auto;
    </p>
</div>

圖片的height會算出小數，但是盒子不會自動撐滿爲小數，此時會有白邊，最簡單的方法就是給img加上一個vertical-align: middle;屬性和overflow:hidden;
b.padding法，將圖片放在padding裏面;

<div>
        <p><img src="images/liyifeng.png" alt=""></p>
        <p><img src="images/liyifeng.png" alt=""></p>
        <p><img src="images/liyifeng.png" alt=""></p>
</div>

豎直方向的padding參考的是父親的width，所以padding的參考和width的參考統一了，所以就能夠製作高度等比例變化的盒子了！
盒子高度設置爲0，width:33.3%;padding-top:33.3%;這兩個參考的都是父盒子的寬度，所以值是一樣的，然後再給子盒子設置width:100%;height:100%;

div{
width: 80%;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
}
div p{
float: left;
width: 33.333%;
padding-top: 33.333%;
height: 0px;
border: 1px solid #000;
box-sizing:border-box;
position: relative;
}
div p img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

c).CSS3中增加了rem單位，是絕對單位，表示html根元素的字號的多少倍。
rem的使用：首先增加根字號

html{
 font-size: 20px;
 }

<script type="text/javascript">
    set();

    window.onresize = set;

function set(){
            //窗口此時的寬度
var windowWidth = document.documentElement.clientWidth;
            //倍數
var rate = windowWidth / 600;
            //設置此時的字號
document.documentElement.style.fontSize = 20 * rate + "px";
}
</script>
<script type="text/javascript">
function setHTMLFontSise(){
var windowWidth = document.documentElement.clientWidth;
//判斷視口寬度是不是已經大於了最大版心
if(windowWidth > 540){
document.documentElement.style.fontSize = "20px";
}else if(windowWidth < 320){
document.documentElement.style.fontSize = 320 / 540 * 20 + "px";

}else{
document.documentElement.style.fontSize =  windowWidth / 540 * 20 + "px";
}

}

window.onresize = setHTMLFontSise;
setHTMLFontSise();
</script>

背景定位、background-size都能夠用rem寫：

.logo{
    border: 1px solid #000;
    width: 5rem;
    height: 4rem;
    background: url(images/icons.png) no-repeat -8rem -3rem;
    background-size: 15rem 10rem;
 }

9)移動端注意事項：
手機中的圖片一般都要縮小2倍~3倍使用，這樣可以充分利用手機的高清屏幕，讓圖片更清晰。
10）文字溢出自動省略號
單行省略號：

div{
            /*溢出加省略號*/
            text-overflow:ellipsis;
            /*設置文本不換行，即使橫向溢出，也不換行*/
            white-space: nowrap;
            /*隱藏*/
            overflow: hidden;
        }

多行省略號，五個屬性缺一不可：

section{
            /*溢出加省略號*/
            text-overflow:ellipsis;
            /*隱藏*/
            overflow: hidden;
            /*必須自己是彈性盒*/
            display: -webkit-box;
            /*設置行數是3行*/
            -webkit-line-clamp: 3;
            /*垂直排列*/
            -webkit-box-orient: vertical;
        }

開發環境、測試環境、生產環境、UAT環境、仿真環境詳解

webpack使用報錯

移動端要點

react中虛擬DOM，diff算法

web worker介紹以及應用場景

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結