【106天】前端碎片知識拾遺00004

Wall_Breaker發表於2019-02-16
前端

CSS

nth-child()

nth-child()不止作用於子元素，還會作用於孫子元素，比如：div：nth-child（1），不止會作用於div，還會作用於div裡的div.

table相關元素的backgroundborderheightwidthmarginpadding測試

demo
結論

  1. table 均有效，無比正常的一個塊級元素。

  2. thead、tbody只有背景色有效，但是那是因為子元素繼承了它的屬性，它本身沒法擁有背景色。

  3. tr 背景色和height有效，背景色有效是因為子元素繼承了它的屬性，它本身沒法擁有背景色。
    4、th、td除了margin其它均有效。

border-style:outset;

除了solid【實線】，還有很多樣式，outset就是其中一種。按鈕預設樣式就這個

box-sizing

最佳全域性設定【不干擾元件】詳見說明


html {
    box-sizing: border-box;
}

*，
*:after,
*:before {
    box-sizing: inherit;    
}

radio/checkbox

要用name將他們關聯起來。

text-transform

大小寫轉換專用屬性。
uppercase——大寫字母
lowercase——小寫字母
capitalize——首字母大寫

奇技淫巧

去邊框，可以用絕對定位控制一個div遮擋邊框實現

fieldset、legend

fieldset是個框
legend是它的標題

appearance:none;

可清除預設樣式

   appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

demo
文件

border-collapse:collapse

collapse的中文意思是“倒塌”很形象。

JavaScript

這段程式碼可以解決某些瀏覽器不支getElementsByClassName（）方法的情況。

    <script> 
        function getElementsByClassName(node,Classname) {
            if (node.getElementsByClassName) {
                //使用現有方法 
                return node.getElementsByClassName(Classname);
            }

            else {
                var results = new Array();
                var elems = node.getElementsByTagName("*");
                for (var i=0; i<elems.length; i++){
                    if (elems[i].className.indexOf(classname)!= -1){
                        results[results.length]=elems[i];
                    }
                }
            return results;
            }
        }
    <script>

相關文章