CSS学习(十):CSS高级技巧

1. 精灵图

1.1 为什么需要精灵图

一个网页中往往会应用很多很小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。

因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度 ,出现了CSS精灵技术(也称为CSS Sprites,CSS雪碧)。

1.2 精灵图的使用

使用精灵图核心:

  1. 精灵技术主要针对背景图片使用。就是把多个小背景整合到一张大图中。
  2. 这个大图片也称为sprites 精灵图 或者 雪碧图。
  3. 移动背景图片位置,此时可以使用background-position
  4. 移动的距离就是这个目标图片的x和y坐标。
  5. 一般情况下往上往左移动,所以数值都是负值。

2. 字体图标

2.1 字体图标的产生

字体图标的使用场景:主要用于显示网页中通用、常用的一些小图标。精灵图虽然也能做,但是缺点很明显:

  1. 图片文件还是比较大的。
  2. 图片本身放大和缩小会失真。
  3. 一旦图片制作完毕想要更换非常复杂。

此时,有一种技术的出现很好的解决了以上问题,就是 字体图标iconfont字体图标 可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体

2.2 字体图标的文字

  • 轻量级:一个字体图标要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求。
  • 灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等。
  • 兼容性:几乎支持所有的浏览器。

注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化。

总结:

  1. 如果遇到一些结构和样式比较简单的小图标,就用字体图标。
  2. 如果遇到一些结构和样式比较复杂一点的图片,就用精灵图。

2.3 字体图标的下载

iconmoon字库: http://icomoon.io

阿里iconfont字库: http://www.iconfont.cn

3. CSS三角图形

网页中常见一些三角形,使用CSS直接画出来就可以,不必做成图片或者字体图标。

.box {
            height: 0px;
            width: 0px;

            border-top: 10px solid red;
            border-right: 10px solid pink;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }

以上CSS会出现以下效果:

.box1 {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-color: black;
  /* 照顾兼容性 */
  line-height: 0;
  font-size: 0;
}

4.CSS界面样式

所谓 界面样式 ,就是更改一些用户操作样式,以便提高更好的用户体验。

  • 更改用户鼠标样式
  • 表单轮廓
  • 防止表单域拖拽

4.1 鼠标样式cursor

cursor: default | pointer | move | text | not-allowed;
属性值 描述
default 小白(默认)
pointer 小手
move 移动
text 文本
not-allowed 禁止

4.2 表单轮廓线

给表单添加outline:0;或者 outline:none; 样式之后,就可以去掉默认的蓝色边框。

input {
    outline: none;
}

4.3 防止拖拽文本域resize

textarea {
    outline: none;
    resize: none;
}

5. vertical-align 属性应用

CSS的vertical-align 属性使用场景:通常用于设置图片或者表单(行内块元素)和文字垂直对齐。

官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素。

语法:

vertical-align: baseline | top | middle | bottom
描述
baseline 默认。元素放置在父元素的基线上。
top 把元素的顶端与行中最高元素的顶端对齐。
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低元素的顶端对齐。

5.1 图片、表单和文字对齐

图片、表单都属于行内块元素,默认vertical-align是基线对齐。

此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了。

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

图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。主要解决方法有两种:

  1. 给图片添加vertical-align:middle top bottom; 等。
  2. 把图片转换为块级元素display:block;

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

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

必须满足以下三个条件:

/*1.先强制一行内显示文本*/
 white-space: nowrap;
/*2.超出部分隐藏*/
overflow: hidden;
/*3. 文字用省略号代替*/
text-overflow: ellipsis;

white-space的默认值是normal ,也就是如果文字显示不开就自动换行。

6.2 多行文本溢出显示省略号(了解)

overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;

7. 常见布局技巧

7.1 margin负值的运用

  1. 解决并排盒子之间的边框宽度加倍问题。原理:让每个盒子压住前面的盒子,边框叠加。
  2. 鼠标移动边框颜色变化效果。

7.2 文字围绕浮动元素巧妙运用

原理:浮动元素不会遮住文字。

7.3 行内块元素的巧妙运用

行内块元素具有可以设置大小,一行显示,元素之间存在缝隙的特点。适合用做页码模块。

<style>
        /*清除内外边距*/
        * {
            margin: 0;
            padding: 0;
        }
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        .box .pre,
        .box .next {
            width: 85px;
        }

        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }

        .box input{
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;

        }
</style>
<div class="box">
    <a href="#" class="pre"><<上一页</a>
    <a href="#" class="current">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#" class="elp">...</a>
    <a href="#" class="next">>>下一页</a>
    到第
    <input type="text">
    页
    <button>确定</button>
</div>

显示效果如下:

7.4 CSS初始化

不同浏览器对有些标签的默认值是不同的,为了消除浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对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;
        }

        body {
            /*CSS3 抗锯齿形 让文字显示的更加清晰*/
            -webkit-font-smoothing: antialiased;
        }

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

        }

        .clearfix {
            *zoom: 1
        }
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇