網站圖標
favicon.Ico轉換: www.bitbug.net
markdown在線編輯網站
響應式布局meta標簽
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1"">
IE兼容設置
IE 8中間要有空格
<!–[if lte IE 8]>
<p class=”browserupgrade”>到<a href=”http://[browsehappy.com](http://browsehappy.com/)“>
這里</a>體驗</p>
<![endif]–>
單位
- px 精確單位
- em 相對的長度單位
參照物為父元素的font-size,具有繼承特點.當沒有設置font-size時,瀏覽器會有一個默認的em設置:1em=16px.缺點容易混亂. - rem
rem的相對參照物為根元素html,相對于參照固定不變,比較好計算
當沒有設置font-size時,瀏覽器會有一個默認的rem設置:1rem=16px,這點是與em是一致的.
補充一個很重要的問題就是rem在chrome瀏覽器有個bug也就是它中文最小大小是12px.因此,當你設置font-size:62.5%時,你的字體是可以可以按照你設置的百分比計算,但是你的寬高等等都會按照12px去計算,所以你所寫的樣式都會1.2倍.因此,要想解決這個問題,要將html中的font-size:20px.此時1rem=20px,再根據比例進行設置即可.*
http://caniuse.com查找rem兼容
display和visibility的區別
display:none會擠占空間,visibility:hidden則不會
清除浮動的幾種方法
方法一
在容器底部加入一個div空標簽
<div style=”clear:both”></div>
違背了語義化的標準
方法二
給浮動元素的容器增加overflow:auto或hidden.
方法三
讓浮動元素的容器也浮動,影響頁面布局
方法四 best
.clearfix:before,
.clearfix:after{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
關于BFC
塊級格式化上下文
只要觸發BFC,就可以清除浮動.
:before的意義在于去除margin的疊加問題.
:after中table創建了匿名表格單元,觸發BFC,可以實現清除浮動.
設置邊框線技巧
header .top ul li + li{
border-left:1px solid #999;
margin-left:-3px; //不包含第一個li了
}
inline-block中元素的縫隙問題
方法一:刪除空白符,但是不雅觀
方法二:ul font-size設置為0,有很多副作用
方法三:li 不閉合
方法四:li設置負邊距
背景透明,內容不透明
background-color:rgba(255,255,255,0.9)
calc計算屬性
width:calc(33.3333333333333% – 3rem);
不增加外面高度
box-sizing:border-boxpadding將不會計算在高度內
文字省略號顯示
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
濾鏡
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
添加前綴:http://autoprefixer.github.io
媒體查詢
@media only screen and (max-width: 800px) {
header .top{
background-color: green;
}
}
@media only screen and (min-width: 481px) and (max-width: 800px){
header .top ul li a{
color: red;
}
}
@media only screen and (max-width: 480px) {
header .top ul li a{
color: blue;
}
}
媒體查詢單位的坑
因為@media級別非常高,并不是html的子元素
它所相對的并不是html中font-size的設置,而是瀏覽器默認的設置
rem在瀏覽器有兼容性問題,因此,即選用em.進行設置
@media only screen and (max-width: 50em) {
header .top{
background-color: green;
}
}
@media only screen and (min-width: 30.0625px) and (max-width: 50em){
header .top ul li a{
color: red;
}
}
@media only screen and (max-width: 30em) {
header .top ul li a{
color: blue;
}
}
http-server
npm install http-server -g
IE兼容html5
https://github.com/aFarkas/html5shiv
IE兼容媒體查詢
https://github.com/scottjehl/Respond
主動兼容測試
同步測試服務器
npm install browser-sync -g
browser-sync start --server "src" --files "src"
