CSS高级技巧

CSS高级技巧

1.精灵图

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。我们引入了精灵图技术，该技术实质就是将许多小图片放在一个大的图片中，这样我们浏览器向服务器发送一次请求即可。

核心：
1.精灵图主要针对于小的背景图片使用。
2.主要借助于背景位置来实现—background-position。
3.一般情况下，盒子定义在网页上的某个位置，我们需要向四周移动我们的精灵图来使我们想要的部分展示出来。

2.字体图标

主要使用场景：用于显示网页通用、常用的一些小图标。
本质：展示以图标展示，但是本质是属于字体的。所以我们可以改变其大小以及颜色等等。

css三角的制作方法：
类似于以下的三角形该如何制作？

这时我们可以将边框的宽和高都设置为0，然后再设置边框的大小，边框的大小即是三角形的大小。如果我们只需要实现一个三角，那么我们就可以将边框的颜色设置为透明色，然后再指定位置的颜色即可。

代码展示如下：

.box1 {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 50px solid transparent;
            border-right-color: red;
        }

3.CSS用户界面样式

鼠标样式cursor:

用户鼠标光标到达指定位置后即可改变其外观样式。
语法格式如下：

解释器 { course: pointer; }

轮廓线outline：
在我们使用input标签来设置输入文本框的时候，我们将鼠标的光标放在输入框的时候，边框就会变成蓝色，这是我们可以通过对outline属性的设置来去掉蓝色。
语法格式如下：

input {outline：none；/*亦或是outline：0；*/}

防止文本域拖拽：
一般情况下，文本域的右下角会有拖拽符号会让我们去更改文本域的格式，但是更改同时也会将页面中其他标签的格式改变，这是我们需要设置格式固定。
语法格式如下：

textarea {{resize：none；}

vertical-align属性应用：
使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
语法格式如下：

vertical-align：baseline| top | middle | bottom

在没有设置该属性时，默认是基线对齐，常用的是图片文字垂直居中对齐，这是我们只需要设置该属性的值为middle即可。

溢出的文字省略号溢出：
1.单行文字溢出省略号显示：

/*一行文字显示不开还需要在一行显示*/
white-space：nowrap；
/*溢出的部分进行隐藏*/
over-flow：hidden；
/*文字溢出的时候使用省略号进行显示*/
text-overflow：ellipsis；

2.多行文字溢出省略号显示：
多行显示省略号有较大的兼容性问题，适合于webKit浏览器或者移动端。
语法格式如下：

4.常见布局技巧：

1.margin负值的运用：
若将多个盒子设置浮动的话，盒子的边框会进行重叠，这是我们可以运用margin-left：-1px；来实现边框不重叠。

2.文字围绕浮动元素：
当我们使用设置图片浮动时，会脱离标准流，但是文字却不会被图片压住，它会悬浮在图片的周边。

3.行内块元素的巧妙运用
在我们设置网页最下面的页码数时，并不是采用常用的浮动，而是巧用行内块元素来进行设置。

类似于以上图片，我们巧用行内块元素之间的间隙来进行设置。

5.CSS三角强化

CSS初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

简单理解：CSS初始化是指重设浏览器的样式。（也称为CSS reset）

每个网页都必须首先进行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 {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

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

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 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
}