【106天】前端碎片知识拾遗00004

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>