知識點一：
::selection{
background-color:#b3d4fc;
text-shadow:none
}主要設置文字被選中時的樣式；
html{
font-size:62.5%; /*====設置字體為10px===*/
color:#222; /*===瀏覽器不設置成純黑色，保護視力，這是種深灰色接近黑色===*/
}知識點二：
清除浮動的方式：最常用的有：
在父元素設置：:/auto;都可以
或者在父元素設置如下：
/*======加上before可以防止瀏覽器頂部的空白崩潰（就是上一個div的margin-bottom和下邊的margin-top會發生疊加），
.clearfix:before,
.clearfix:after{
content:" ";
display:table;
}
.clearfix:after{
clear:both;
}學術有個名詞BFC:
BFC全稱”Block ”, 中文為“塊級格式化上下文”。什么時候會觸發BFC呢？常見的如下：
float的值不為none。
的值為auto,或。
的值為table-cell, table-, -block中的任何一個。
的值不為和。
觸發了BFC就能防止塌陷！
知識點三：
解決li元素做導航是，使用-block會產生縫隙解決方案：
1.父元素設置font-size:0;
2.把li標簽之間的空格去掉或者直接不寫結束標簽
3.外邊距設置成負數：比如-left=-3px
給圖標加一個灰色濾鏡方法：
:(100%) 也要加上瀏覽器前綴
css3中的計算屬性calc：
width:calc(33.333333%-3rem);
//****選擇的是除了第一個后邊的元素,主要用在導航時的左邊框設置較方便
head.top ul li+li{} 文字不換行并且省略號截斷的寫法：
a:{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}在元素前邊加偽類。給偽類內容加空格的方法
.notice a:first-child:before{
content:'最新公告： \00a0\00a0';
color:#aaa;
}知識點四：
媒體查詢：媒體查詢的級別很高，他不是html的子元素
@media only screen and(max-width:800px){
/*****這里是八百像素以下的應用此css,當用rem和em時是以16px為標準的，所以一般用em即可，因為他級別高，不會匹配父元素的字體大小。}
@media only screen and(min-width:481px)and(max-width:800px){
/*****這里是481px-800px的應用此css}
@media only screen and(max-width:480px){
/*****這里是低于480px的時候應用此css}響應式圖片布局
包括圖片的排版和布局，根據不同設備的大小加載不同的圖片
1.通過js和服務端寫入：通過判斷$().width()的大小，改變圖片的attr
2.通過img的屬性
例子：
480是480px,
w是寬度，如果已經加載了1600.png的，再變小就不會變化了
如果圖片是滿屏的這樣直接設置即可，如果圖片的盒子只有屏幕的一半，則必須引入sizes屬性
sizes="100vw"
vw是 width 視口寬度 vh是 視口寬度
100是指100%即按視口的百分之百視口寬度去選擇圖片
sizes="(min-width:800px) calc(100rw - 30em),100vw"
這句的意思是大于800px時候按照前邊的規定來css響應式布局媒體查詢，小于時按百分之百
3.標簽
自己控制圖片選擇權
標簽的瀏覽器支持程度不是很好，應該說是特別不好，比如ie就全不支持，這個時候引入引入這個庫，就可以完美的解決不兼容問題，type屬性，可以是webp svg jpg 等
草料二維碼，可以生成網址二維碼，可供手機查看，對于手機開發時，及其方便
首先查看本機IP ，通過
192.168.1.2:8080/#/.......
然后復制鏈接，進去草料二維碼網站css響應式布局媒體查詢，手機端即可查看！網址為cli.im/