CSS进阶

1.选择器

1.1复合选择器

1.1.1后代选择器：空格

 

 我的理解：其实仍属于标签选择器，只是多了嵌套关系，让其指代更明确。个人认为：如果标签多了的时候，不如用类选择器好，不易出错。

1.1.2 子代选择器：>

 

 

 可见，子代选择器会把儿子以及儿子内部的标签全都改为一个样式，

总结：

根据上面这个效果，还是不如类选择器好。

1.2并集选择器

 

 那些选择器也可以是类选择器，任何选择器都行

1.3交集选择器

 

 

 直接连着写，不用空格。

1.4hover伪类选择器

hover：盘旋。 懂英文单词还是好处多多。

 当鼠标悬停在这个内容上时，就出现hover伪类选择器的样式。

任何标签都可以添加伪类，任何一个标签都可以鼠标悬停。

1.5Emmet语法

其实就是提示，当使用英文输入法输入：div，再回车，直接出现div完整标签。

    <!-- 一次性输出同级的div和p的指令：div+p -->
    <div></div>
    <p></p>
    <!-- 一次输出父子的div与p，p为父，div为子，指令：p>div -->
    <p>
        <div></div>
    </p>
    <!-- 输出父ul，三个子li，指令：ul>li*3 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- 输出父ul，三子li，且每个子中含文字内容111.指令：ul>li{111}*3 -->
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
    <!-- 输出ul，ul中含3个li，li中内容分别为1，2，3.指令：ul>li{$}*3 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

2.背景相关属性

2.1背景颜色

2.2背景图片

图片的尺寸比盒子的尺寸大的话，就会使得其只能显现部分。

2.3背景平铺

2.4背景位置

 

 

 

对于使用数值和坐标系时，x轴向右为正，y轴向下为正，页面的左上角为原点。

背景色和背景图片只显示在盒子里面的部分，。

2.5背景相关属性连写

 对于那几个属性值的书写先后顺序并无要求，因为它们的取值并无冲突把可能。

对于背景位置：水平 垂直。  若用英文单词 left right top bottom center表示的话，无先后顺序，单词不冲突。   但是若用数值 +px表示的话， 有先后顺序：水平 垂直

2.6 img标签和背景图片的区别（拓展）

不能撑开div标签：是指图片不能撑开div的大小尺寸。例如：你设置div的宽300，高300；而你把一张600*600的图片作为背景图放进div盒子中，div盒子只会显示图片中300*300的部分，不会完整显示图片。 更不会把div自身放大来迎合图片大小。

至于在制作网页时，什么时候用img，什么时候用div+背景图片； 

一般：重要的图就用img ， ，否则就用div+背景图片

3.元素显示模式

        目标：能认识三种常见的元素显示模式，并通过代码实现不同 元素显示模式的转还。

3.1块级元素

               

像div标签、p标签，都是独占一行，哪怕标签内只有一个字，其他标签紧跟的时候，都得换行，

body标签是整个页面，其宽占整个页面的宽，所以div的宽也是这样，因body是div的爹。

 设置了它的宽高，虽然行内后面还有空位，但因为独占一行，不能让其他标签来空位处。

了解这些，是为了让自己在制作网页时，明白什么时候用独占一行的， 什么时候不用。

3.2行内元素

即使你给它设宽高也无法生效。

另外，若不知道一个标签是块级还是行内，可以自己使用代码进行测试，首先测试能否独占一行，再测试宽高能否设置生效。

3.3行内块元素

3.4元素显示模式转换

        目标：能够认识 元素显示模式，并通过代码实现元素显示模式的转换。

这里，div本身是块级的，每个标签独占一行，且可设置宽高。

接着，把它换成行内块的形式，即一行可多个标签，还能设置宽高。如下：

符合预期。

 span标签本身是行内形式，即一行可多个标签， 宽高不可设置（或说设置了无法生效）

接着，把其改成行内块形式（一行可多个标签，宽高可设置）

再尝试把其换成块级形式：

3.5拓展

         拓展1：HTML嵌套规范注意点

简而言之：就是大容器套小容器符合逻辑，而小容器套大容器就不符合逻辑了。

代码确实没报错， ，我们看效果

效果也还正常。

我们使用调试工具看看：

代码被修改了，没有嵌套关系了，所以说，浏览器帮助我们修改错误了。

4.CSS特性

4.1继承性

在调试工具中选中span这行：

也就是说span从它 的父亲div那里继承了所有的style

接下来，看看不能继承的：

注意，这里是修改的div标签的高度，不是文字高度。

选中div这个标签，可以看到，其高度是这样。  接着再看span此时的高度

很明显的高度不同。

总结：控制文字的属性都能继承，不是控制文字的都不能继承。

拓展：继承失效的特殊情况

超链接自己有颜色，就不会继承它爹的颜色， h1有自己固定的字号大小，就不会继承它爹的字号。

总结：继承的原则是：我没有，那就继承爹的，我有，就听自己的。

4.2层叠性