1. 程式人生 > >web前端開發中常遇到的問題

web前端開發中常遇到的問題

1、css問題

(1)margin-top和margin-bottom不能正常顯示:
父盒子中的子盒子使用margin-top不管用,需要在子盒子上加
{height:0;overflow:hidden}
(2)父盒子沒有設定高度,子盒子都都設定了浮動,此時需要清除浮動
方法一:再加一
個子元素,其css設定clear:left|right|both;
方法二:給父元素設定:
.clearfix::after{
content:”,
height:0;
line-height:0;
clear:both;
display:block;
visibility:hidden;
}
.clearfix{zoom:1;}
(3)幾個隱藏的佔位問題
overflow:hidden;元素隱藏,超出部分佔i原來位置;
display:none;元素隱藏,元素佔原來位置;
visibility:hidden;元素隱藏,但是佔用原來位置;
visibility:visible;
(4)opacity設定半透明效果
opacity:0.5;
filter:alpha(opacity=50);//相容IE
(5)類名定義問題:
類名不能以數字開頭或者以純數字開頭定義類名;
類名不推薦(不允許)使用漢字定義類名;
不能以特殊符號或者以特殊符號開頭定義類名(_除外);
不要使用標籤名定義類名
(6)設定font-family:”“;要用”“括起來。可以一次設定多個字型,字型與字型之間使用逗號隔開。
防止某些瀏覽器不識別某些字型,會按設定的字型順序查詢,找到能顯示的字型。
(7)font屬性連寫中,必須有font-size和font-family
(8)vertical-align:baseline/top/middle/bottom;
只適用於圖片和表格
(9)只有定位的元素才能設定z-index值
……還有很多,暫時想不起來了。

2、html問題

(1)標籤巢狀的順序要正確,典型錯誤:a中不能巢狀p
(2)設定超連結:
href:用於指定連線目標的url地址;
target:_self和_blank(新視窗中開啟)
設定整個頁面中超連結的開啟方式
(3)ul標籤type值:disc(黑點),square(方黑點),circle(空心圓)
(4)ol標籤的type屬性,type=a,編號使用英文字母;type=1,使用數字編碼;type=I,使用阿拉伯數字編碼
(5)如果a標籤不閉合,會多出很多a標籤

3、DOM

(1)node.style.cssText=’width:200px;…’會覆蓋掉之前設定的屬性相同的樣式。