css相關

css相關

原創

2020-02-21 06:34

1.css如果衝突，可以使用!important提升優先級

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
height: 27px!important;
line-height: 27px!important;
border-radius: 0 4px 4px 0;
}

2.如果js定義了樣式比如（background），會導致相應的css文件的background無效，因爲js定義是內聯樣式，優先級比css高，

解決方式：採用!important提升css的優先級

3. 子元素在div中水平居中

margin:0 auto;

在div中垂直居中

將line-height:設定爲div的高度

4.關於height:100%;
要想高度百分比起作用，一般來說，要滿足兩個條件：其一，父標籤有高度可尋，就是向上遍歷父標籤要找到一個定值高度（body，html另外討論），如果中途有個height爲auto或是沒有設置height屬性，則高度百分比不起作用；其二，標籤本身的屬性，如果inline屬性的標籤，如果沒有浮動，zoom，或是絕對定位之類屬性是不支持百分比高度的，block或inline-block屬性可以說是高度百分比起作用的前提條件之一吧。
而這裏要講的是關於body和html的高度百分比顯示的。
默認狀態下，body不是高度100%顯示的，不要看body定義background屬性好像body就是滿屏顯示的，正如上面所推斷的，此背景已非body之背景。用這個body{background:#039; border:50px solid #C00;}一測便知。看邊框範圍是否高度100%顯示，答案是否定的。見下圖（截自IE6，Firefox瀏覽器下表現一致）：
body默認高度是不100%顯示的
body默認高度是不100%顯示的
那麼body是否支持height:100%;呢？經過我的測試，IE6支持，Firefox瀏覽器不支持。
要想讓Firefox瀏覽器也支持body的height:100%;是簡單的，就是設置html標籤height:100%;一旦設置了height:100%;則無論哪個瀏覽器下body都支持height:100%;了，而body內部的容器也可以支持height:100%;了。
前段時間看到百度的一道面試題，說什麼透明層無論滾動與否都滿屏顯示，其實就是對html和body標籤做一番手腳，兩者高度100%顯示，同時溢出隱藏（overflow:hidden），然後用一個div高度100%系顯示，溢出滾動。而這個透明層就使用絕對定位且與這個div平級，高寬100%顯示，就可以使得無論怎麼滾動這個透明覆蓋層都是滿屏顯示的。這其實也就解決IE6下浮動層固定定位的經典方法。

</pre><p>5.一個簡單的遮罩層</p><p><pre name="code" class="javascript">function show_overlay(){
    var docHeight = $(document).height(); //獲取窗口高度

    $('body').append('<div id="overlay"></div>');

    $('#overlay')
        .height(docHeight)
        .css({
            'opacity': .2, //透明度
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'background-color': 'lightskyblue',
            'width': '100%',
            'z-index': 5000 //保證這個懸浮層位於其它內容之上
        });
}