HTML入门06

CSS3选择器

nth-child 这个代表的是选中所有儿子元素中的第几个；
nth-of-type 是选中儿子元素中特定类型中的第几个;
nth-last-child()倒数第几个

        /* 所有儿子中的第二个 */
        .main>li:nth-child(2){
            background-color: blue;
        }
        /* 偶数行 */
        .main>li:nth-child(2n){
            background-color: blue;
        }
        .main>li:nth-child(even){
            background-color: rgb(202, 169, 60);
        }
        /* 奇数行 */
        .main>li:nth-child(2n+1){
            background-color: rgb(217, 255, 0);
        }
        .main>li:nth-child(odd){
            background-color: rgb(255, 0, 98);
        }
        /* li类型第三个 */
        .main>li:nth-of-type(3){
            background-color: blueviolet;
        }
        /* li类型倒数第三个 */
        .main>li:nth-last-of-type(3){
            background-color: rgb(43, 205, 226);
        }
        /* li类型正数第一个 */
        .main>li:first-child{
         background:red;
     }
        /* 倒数第一个 */
        .main>li:nth-last-child(1){
            background-color: chartreuse;
        }

图标字体

网址：www.iconfont.cn
步骤：将图标加入购物车，生成项目，在线下载或生成在线链接（如果新添加图标的话需要重新生成链接或重新下载），然后在代码中用link导入，使用时在标签上加入class，加入iconfont类名，然后跟上图标类名

<p class="iconfont icon-arrow-right"></p>

使用方法：给图标类名加样式

        .icon-arrow-right{
            font-size:100px;
        }
        .icon-arrow-right:hover{
            color: coral;
        }

定位position

1. static 默认
2. relative相对定位

• 不脱离文档流，位置还在
• 给绝对定位元素做参照物
• 层级高于普通文档流
• 相对定位相对的是自身原有位置

3. absolute 绝对定位

• 脱离文档流，不占用位置
• 层级高于普通文档流的层级
• 绝对定位的元素在设置参照物的时候，必须是包含关系的上级元素
• 浏览器在寻找参照物的时候是按照就近原则进行查找，如果都没有设置，那它的参照物就是body
• 原本宽度可以继承，但是定位的元素，宽度不再继承了，是由自身内容决定的。如果是行内元素，定位之后，宽、高也可以起作用。
• • 如果给绝对定位元素的宽度设置百分比的时候，那它是相对你参照物来说的，并不是父级。
• 给绝对定位的元素宽使用百分比的时候，百分比是参照物的
• 绝对定位的参照物：
  position：relative或者position:absolute、position:fixed ,只要是三者之一即可。

4. fixed 固定定位

• 固定定位是相对于整个窗口的。

层级z-index

z-index:数值越大层级越高

p{
z-index:11;
}

面试题：如何让一个元素在整个屏幕或者是一个盒子中水平垂直居中

步骤:给盒子设置一个宽高,绝对定位上左50%,然后margin上左减去盒子宽高的一半

<style>
    .box{
        width:200px;
        height:200px;
        background:green;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }
</style>

css小手样式

cursor: pointer;