前端一些小知识点

一，主流浏览器及内核

Chrome          Webkit/blink

IE                    Trident

Firfox              Gecko

Safari              Webkit

Opera              presto

二，css权重

！importent          Infinity（正无穷）

行间样式               1000

id                            100

class/属性/伪类        10

标签/为元素               1

通配符                        0

css的优先级取决于权重，权重间的进制是256.

三，行级 块级 行级块 元素

行级元素：1内容决定元素大小  2无法通过css改变宽高（span em a strong...）

块级元素：1独占一行   2可以改变宽高 （p div ul li form address...）

行级块元素：内容决定大小  可以改变宽高  (img)

四，定位

绝对定位：absolute：脱离原来位置，以最近父级定位，如果没有以文档顶端定位

相对定位：relative：保留自己以前的位置，并且以自己以前位置定位

五，margin俩bug

1，margin-top塌陷：子div在父div中 子div margin-top无效，除非子div margin-top值大于父级的，而且此时还带动父级一起移动。

    
        
        
        
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                margin-left: 100px;
                margin-top: 100px;
                width: 100px;
                height: 100px;
                background: #000000;
            }
            .content{
                margin-left: 50px;
                margin-top: 50px;
                width: 50px;
                height: 50px;
                background: #008000;
            }
        
    
    
        
            
        
    

父级div上边框消失了一样，给父级加上一个上边框可以解决（不可取），或者使用BFC（block formatting context 块级格式化上下文）

CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

• 根元素

• float的值不为none

• overflow的值不为visible

• display的值为inline-block、table-cell、table-caption

• position的值为absolute或fixed

给父级添加如上所示就能解决此问题

2，margin合并：两个并排块级元素，上块设置margin-bottom同时下块设置margin-top。两个只会一个有效。（值大的那个有效）

    
        
        
        
            * {
                padding: 0;
                margin: 0;
            }

            .wrapper {
                margin-bottom: 50px;
                
                width: 100px;
                height: 100px;
                background: #000000;
            }

            .content {
                margin-left: 50px;
                margin-top: 100px;
                
                width: 50px;
                height: 50px;
                background: #008000;
            }
        
    
    
        
        
        
    

解決：只设置一个

 六，不加载css/js情况下网站能运作的一个小例子

图片作为超链接时，网速不佳不能加载css，依然可以继续操作。

    
        
        
        
            a {
                display: block;
                border: 1px solid black;
                background: url(img/lushi.ico) 0 0 no-repeat;
                width: 100px;
                
                
                
                

                overflow: hidden;
                background-size: 100% 100%;

            }
        
    
    
        炉石
    

第一种

1，给a标签设置块级/行级块 和宽。然后高度为零（此时图片就显示不出来）。

2，然后加上padding-top就会把图片需要的位置顶出来（图片可以出现在padding中），并且把超链接文字顶出a标签范围。

3，然后overflo-hidden把文字隐藏就好了。

4，当不加载css的属性时，‘炉石’就会出现，不耽误操作。

第二种

1，给a标签设置块级/行级块 宽和高。

2，然后设置文本缩进，把‘炉石’顶出去，并设置不换行。

作者：猪翔heart

原文链接：https://www.cnblogs.com/zx3180/p/10446119.html