css常見開發(bug)

2021-10-08 03:25:28 字數 1890 閱讀 8466

清除浮動的方式

1.

:常見的值有 left 、right、both

2.

clear 屬性有 left、right 和 all 三個屬性值可選

3.給父元素設定 overflow: hidden; zoom: 1; /* 相容 ie6、ie7*/在平常的css編寫過程中,zoom:1能夠比較神奇地解決ie下比較奇葩的bug。

父元素:

:after

calc的相容性寫法

width:

-moz-

calc

(100%/

6); width:

-webkit-

calc

(100%/

6); width:

calc

(100%/

6);

水平垂直居中:

#parent

#son

處理移動端自適應布局的方法- calc()與vw:

如何讓頁面所有元素都能做到自適應,這是目前需要解決的問題。這時候,c3中的乙個新的長度單位——vw。這個單位的說明是:相對於視口的寬度。視口被均分為100單位的vw,也就是說在375寬度的螢幕中,1vw等於3.75px,320的螢幕中,1vw等於3.2px。這樣的話對於不同尺寸的螢幕有了乙個統一的單位來進行衡量,這時我們再結合rem,即對html設定字型大小font-size:calc(100vw/18.75)——這是以iphone6的尺寸為設計圖時做的計算,此時在iphone6尺寸的頁面中1rem為20px;通過對設計圖的還原,此時頁面元素的大小已經可以等比例適應任意寬度的終端了。

flex的相容寫法:

display:

-webkit-box;

/* 老語法 ios 6-, safari 3.1-6 */

display:

-moz-box;

/* 老語法 firefox 19- (buggy but mostly works) */

display:

-ms-flexbox;

/* 過渡語法 ie 10 */

display:

-webkit-flex;

/* 新語法 chrome */

display: flex;

/* 新語法, spec - opera 12.1, firefox 20+ */

的寬高比例和在頁面上的寬高比例為(假如尺寸 230*340):

230/340=vw/vh

所以如果設定寬30%則高為:vh=(340×30÷230)%

如果要求第二張寬和第一張一樣,高是第一張一半則第二張高為:vh=(340×30÷230÷2)%

這樣可以保證自由縮放,比例不變(不變形)

less使用calc的注意事項:

正常不能編譯 -》 需要:calc(~"100vh - 50px")

省略號,以及第幾行出現省略號:

display:

-webkit-box;

overflow:hidden;

-webkit-box-orient:vertical;

-webkit-line-clamp:

2;

button有預設樣式,開發過程中不清除可能會有其他樣式問題影響(記得開發中關注button)

css常見bug修復

雙外邊距 此bug出現在ie6和更低版本中,當乙個元素浮動時會出現雙倍的外邊距,加上display inline,可修復。3畫素文字移動 當文字與浮動元素相鄰時,此時需要給文字容器乙個高度。height 1 ie6重複字元 主要出現在html文件中浮動元素間有過多注釋,刪除注釋即可 浮動清理是使用o...

iOS 開發中常見的BUG

1.null urgent all bitcode will be dropped because x was built without bitcode.you must rebuild it with bitcode enabled xcode setting enable bitcode ob...

iOS開發常見警報Warning和Bug修復

解決方法 在podfile檔案中 增加一句inhibit all warnings 解決方法 project targets build setting library search paths,刪除對應路徑 解決方法 project targets build setting framework ...