成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

每日兩道前端面試題20190331

xcold / 1923人閱讀

摘要：如何利用和正負相消實現(xiàn)多列等高目前我用過最好的就是這個方法了，瀏覽器兼容性最好最簡便。

CSS如何利用padding和margin正負相消實現(xiàn)多列等高？

目前我用過最好的就是這個方法了，瀏覽器兼容性最好最簡便。
首先把列的padding-bottom設為一個足夠大的值，再把列的margin-bottom設一個與前面的padding-bottom的正值相抵消的負值，父容器設置超出隱藏，這樣子父容器的高度就還是它里面的列沒有設定padding-bottom時的高度，當它里面的任一列高度增加了，則父容器的高度就會被撐到它里面最高那列的高度，其他比這列矮的列則會用它們的padding-bottom來補償這一部分的高度差，因為背景是可以用padding占用空間里的，而且邊框是會跟隨padding變化的。

沒有正負相消時，出來的樣式是這樣的：



    

        
我是left

        
我是right
        

        

        現(xiàn)在我的高度比left高，所以出現(xiàn)了脫節(jié)現(xiàn)象

效果如下：

若使用等高布局：



    

        
我是left

        
我是right
        

        

        現(xiàn)在我的高度比left高，所以出現(xiàn)了脫節(jié)現(xiàn)象

使用了等高布局，效果如下：

經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？

1.png24的圖片在IE6上會出現(xiàn)背景
解決方案是做成png8.

2.瀏覽器默認的margin和padding不同
解決方案：加一個全局的*{margin:0;padding:0;}來統(tǒng)一.

3.IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在IE6設置下的margin會比較大
例如：以下代碼在IE6就會在產(chǎn)生雙倍距離

#box{
    float:left;
    width:10px;
    margin:0 0 0 10px;
}

這種情況下在IE中會產(chǎn)生雙倍的距離，解決方案是在有float的標簽中樣式控制加入_display:inline,將其轉(zhuǎn)換為行內(nèi)屬性（_這個符號只有在IE6下會識別）
其他的識別規(guī)則：

.bb{
    background-color:red;
    background-color:#00deff9;/*IE6、7、8識別*/
    +background-color:#a200ff;/*IE6、7識別*/
      _background-color:#1e0bd1;/*IE6識別*/
}

4.IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性
在firefox中只可以使用getAttribute()來獲得自定義屬性
所以獲得自定義屬性一律使用getAttribute().

5.IE下，event會有x,y屬性，但是沒有pageX和pageY屬性，對于firebox有pageX和pageY熟悉，但是沒有x,y屬性

6.chrome中文界面下默認會將小于12px的文本強制按照12px顯示
解決方案：css屬性中-webkit-text-size-adjust:none;解決.

7.超鏈接訪問后hover樣式不出現(xiàn)
解決方案：被點擊訪問過的超鏈接樣式不再具有hover和active，這時候要注意CSS順序即可解決：
L-V-H-A a:link{} a:visited{} a:hover{} a:active{}
參考鏈接

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116028.html

相關(guān)文章

  • CSS哪些屬性可以繼承哪些不可繼承 與 CSS優(yōu)先級算法

    摘要：哪些屬性可以繼承哪些不可繼承可繼承屬性字體系列屬性組合字體規(guī)定元素的字體系列設置字體的粗細設置字體的尺寸定義字體的風格偏大或偏小的字體文本系列屬性文本縮進文本水平對劉行高增加或減少單詞間的空白增加或減少字符間的空白控制 CSS哪些屬性可以繼承哪些不可繼承 可繼承屬性：1.字體系列屬性font:組合字體font-family:規(guī)定元素的字體系列font-weight:設置字體的粗細fon...

    lemanli 評論0 收藏0

  • 分享兩道大廠前端面試題

    摘要：示例輸入輸出示例輸入輸出第一種方法滑動窗口解法滑動窗口兩個邊界情況第二種方法位運算解法位運算頭條財經(jīng)部門一面二維數(shù)組的回形遍歷這是頭條財經(jīng)部門一面的一道題記住遍歷過的索引更多前端算法題，參見算法倉庫。 1. 百度百家號一面 面完回來搜素，才發(fā)現(xiàn)這道題其實是LeetCode540。 540 medium 有序數(shù)組中的單一元素 給定一個只包含整數(shù)的有序數(shù)組，每個元素都會出現(xiàn)兩次，唯有一個數(shù)...

    whjin 評論0 收藏0

  • 程序語言

    摘要：一面應該還問了其他內(nèi)容，但是兩次面試多線程面試問題和答案采訪中，我們通常會遇到兩個主題采集問題和多線程面試問題。多線程是關(guān)于并發(fā)和線程的。我們正在共享重要的多線程面試問題和答案。。 2016 年末，騰訊，百度，華為，搜狗和滴滴面試題匯總 2016 年未，騰訊，百度，華為，搜狗和滴滴面試題匯總 【碼農(nóng)每日一題】Java 內(nèi)部類(Part 2)相關(guān)面試題 關(guān)注一下嘛，又不讓你背鍋！問：Ja...

    mtunique 評論0 收藏0

  • 程序語言

    摘要：一面應該還問了其他內(nèi)容，但是兩次面試多線程面試問題和答案采訪中，我們通常會遇到兩個主題采集問題和多線程面試問題。多線程是關(guān)于并發(fā)和線程的。我們正在共享重要的多線程面試問題和答案。。 2016 年末，騰訊，百度，華為，搜狗和滴滴面試題匯總 2016 年未，騰訊，百度，華為，搜狗和滴滴面試題匯總 【碼農(nóng)每日一題】Java 內(nèi)部類(Part 2)相關(guān)面試題 關(guān)注一下嘛，又不讓你背鍋！問：Ja...

    stefan 評論0 收藏0

  • CSS3新增的偽類有哪些 與 居中div的多種方法

    摘要：新增偽類有那些選擇屬于其父元素的首個元素選擇屬于其父元素的最后元素屬于父元素的特定類型的唯一子元素屬于父元素的唯一子元素的每個元素選擇父元素的第二個子元素在元素之前添加內(nèi)容在元素之后添加內(nèi)容已啟用控制表單為禁用狀態(tài)，不可點擊 CSS3新增偽類有那些？ p:first-of-type:選擇屬于其父元素的首個元素 p:last-of-type:選擇屬于其父元素的最后元素 p:only-o...

    mcterry 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<