CSS高级技巧及新增属性-EW帮帮网

CSS高级技巧及新增属性

@jarringslee

文章目录

- CSS高级技巧及新增属性
- - 精灵图 Sprite
  - 字体图标 iconfont
  - CSS几何图形的写法
  - 更改鼠标样式
  - 更改表单轮廓
  - 取消文本域的拖拽
  - 行内块元素的垂直居中对齐
  - 溢出文字处理
- CSS布局技巧
- CSS5新增内容及其他属性
- - 新增选择器
  - 新增基础属性及其他属性
  - calc函数
  - transition过渡属性
  - 2D转换效果
  - 动画效果
  - 3D转换效果

精灵图 Sprite

为减少 HTTP 请求（减少服务器接受和发送请求的次数），加快页面加载速度，在部分场景下优化图片切换效果，出现CSS精灵技术（也称CSS Sprites、CSS雪碧）

**核心原理：**将网页中的一些小背景图整合到一张大图中，这样服务器只要一次请求接可以了。

精灵图的使用

将所有背景小图标整合到一张大图中，使用时，利用背景属性background-position移动图片位置，使需要的小图标能在特定的位置显示出来。

移动的距离就是目标图标的x和y坐标。
因为一般情况下都是向左和上移动，所以值一般为负值。
使用精灵图时需要精确测量每个小图标的大小和位置。

代码示例：

.box{
    width: 60px;
    height: 60px;   /*计算好小图标的宽和高*/
    margin: 100px auto;    /*小图标需要被放在父元素的什么位置*/
    background: url(#);  
    background-position: -180px -20px;    /*精灵图需要移动的距离*/
    	最后两步（背景图属性）可以简写：background: url(#) -180px -20px;
}

字体图标 iconfont

网页中一些文字或者按钮前面一般会跟一个小图标（如定位的大头针、照片的小相机等）

使用精灵图的弊端：

图片文件还是比较大的；
图片本身放大或者缩小会是真；
图片制作完毕后想要更换会比较复杂。

使用字体图标的优点：

轻量级：图标字体内存比图片小，一旦字体加载出来了，图标马上就会被渲染出来，减少服务器请求；
灵活性：其本质为文字，可随意改变颜色、大小等属性；
**兼容性：**几乎支持所有浏览器。

如果碰到结构样式比较复杂的图标，还是得用精灵图。

使用字体图标：

可以直接从网上下载到网页常见的小图标；

常见字体库：
- 国外的：http://icomoon.io/
- 阿里巴巴的：https://www.iconfont.cn/
引入到html界面中；

选好图标下载之后进行解压，解压后选择文件中的font文件夹（内包含.ttf、.woff等四种字体格式，兼容大多数浏览器）并将其复制到html文件的根目录中（与html文件平级）。
可以添加新的图标

这玩意应该考核不会考吧，等我后面有时间了再慢慢看看。

CSS几何图形的写法

绘制基础三角形

设置一个宽和高都为0的盒子并设置实线边框并设置透明色，随后给其中一个边的边框添加颜色。

.box {
  width: 0;
  height: 0;    /*宽和高都为0*/
  line-height:0;
  font-size:0;    /*这两行解决兼容问题*/
  border: 50px soild transparent;
  border-left-color:blue;
}

给盒子添加外接小三角形

绘制好一个普通盒子，再绘制好小三角形，用定位的方式将小三角形拼接在盒子上。

在方块右上方拼一个小三角形：
<style>
    .box{
        position: relative;
        width: 120px;
        height: 200px;
        background-color: pink;
    }
    .box span{
        position: absolute;;
        right:15px;
        top:-10px;
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
        border: 5px soild transparent;
        border-bottom-color: pink;
    }
</style>
<html>
    <div class="box">
        <span></span>
    </div>
</html>

直角三角形

只给盒子的两个相邻边上色，其它两边透明，就能得到一个直角三角形。例如左下直角：

/* 左下直角三角形 */
.right-angle {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border: 80px solid transparent;       /* 四边都先设为透明 */
  border-right-color: #4CAF50;           /* 右边上色 */
  border-top-color: #4CAF50;             /* 上边也上色 */
  /* 上色的两条边夹角就是 90° */
}

如果想要其它直角位置，只需把上色的两条边换到对应方向即可，例如右上直角：

/* 右上直角三角形 */
.right-angle-topright {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border: 80px solid transparent;
  border-left-color: #F44336;  /* 左边上色 */
  border-bottom-color: #F44336;/* 下边上色 */
}

非等腰直角三角形

任意相邻两个边框给不一样的值，其余两个边框为0，只保留其中一个赋了值的边框的颜色，另外一个边框透明。

.angle{
  width: 0;
  height: 0;    
  line-height:0;
  font-size:0;
    /*保留两个边的值且不相同*/
  border-width: 100px 50px 0 0;
    /*实线*/
  border-style: solid;
	/*只给一个边上色*/  
  border-color: transparent red transparent transparent;
}

等边三角形

等边三角形每条边相等，内角均是 60°。常用“左右透明、中间有色”做法：

/* 向上等边三角形 */
.equilateral {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border-left: 60px solid transparent;   /* 左半边透明 */
  border-right: 60px solid transparent;  /* 右半边透明 */
  border-bottom: 104px solid red;     /* 底边着色，高≈60×√3/2≈51.96，双层合成约104px */
}

如果想要“向下”等边三角形，把 border-bottom 换成 border-top 即可。

平行四边形

平行四边形不需要“border hack”，只靠 skew() 倾斜即可：

.parallelogram {
  width: 200px;
  height: 100px;
  background-color: #FF9800;
  transform: skew(-20deg);  /* 倾斜20° */
  /* 如果里面有文字，需要再反向 skew 保持水平 */
}
.parallelogram .content {
  transform: skew(20deg);
}

梯形

梯形在上下边长不同时，用上下边不同宽度的 border：

.trapezoid {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border-bottom: 100px solid #9C27B0;  /* 主色底部 */
  border-left: 40px solid transparent; /* 左侧斜边 */
  border-right: 80px solid transparent;/* 右侧斜边 */
}

上底为 border-bottom 颜色条上方两侧透明 border 的宽度差：
上底长度 = （border-left + border-right） – 左右透明宽度之差（这里 80–40 = 40px）。

更改鼠标样式

属性：cursor

属性值	样式
fefult	默认样式
pointer	小手
move	移动
text	文本
not-allowed	禁止

更改表单轮廓

属性：轮廓线outline

outline:0 或者 outline:none 可去掉默认的蓝色边框

outline-color 更改表单轮廓的颜色
outline-style 更改表单轮廓线样式（none / solid / dashed / dotted…）
outline-width 更改表单轮廓线宽度（数字+px / medium / thin / thick）
复合属性：outline:颜色（空格）样式（空格）宽度（空格）

取消文本域的拖拽

属性值：resize 用textarea{ resize:none; }取消拖拽性。

行内块元素的垂直居中对齐

属性值：vertical-align

用于设置一个元素（图片、表单、文字等）的垂直对齐方式，只对行内元素或行内块元素有效。

属性值	样式
baseline	(默认样式)元素放置在父元素的基线上
top	元素最顶端对齐
middle	元素中部对齐（垂直居中对齐）
bottom	元素最底端对齐

应用：解决图片底部缝隙问题

方法一：用div包裹的图片在默认情况下会给底部留有一定缝隙，因为默认基线对齐的情况下会留有字母（p、j、g等）超出基线触碰底线的余地。我们可以通过修改对齐方式来解决这个问题。

方法二：：把图片转为块级元素display:block;，但是图片独占一行，可能会影响布局。

溢出文字处理

文本溢出时，一般用省略号替代。

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

强制让文本在一行内显示：

write-space:nowrap;（默认为normal：自动换行）
超出部分隐藏：

overflow:hidden;
文字省略号代替超出部分：

text-overflow:ellipsis;(默认为normal：自动换行)

多行文本溢出显示省略号：

多行文本溢出显示省略号，有较大兼容性问题，适合于WebKit浏览器或移动端（移动端大部分是WebKit内核）。同时，需要严格控制盒子高度。

超出部分隐藏：

overflow:hidden;
使用WebKit的弹性盒子模型：

display: -webkit-box;
限制在一个块元素显示的文本的行数为n行：

-webkit-line-clamp: (数字，无单位);
设置子元素的排列方式为垂直排列：

-webkit-box-orient: vertical;

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

CSS布局技巧

margin负值的运用

一行紧挨排列的盒子如果有边框线，那么相邻边框线会紧挨，看起来就会比较粗。

解决方法：设置盒子margin值为负值（边框宽度为1px，那就设值为-1px），边框就会重合，看起来更美观。这样子理论上每个盒子都往左边移了一点，看似起不到作用，但实际上每移一个盒子后面的都会调整，会多移一点。

如果想要设置悬停时显示边框的效果，那么被重合在底下的边框将会被压住无法显示。

解决方法：设置hover悬停效果的时候，可以添加相对定位，此时当前盒子就会压住标准流的普通盒子。如果都有相对定位，则可以设置当前盒子的层级z-index。

浮动设置文字环绕效果

这是浮动的特性，也是浮动的本质。

行内块的巧妙运用

运用多个行内块创建视频网站下方翻页小方块。

   <style>
        .big{
            position: relative;
            width: 640px;
            height: 288px;
        }
        .big .pic img{
            
            width: 100%;
        }
        .box{
            font-size: 10px;
            bottom:5px;
            left:95px;
            position: absolute;
            text-align: center;
        }
        .box a{
            display: inline-block;
            width: 25px;
            height: 25px;
            background-color: #e8e8e8;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 25px;
            text-decoration: none;
            font-size: 10px;
            
        }
        .box .long{
            width: 65px;
        }
        .box .none{
            background-color: #fff;
            border: none;
        }
        .box input{
            box-sizing: border-box;
            font-size: 10px;
            height: 25px;
            width: 50px;
            outline: none;
        }
        .box button{
            font-size: 10px;
            height: 25px;
            width: 35px;
        }
</style>
<body>
    <div class="big">
        <div class="pic"><img src="#" alt=""></div>
        <div class="box">
            <a href="" class="long">&lt;&lt;上一页</a>
            <a href="">1</a>
            <a href="" class="none">2</a>
            <a href="">3</a>
            <a href="">4</a>
            <a href="">5</a>
            <a href="">6</a>
            <a href="" class="none">...</a>
            <a href="" class="long">&gt;&gt;下一页</a>
            到第
            <input type="text">
            页
            <button>确定</button>
        </div>
    </div>
</body>

CSS5新增内容及其他属性

新增选择器

新增了属性选择器、伪类选择器、结构伪类选择器和伪元素选择器。上面写过了。

新增基础属性及其他属性

border-box 介绍过了。
滤镜filter：将图片进行模糊、颜色偏移等处理。

filter:函数（数值） 例如filter:blur(5px) 数值越大越模糊。
opacity:透明度（0~100%）。

calc函数

calc()在声明属性值时可以进行一些（跨单位的）计算

例如：我们希望子盒子的宽度永远比父盒子小30像素：.son{ width: calc(100% - 30px); }

transition过渡属性

元素从一个状态改变至另一个状态时，添加该属性以达到动画效果。

transition: 需要过度的属性（空格）花费时间（空格）运动曲线（可不写，默认ease）（空格）延迟开始时间（可不写，默认0s）;

谁做过度给谁加。

花费时间和延迟时间单位都是秒s，有值的话必须写单位；

运动曲线：

默认ease逐渐减速；
linear匀速；
ease-in加速；
ease-out减速；
ease-in-out先加速后减速。

例如，我们想给div在鼠标悬停时做动画增宽效果：

div {
    width: 200px;
    height: 100px;
    background-color: pink;
    transition: width .5s ease 1s;
}

div:hover {
    width: 400px;
}

为什么放在div标签中，而不是放在hover中：

放在基础选择器中：过渡效果会在状态变化时（进入和退出悬停状态）都生效。
放在 :hover 伪类中：过渡效果只会在进入悬停状态时生效，移出悬停状态时不会应用过渡效果。

想要一次改变多个属性：

/*改变几个特定属性，用逗号隔开：*/	
transition: width .5s, height .5s；/*后面两个值可以省略*/
/*改变全部属性，直接写all：*/
transition: all .5s;

2D转换效果

转换transform可以实现元素变形效果。

translate 移动

基础语法：默认直接变换位置
```
transform:translate(x,y); /*分别代表水平和垂直位置移动的的距离（像素或百分比），不移动用0占位。*/
/*或者分开写：*/
transform:translateX(数值);
transform:translateY(数值);
```
百分比值是按照盒子本身的宽度/高度计算；

translate最大的优点是不脱标，保留原来位置，不会影响到其他元素；

translate对行内元素无效。

应用：让盒子水平居中

让小盒子p在大盒子div中垂直居中：

div{
	position: relative;
	height: 500px;
	width: 500px;
}
p{
	position: absolute;
	top:50%;
	left:50%;
	width: 200px;
	height: 200px;
	transform: translate(-50%, -50%);/*减去自身值的一半*/
}

rotate 旋转

让元素在二维平面内旋转。

transform:rotate(度数，单位为deg);

正值为顺时针旋转，负值为逆时针旋转，默认旋转中心为元素的中心点。

设置转换的中心点transform-orign:（在元素本身中添加）

transform-orign:x y;横轴 / 纵轴，可以为百分比（默认50% 50%，按元素自身大小计算）、像素值、方位名词（sctop \ bottom \ left \ right \ center）

实例：盒子旋转上来（只有一个div父元素，子元素用伪元素写：.father::before）
```
.father{
	width: 200px;
	height: 200px;
	background-color: pink;
	border:palevioletred;
	margin:50px auto;
	overflow: hidden;
}
.father::before{
	content:"ljl";
	width: 100%;
	height: 100%;
	display: block;
	background-color: hotpink;
	transform: rotate(120deg);
	transform-origin:left bottom;
	transition: all 0.3s;	
}
.father:hover::before{
	transform: rotate(0);
}
```
scale 缩放

控制元素放大 / 缩小。

transform:scale(x,y);
- 属性值为纯数字，表示缩放的倍数，用逗号分隔！！
- （1,1）相当于没有效果；
- 只写一个参数默认x和y都是该参数；
- 比1小为缩小效果（0.5,0.5）；
- 可以设置转换中心点transform-orign进行缩放（默认为元素中心）；
- 不影响其他盒；
应用：鼠标经过商品图片时图片在盒子内部放大（超出部分overflow:hidden;）；鼠标经过翻页小按钮时按钮和页码一起放大。

2D转换综合写法：

同时使用多个转换，其格式为：transform:translate() rotate() scale()...;

顺序会影响转换效果：先旋转的话会改变坐标轴方向。如果需转换位移，位移应放在最前面。

动画效果

使用步骤：1. 先定义动画； 2. 再调用动画。

先用@keyframes定义动画：

@keyframes 动画名称 {
	0% { width:10px; }
	50% { width:80px; }
	100% { width:100px; }
}
/*如果只定义了0%和100%的效果，可以用from to替代：*/
@keyframes 动画名称 {
	from { width:10px; }
	to { width:100px; }
}

再在元素中调用：

div{
	width:200px;
	height:200px;
	margin:100 auto;
	/*调用动画*/
	animation-name:动画名称;
	/*持续时间*/
	animation-duration:持续时间;
}

动画的相关属性：

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了animation-play-state属性。
animation-name	规定@keyframes动画的名称。（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function	规定动画的速度曲线，默认是“ease”。
animation-delay	规定动画何时开始，默认是0。
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite无限循环。
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal”，还有alternate逆向播放。
animation-play-state	规定动画是否正在运行或暂停，默认是“running”，还有“pause”。可以利用这个属性在鼠标悬停时暂停动画。
animation-fill-mode	规定动画结束后状态，回到起始：返回backwards，停留至结束状态：保持forwards。

动画属性简写

animation:动画名称持续时间运动曲线何时开始播放次数是否反向起始或结束状态;

简写属性不包含animation-play-state暂停属性
想要动画走回来，而不是直接跳回来：

animation-direction:alternate;
想要动画结束后停在结束位置：

animation-fill-mode:forwards;

速度曲线函数animation-timing-funcation

属性值：

默认ease逐渐减速；
linear匀速；
ease-in加速；
ease-out减速；
ease-in-out先加速后减速；
steps()指定了时间函数中的间隔数量（步长，一步一步地走，分几步来完成动画）。

3D转换效果

X轴水平向右
Y轴竖直向下
Z轴指向屏幕外

3D移动transform: translate3d(x, y, z);

单位为像素，几乎不用百分比，代表三个轴的移动距离，不能省略（如果没有就用0占位）。

也可以分开写：

例如 transform:translateX(100px);

或者 transform:translateX(100px) translateY(100px) translateZ(100px);

z轴移动的效果呈现需要借助透视 perspective:

也称视距（模拟人眼到屏幕的距离），在二维平面产生近大远小的视觉立体效果，单位为像素，数值越大，成像越小。

透视需要写在被观察元素的父盒子上面（也可以是body）。

3D旋转rotate

判断顺逆方向：左手法则：大拇指朝向该轴正方向，手指弯曲方向就是顺时针。

transform: rotateX(45deg); (左手准则判断顺逆磕头就是负值)
transform: rotateY(45deg); (左手准则)
transform: rotateZ(45deg);
transform: rotate3d(x值， y值，z值，度数)

沿着自定义的轴旋转一定角度。

数字可以不带单位：矢量和方向。例如（1,1,0,35deg），即沿着对角线顺时针旋转35度。

3D呈现效果transform-style: preserve-3d;

控制子元素开启3D空间环境。默认值为flat，平面环境。

写在父级元素中，只会影响子盒子。

应用：

风车式翻转盒子
两面翻转盒子

CSS高级技巧及新增属性