CSS3常用

CSS高级技巧

字体图标

由于精灵图的缺点：

1.图片文件还是比较大

2.图片本身放大和缩小会失真

3.一旦图片制作完毕要更换非常复杂

此时有一种技术出现，就是字体图标iconfont，他展示的是图标，本质是字体

优点：

• 轻量级
• 灵活性
• 兼容性

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

字体图标的追加：把压缩包里的selection.json重新上传，然后选中自己想要的新图标，重新下载压缩包，并替换原来的文件即可

CSS三角

​ .box1 {

​ width: 0;

​ height: 0;

​ border: 10px solid transparent;

​ border-bottom-color: pink;

​ margin: 10px auto;

​ }

界面样式

鼠标样式

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

格式：

li｛cursor:pointer;｝

属性值	描述
default	小白（默认）
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线 outline

给表单添加outline：0；或者outline：none；样式之后，就可以去掉默认的蓝色边框

格式：

input｛outline：none；｝

防止拖拽文本域resize

实际开发中，我们的文本域右下角是不可以拖拽的

格式：

textarea{resize:none;}

vertical-align属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐

语法：

vertical-align：baseline|top|middle|bottom

值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素的顶端和行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

图片底端空白缝隙解决方案

解决方案：

1.给图片一个vertical-align:middle|top|bottom等。（推荐使用）

2.把图片转化为块元素：display:block;

文字溢出省略号显示

单行文字溢出省略号显示

满足条件：

1.先强制一行显示文本

white-space:nowrap;

2.超出部分隐藏

overflow:hidden;

3.文字用省略号代替超出的部分

text-overflow:elipsis;

多行文字溢出省略号显示

overflow：hidden；

text-overflow:ellipsis;

弹性伸缩盒子模型显示

display:-webkit-box;

限制在一个块元素显示的文本行数

-webkit-line-clamp 2;

设置或检索伸缩盒对象的子元素排列方式

-webkit-box-orient:vertical;

布局技巧

margin负值运用

1.让每个盒子的margin往左侧移动-1px，正好压住相邻盒子边框

2.鼠标经过某盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位，如果有定位，则加z-index）

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

浮动的元素不会压住文字的特性

行内块元素的巧妙运用

行内块元素中间自动有一段距离

CSS三角强化

​ div｛ border-color: transparent red transparent transparent;

​ border-style: solid;

​ border-width: 100px 50px 0 0；｝

CSS初始化

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

CSS3的新特性

新增属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att=“^val”]	匹配具有att属性且值以val开头的E元素
E[att$=“val”]	匹配具有att属性且值以val结尾的E元素
E[att*=“val”]	匹配具有att属性且值中含有val的E元素

类选择器，属性选择器，伪类选择器，权重为10

新增的结构伪类选择器

结构伪类选择器主要是根据文档结构来选择其元素，常用于根据父级选择器里面的子元素

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个E元素
E:nth-child（n）	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

区别：

前三个是先看次序，在看选择名

后三个是先看选择名排序，后在用次序

nth-child(n)选择某个父元素的一个或多个特定的子元素

• n可以是数字，关键字和公式
• n如果是数字，就是选择第n个子元素，里面数字从1开始
• n可以是关键字，even偶数，odd奇数
• n可以是公式，常见公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

公式	取值
2n	偶数
2n-1	奇数
5n	5，10，15…
n+5	从第5个开始
-n+5	前五个

伪元素选择器

伪元素选择器可以帮助我们利用css创建新标签元素，而不需要html标签，从而简化html结构

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

• before和after创建一个元素，但是属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
• 语法：element::before{}
• before和after必须有content属性
• before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重为1

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定content-box,border-box,这样我们计算盒子的大小的方式就发生了改变

可以分为两种情况：

1.box-sizing:content-box盒子大小为width+padding+border(以前默认)

2.box-sizing:border-box盒子大小为width

如果盒子模型我们改为border-box,那=padding和border就不会撑大我们的盒子（前提是padding和border不会超过width宽度）

CSS3其他特性

CSS滤镜filter：

filterCSS属性将模糊或颜色偏移等图片效果应用于元素。

语法：

filter:函数（）； 例如：filter:blur(5px); blur模糊处理，数值越大越模糊

CSS3calc函数：

calc（）此css函数让你在声明css属性值时执行一些计算

width:calc(100%-80px);

括号里面可以使用±*/来进行计算，运算符的左右都要留空格

CSS3过渡

语法：transition:要过渡的属性 花费的时间 运动的曲线 何时开始

1.属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以。如果所有属性都要变化过渡，写一个all就可以

2.花费时间：单位是秒（必须写单位）比如 0.5s

3.运动曲线：默认是ease（可以省略）

4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）

口诀：谁来过渡给谁加

2D转换

转换(transform)：是CSS3中具有颠覆性的特征之一，可以实现元素位移，旋转，缩放等效果

• 移动：translate
• 旋转：rolate
• 缩放：scale

移动translate

transtale:可以改变元素在网页中的位置，类似定位

语法：

transform:translate(x,y);或者分开写

transform:translateX(n)

transform:translateY(n)

重点：

• 定义2D转换中的移动，沿着X和Y轴移动
• translate最大的优点：不会影响到其他元素的位置
• translate中的百分比单位是相对自身元素的translate:(50%,50%)
• 对行内标签没有效果

旋转rotate

2D旋转指的是让元素在2维平面内顺时针旋转或逆时针旋转。

语法：

transform:rotate(度数)

重点：

• rotate里面跟着的度数，单位是deg，比如rotate（45deg）
• 度数为正时，顺时针，负时，逆时针
• 默认旋转中心是元素的中心点

设置旋转中心点

语法：

transform-origan:x y;

重点：

• 注意后面的参数x和y用空格隔开
• xy默认转换的中心点是元素的中心点（50%，50%）
• 还可以给xy设置像素，或者方位名词（top bottom left right center）

缩放 scale

scale:只要给元素加上这个属性就能控制他的大小

语法：

transform:scale(x,y);

注意：

• 注意其中的x和y用逗号隔开
• transform:scale(1,1):宽和高都放大了一倍，相对于没有放大
• transform:scale(2,2):宽和高都放大了两倍
• transform:scale(2）：只写一个参数，第二个参数则和第一个参数一样，相当于scale（2，2）
• transform:scale(0.5,0.5):缩小
• scale缩放最大的优势：可以设置转换中心点的缩放，默认以中心点缩放的，而且不影响其他盒子

2D转化综合写法

注意：

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

2.其顺序会影响转换效果（先旋转会改变坐标轴方向）

3.当我们同时有位移和其他属性时，记得要将位移放到最前

CSS3动画

动画相对过渡可以实现更多的变化，更多控制，连续播放等效果

动画的基本使用

制作动画分两步：
1.定义动画

2.再使用动画

1.用keyframes定义动画（类似定义选择器）

语法：

@keyframes 动画名称｛

0%｛

​ width:100px;

｝

100%{

​ width:200px;

}

｝

动画序列：

• 0%是动画的开始，100%是动画的完成。这样的规则是动画序列
• 在@keyframes中规定某项CSS样式，我就创建由当前样式逐渐改为新样式的动画效果
• 动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数
• 请用百分比来规定改变发生的时间，或用关键此次‘from’和‘to’，等同于0%和100%

2.元素使用动画

div{

width:200px;

height:200px;

background-color:aqual;

margin:100px 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-coont	规定动画被播放次数，默认是1.还有infinite
animation-diretcion	规定动画在下一周期逆向播放，默认是“normal”，alternale逆播放
animation-paly-state	规定动画是否在正在运行或暂停，默认是“running”，还有“pause”
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

速度曲线细节

值	描述
linear	匀速
ease	默认，动画开始以低速，然后加快，最后结束前速度变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
step()	指定了时间函数中的间隔数量（步长）

动画简写属性

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

语法：

animation: myfirst 5s linear 2s infinite alternate forwards;

注意：

• 简写属性不包括animation-play-state
• 暂停动画：animation-play-state;经常和鼠标经过等其他搭配使用
• 想要动画走回来，而不是直接跳回来：animation-direction:alternate
• 盒子动画结束后，停在结束位置：animation-fill-mode:forwarks

3D转换

3D移动 translate3d

3D移动在2D移动的基础上多加一个可以移动的方向，就是z轴方向

• transfrom:translateX(100px):在x轴移动
• transfrom:translateY(100px):在y轴移动
• transfrom:translateZ(100px):在z轴移动
• transfrom:translate(100px,100px,100px):在x,y,z轴上分别进行移动

透视 perspective

在2D平面产生近大远小视觉立体，但是只是二维的

• 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
• 模拟人类视觉位置，可认为安排一只眼睛去看
• 透视我们也称为视距，视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小
• 透视单位是像素

透视写在被观察元素的父盒子上面

3D旋转 rotate3d

3D旋转可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

语法：

• transfrom:rotateX(45deg):沿着x轴正方向旋转45度
• transfrom:rotateY(45deg):沿着y轴正方向旋转45度
• transfrom:rotateZ(45deg):沿着z轴正方向旋转45度
• transfrom:rotate3d(x,y,z,45deg):沿着自定义轴正方向旋转45度

3D呈现transform-style

• 控制子元素是否开启三维立体环境
• transform-style:flat子元素不开启d立体空间，默认的
• transform-style:preserve-3d;子元素开启立体空间
• 代码交给父级，但是影响的是子盒子

浏览器私有前缀

• -moz-：代表firefox浏览器私有属性
• -ms-：代表ie浏览器私有属性
• -webkit-：代表safari，chrome私有属性
• -o-：代表Opera私有属性

TDK三大标签

title网页标头

格式：网页名字-网页简单介绍30字以内

例子：<title>品优购商城-正品低价、品质保障、配送及时、轻松购物！</title>

description网页作用主要介绍

<meta name="description"
    content="品优购-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />

keywords搜索关键字

logo seo 优化

1.logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要

2.h1里面再放一个连接，可以是返回首页的，把logo的背景图片给链接即可

3.为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来

• 方法1：text-indent移到盒子外面（text-index：-999999px），然后overflow：hidden，淘宝做法
• 方法2：直接给font-size：0；就看不到文字了，京东做法

4.最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了