CSS学习总结

--------这里是重要的原则。

1、margin:10px 上右下左的布局。

margin：10px 20px 上下10px 左右 20px

margin:10px 20px 30px 40px 上10px 右20px下30px左40px

margin:10px 20px 30px  上10px 左右20px 下30px

2、background:的相关连缀写法

background：url(tr.png) no-repeat top right/2em 2em

那么我们拆解下这个

background：url(tr.png) top right;

backgroud-size:2em 2em;

backgroud-repeat:no-repeate;

3、我们总结下font的相关连缀写法：

font:italic bold 12px/30px arial,sans-serif;

12px 是字体大小

30px是行高

这一个浓缩了喝多的属性。

1、行内元素没有宽度的概念。例如a元素 表单元素的 height，pading-top，padding-botton，margin-top，margin-botton等均无效。但是line-height管用。

2、当我们采用如下布局时ul>li>a>h2>(imag+text)的这种模式。如何让li的点击和a的表现一致。那就a的display：block。只有这样a才能全部占满li。

成功的案例：

  .ulh {
            padding: 0;
            list-style: none;
            font-family: "Microsoft YaHei UI";
            font-size: 14px;
        }
        .ulh >li {
            float: left;
            background-color: bisque;
            border: 1px solid maroon;
            border-collapse: collapse;
            width: 80px;
            box-sizing: border-box;
            text-align: center;
        }
        .ulh >li a {
            cursor: pointer;
            display: block;
            background-color: yellow;
        }

表达的完全正确。

但是这些也有例外的时候。

        .ulh {
            padding: 0;
            list-style: none;
            font-family: "Microsoft YaHei UI";
            font-size: 14px;
        }
        .ulh >li {
            padding: 0 20px;
            float: left;
            background-color: bisque;
            border: 1px solid maroon;
            border-collapse: collapse;
            width: 80px;
            box-sizing: border-box;
        }
        .ulh >li>a {
            cursor: pointer;
            display: block;
            background-color: yellow;
        }

但是这里表现出来的是错误的

3、两个兄弟层的div。如果两个层都有margin，那么在两个层的上下连接处，会发生消除，消除后以最大的margin为主。li同样如此。

但是这里涉及到一个问题。父子div，也是兄弟div，怎么处理呢！将父亲的div设为postion:absolute;

4、line-height是垂直居中的方案。水平均中有两种margin:0 auto；自己在父层中居中。text-align子元素居中。

5、有关margin、padding和border的问题总结

background-color和background-image会将padding的部分填充。
margin：10px 上下左右全是10px
margin：10px 20px 上下10px 左右20px
margin：10px 20px 30px 上10px 左右20px 下20px
margin:10px 20px 30px 40px; 上10px右20px下30px左40px

6、有关定位的问题总结

postion:absolute的前提是 父层必须定位了，不是static的定位。否则他到处找父亲节点爷爷节点直到找到为止。

postion:fixed的是从body为父窗体的定位。

在postion:absolute和postion:fixed的前提下，如何才能保证和父层大小相同呢，那就是 

设置下面的信息

top: 0;
bottom: 0;
right: 0;
left: 0;

7、css的层叠性和继承性的开发怎么体现出来的。尤其注意继承的开发

8、font的参数列表

9、background的开发

常见的属性开发

background: #eee url("qqq.png") no-repeat;
图片在背景色上显的很匀称 并且没有循环