目录

1. 精灵图

1.1 为什么需要精灵图

1.2 精灵图（sprites）的使用

2. 字体图标

2.1 字体图标的产生

2.2 字体图标的优点

2.3 字体图标的下载

2.4 字体图标的引入

2.5 字体图标的追加

3. CSS三角形

4. CSS用户界面样式

4.1 更改用户鼠标样式

4.2 表单轮廓outline

4.3 防止表单域拖拽resize

5. vertical-align属性应用

5.1 图片、表单和文字对齐

5.2 解决图片底部默认空白缝隙问题

6. 溢出的文字省略号显示

6.1 单行文本溢出显示省略号

6.2 多行文本溢出显示省略号（了解）

7.常见布局技巧

7.1 margin负值运用

7.2 文字围绕浮动元素

7.3 行内块巧妙运用

7.4 CSS三角强化

8. CSS初始化

---

 

1. 精灵图

1.1 为什么需要精灵图

1.2 精灵图（sprites）的使用

x轴往右走是正值，y轴往下走是正值

2. 字体图标

2.1 字体图标的产生

2.2 字体图标的优点

2.3 字体图标的下载

2.4 字体图标的引入

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

字体声明：打开icomoon文件夹中的style.css文件，将从开头到diaplay：block；}这段复制，即可将字体文件通过css引入到我们页面中。

        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?yebu8p');
            src: url('fonts/icomoon.eot?yebu8p#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?yebu8p') format('truetype'),
                url('fonts/icomoon.woff?yebu8p') format('woff'),
                url('fonts/icomoon.svg?yebu8p#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

 /* 4.设置字体 */

span {

            font-family: 'icomoon';

            font-size: 100px;

            color: pink;

        }

2.5 字体图标的追加

只向服务器请求一次

3. CSS三角形

       .box1 {
            width: 0;
            height: 0;
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }

        .box2 {
            width: 0;
            height: 0;
            /* line-height和font-size是照顾低版本浏览器兼容性 */
            line-height: 0;
            font-size: 0;
            border: 50px solid transparent;
            border-top-color: pink;
            margin: 100px auto;
        }

4. CSS用户界面样式

更改用户操作样式，以提高更好的用户体验。

4.1 更改用户鼠标样式

    <ul>
        <li style="cursor: default;">我是默认的小白鼠标样式</li>
        <li style="cursor: pointer;">我是鼠标小手样式</li>
        <li style="cursor: move;">我是鼠标移动样式</li>
        <li style="cursor: text;">我是鼠标文本样式</li>
        <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
    </ul>

4.2 表单轮廓outline

4.3 防止表单域拖拽resize

文本域尽量放在一行上，中间不要有空格，否则光标点过去文本框起始会有空格，可以通过padding设置缩进。

5. vertical-align属性应用

5.1 图片、表单和文字对齐

5.2 解决图片底部默认空白缝隙问题

6. 溢出的文字省略号显示

6.1 单行文本溢出显示省略号

            /* 1.强制文字一行显示，normal会自动换行 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3.文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;

6.2 多行文本溢出显示省略号（了解）

要控制盒子的大小

7.常见布局技巧

7.1 margin负值运用

做细线边框，防止边框重叠使得1+1=2。

如果没有定位，加z-index不管用。

7.2 文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

7.3 行内块巧妙运用

只要给父元素添加text-align:center;那父盒子里面的所有的行内元素和行内块元素都会水平居中。

7.4 CSS三角强化

        .box1 {
            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

8. CSS初始化

/* 把所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}

/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}

/* 去掉li的小圆点 */
li {
    list-style: none
}

img {
    /* border: 0;照顾低版本浏览器，如果图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底部有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当鼠标经过按钮时鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #ff0f23
}

button,
input {
    font-family: PingFang SC, Source Han Sans CN, Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿行，让文字显示得更清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    /* \5B8B\4F53 就是宋体的意思，这样浏览器兼容性比较好 */
    font: 12px/1.5 PingFang SC, Source Han Sans CN, Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}