CSS高级技巧 – 小飞侠

html：   
     <div class="jingling">
        <div class="c"></div>
        <div class="c y"></div>
        <div class="c j"></div>
    </div>

css：
        .jingling {
            width: 500px;
            height: 200px;
            margin: 120px auto;
            background-color: pink;
        }
        .jingling .c {
            float: left;
            margin: 20px;
            width: 120px;
            height: 160px;
            background: url(8.jpg) no-repeat -300px 0;
        }
        .jingling .y {
            float: left;
            background: url(8.jpg) no-repeat -446px -700px;
        }
        .jingling .j {
            float: left;
            background: url(8.jpg) no-repeat -450px -180px;
        }

字体图标

1.字体图标的产生

2.优点

3.字体图标的使用

三角的做法

宽度、高度全为0

width: 0;

height: 0;

line-height: 0;

font-size: 0;

border: 10px solid transparent; /*全部透明*/

border-top-color: pink; /*设置上边框*/

<div class=”waim”>

<div class=”sanjiao”></div>

</div>

css三角强化

先把左边和下边的边框宽度设置为0，然后将上面边框调大

更改鼠标样式

cursor：属性

修改表单的轮廓线outline和防止拖拽文本域

防止拖拽文本域

vertical-align 属性

使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐

文字溢出用省略号显示

单行文字溢出

多行文本溢出

比如谷歌兼容，ie不兼容

需要严格控制盒子的大小

常见布局技巧

1.margin负值运用

2.行内块巧妙运用

CSS3新特性

很像jQuery的选择

结构伪类选择题

n是几，选的就是几

n也可以是关键字：比如 even偶数，odd奇数

n也可以是公式，比如

直接写n（从0开始，每次加1往后计算，超出部分直接忽略）

2n（偶）、2n+1（奇）、5n、n+5（从第五个开始到最后）、-n+5（前五个）

这三个与前面三个的区别：

比如：

section div：nth-child（1）

匹配过程：先把所有盒子都排序光头强就是1

先看：

nth-child（1）

，然后再看

div

结果：都没选上原因：因为1是光头强，但光头强的类型不是div所以匹配不上

section div：nth-of-type（1）

匹配过程：先把指定元素都排序熊大就是1

先看div

指定的元素，再去看

nth-of-type（1）

是第几个孩子

伪元素选择器（权重是1）

伪元素选择器可以帮助我们利用css创建新标签元素，简化HTML结构

基本使用：

假设：div：：before{ }

在某个父盒子里面创建一个新盒子，并放在父盒子里面孩子的前面

.nav::before{ /*伪类选择器作用跟加一个div再设置一样*/

content: ‘ ‘;

float: left;

height: 41px;

width: 100px;

}

配合字体图标使用

从阿里巴巴图标库上面，下载文件zip，解压得到

伪元素清除浮动：

.clearfix::after { /*在后面添加一个块级元素堵住它*/

content: “”; /*必须要写*/

display: block; /*必须是块级元素*/

height: 0; /*不让看见*/

clear: both; /*清除浮动核心*/

visibility: hidden; /*不让看见*/

}