从头学前端-CSS基础05

CSS高级技巧

1. 精灵图 css sprites

代码语言：txt复制

>为了有效减少服务器接收和发送的频率，减轻服务器的压力；将许多的小图片放到一张大图片上去；就是精灵技术，CSS sprites;

代码语言：txt复制

> 精灵技术主要针对背景图片, 精灵图就是一张大的背景图片
> 使用时主要移动背景图片位置，使用backgroud-position属性
> 一般情况下都是往上走，往左走，所以backgroud-position的值都是负值

1. 字体图标iconfont

代码语言：txt复制

> 字体图标展示的是图标，本质上是文字；可以改变颜色等属性
> 字体图标需要下载，下载地址有很多，推荐https://iconfont.cn/

1. CSS改变鼠标样式： 在这里插入图片描述
2. CSS设置表单轮廓线outline

代码语言：txt复制

> input {outline: none};

1. CSS中的vertical-align属性：

代码语言：txt复制

> 可以使图片，表单和文字对齐，垂直居中
> 只能应用于行内元素和行内块元素； 
> vertical-align: baseline | bottom | middle | top |
> 图片默认是基线对齐，会导致图片底侧和边框会有空隙；可以设置为其他属性，可以解决；图片

1. 文本溢出隐藏显示省略号：
   • 单行文本溢出 > 强制一行显示 wihte-space: nowarp

代码语言：txt复制

	> 超出部分隐藏 overflow: hidden
	> 文字用省略号代替 text-overflow: ellipsis;
	

代码语言：txt复制

- 多行文件溢出：
	> 在单行下添加如下属性：适用于webkit内核浏览器 

代码语言：txt复制

		display: -webkit-box;

代码语言：txt复制

        -webkit-line-clamp: 2;

代码语言：txt复制

        -webkit-box-orient: vertical;

• CSS三角形问题：

代码语言：txt复制

> css画三角形主要通过边框的宽度和颜色进行设置；
> 盒子宽度和高度为0
> 边框设置不同的宽度和颜色，获取不同的三角形

代码语言：txt复制

代码如下：

.vvv {

代码语言：txt复制

    display: block;

代码语言：txt复制

    width: 0;

代码语言：txt复制

    height: 0;

代码语言：txt复制

    margin: 0 auto;

代码语言：txt复制

    border-top: 50px solid transparent;

代码语言：txt复制

    border-right: 20px solid red;

代码语言：txt复制

    border-bottom: 0px solid red;

代码语言：txt复制

    border-left: 0px solid red;

代码语言：txt复制

  			/ _简写如下：_/

  			border-style: solid;

代码语言：txt复制

    border-color: transparent red transparent transparent;

代码语言：txt复制

    border-width: 50px 20px 0 0;

代码语言：txt复制

}

• CSS初始化： > CSS初始化是指重设浏览器的样式，解决兼容性问题；

代码语言：txt复制

> 基本上在编写CSS之前都需要进行初始化；
> 	CSS初始化代码基本通用；

CSS初始化代码：

代码语言：txt复制

待编码

css iconfont space 表单 技巧

0 人点赞