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