首页 > > 网页制作 > css >

前端一些小知识点

2019-02-27 11:51:53来源：博客园阅读 ()

一，主流浏览器及内核

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值大于父级的，而且此时还带动父级一起移动。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                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;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="content"></div>
        </div>
    </body>
</html>

父级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。两个只会一个有效。（值大的那个有效）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                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;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
        </div>
        <div class="content"></div>
    </body>
</html>