>为了有效减少服务器接收和发送的频率,减轻服务器的压力;将许多的小图片放到一张大图片上去;就是精灵技术,CSS sprites;
> 精灵技术主要针对背景图片, 精灵图就是一张大的背景图片
> 使用时主要移动背景图片位置,使用backgroud-position属性
> 一般情况下都是往上走,往左走,所以backgroud-position的值都是负值
> 字体图标展示的是图标,本质上是文字;可以改变颜色等属性
> 字体图标需要下载,下载地址有很多,推荐https://iconfont.cn/
> input {outline: none};
> 可以使图片,表单和文字对齐,垂直居中
> 只能应用于行内元素和行内块元素;
> vertical-align: baseline | bottom | middle | top |
> 图片默认是基线对齐,会导致图片底侧和边框会有空隙;可以设置为其他属性,可以解决;图片
> 超出部分隐藏 overflow: hidden
> 文字用省略号代替 text-overflow: ellipsis;
- 多行文件溢出:
> 在单行下添加如下属性:适用于webkit内核浏览器
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
> css画三角形主要通过边框的宽度和颜色进行设置;
> 盒子宽度和高度为0
> 边框设置不同的宽度和颜色,获取不同的三角形
代码如下:
.vvv {
display: block;
width: 0;
height: 0;
margin: 0 auto;
border-top: 50px solid transparent;
border-right: 20px solid red;
border-bottom: 0px solid red;
border-left: 0px solid red;
/ _简写如下:_/
border-style: solid;
border-color: transparent red transparent transparent;
border-width: 50px 20px 0 0;
}
> 基本上在编写CSS之前都需要进行初始化;
> CSS初始化代码基本通用;
CSS初始化代码:
待编码
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。