码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-03-17 10:22:30      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:文档   transform   默认   col   function   width   webkit   The   name   

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>

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

标签:文档   transform   默认   col   function   width   webkit   The   name   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12508888.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!