CSS随笔2

字体

font-family就是字体，如果用户电脑里面没有这个字体，那么就会变成宋体。页面中，我们只使用微软雅黑，宋体，黑体，如果页面中需要其他的字体，那么需要切图。

font-family: "Arial", "宋体";
我们需要先将英文字体写在前面，否则英文字体会出错。

行高可以用百分比。
font: 12px/200% "宋体";等价于font: 12px/24px "宋体";

伪类

同一个标签，根据用户的某种状态不同，有不同的样式，这就叫做“伪类”。伪类用冒号来表示，a标签有4个伪类：

        a:link {
            color: red;
        }
        a:visited {
            color: orange;
        }
        a:hover {
            color: green;
        }
        a:active {
            color: black;
        }

:link表示用户没有点击过这个链接的样式，:visited表示用户访问过这个链接的样式，:hover表示鼠标悬停的时候链接的样式，:active表示用户点击这个链接但是不松手的样式。

这四种状态在css中必须按照固定顺序写，如果不按照顺序，那么将失效。“爱恨准则”link，visited，hover，active（love，hate）。

.nav ul li a {
            display: block;
            width: 120px;
            height: 40px;
        }
        .nav ul li a:link, .nav ul li a:visited{
            text-decoration: none;
            color: white;
            background-color: green ;
        }
        .nav ul li a:hover {
            background-color: red;
            font-weight: bold;
            color: purple;
        }

a标签在使用的时候，我们一定要将a标签写在前面，伪类写在后面。a标签中，描述盒子：伪类中描述文字的样式、背景。（如上）

记住，所有的a都不继承text、font这类东西，因为a有自己的伪类的权重。

background属性

• 用英语单词表示
• 用rgb三原色表示, rgb(255, 0, 0)
• 十六进制表示法

background-img属性

url()提供背景图的地址。

用途：

1. 大背景图居中
2. 通栏banner

background-attachment

背景图固定，内容可以滚动。

综合起来：

background: red url(1.jpg) no-repeat 100px 100px fixed

等价于：

background-color: red;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: 100px 100px;
background-attachment: fixed;

相对定位

相对定位就是相对自己原来的位置进行移动，也就是说，相对定位就是微调元素位置的，让元素相对自己原来的位置进行定位。

        position: relative;
            left: 100px;
            top: 150px;

先声明相对定位，然后调整位置。

相对定位不脱标，如图，第三章图片没有顶上去。

不脱标，老家留坑，形影分离

相对定位的用途

1. 微调元素
2. 绝对定位的参考，子绝父相

微调button的位置和input输入框对齐：

    <style type="text/css">
        .txt {
            font-size: 20px;
        }
        .btn {
            position: relative;
            top: -1px;
            left: 0;
        }
    </style>
</head>
<body>

    <p>
        <input type="text" class="txt" />
        <input type="button" value="我是一个小按钮" class="btn" /> 
    </p>

绝对定位

绝对定位是脱标的，所示绝对定位后的元素，就可以设置宽高了。

绝对定位的参考点：

1. top，使用top定位时，绝对定位的参考点是文档的左上角，而不是浏览器窗口的左上角。
2. bottom，使用bottom定位时，参考点是浏览器首屏（记住是首屏幕，也不是浏览器窗口）的左下角！而不是文档的左下角。

以盒子为参考点

一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈的这个元素为参考点。

1.子绝父相

    <div class="box1">
        <div class="box2">
            <div class="box3">
                <p></p>
            </div>
        </div>
    </div>

如果box1相对定位，box2也相对定位，p绝对定位，那么将以最近的box1为参考点。

不一定是相对定位，任何定位都可以作为参考点

2.子绝父绝
3.子绝父固

工程商，子绝父相有意义，父亲没有脱标，儿子脱标在父亲的宽度范围内移动。

绝对定位的儿子，无视父亲的padding，直接视border内侧为参考点

固定定位

就是相对浏览器窗口定位，页面如何滚动，这个盒子显示地位置不变。
position: fixed;

z-index值

• z-index值表示谁压着谁，数值大的压着数值小的。
• 只有定位了的元素，才有z-index值。也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index值，而浮动的东西不能用。
• z-index值没有单位，就是一个正整数，默认的z-index值是0。
• 如果大家都没有z-index值，或者z-index值一样，那么水写在HTML后面，谁在上面压着别人。
• 从父现象，父亲的z-index怂了，儿子再牛逼也没用

        .box1 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 988;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            top: 180px;
            left: 180px;
            z-index: 444;
        }

如图：

本来后面的生效，由于第一个box的z-index值大，所以第一个压住第二个。