CSS_黑马基础高级技巧

目录

#CSS 用户界面样式

鼠标样式 cursor

轮廓 outline

防止拖拽文本域 resize

#vertical-align垂直对齐

图片和文字对齐 

去除图片底侧空白缝隙

#溢出的文字隐藏

word-break：自动换行

white-space

text-overflow文字溢出

#CSS 精灵技术（sprite）

精灵技术产生的背景

精灵技术本质

精灵技术的使用

制作精灵图

#字体图标（iconfont）

字体图标优点

字体图标使用流程

设计字体图标

上传生成字体包

下载兼容字体包

字体引入到HTML

追加新图标到原来的库里

#滑动门

滑动门出现的背景

核心技术

#before和after伪元素（详解）

#过渡（CSS3）

#2D变形transform （CSS3） 

transform:translate();

transform:scale();

transform：rotate(deg)；

transform-origin

transform：skew(deg，deg)；

3D变形transform （CSS3）

rotateX()

rotateY()

rotateZ()

透视（perspective）

translateX(x)

translateY(y)

translateZ(z)

translate3D(x，y，z)

backface-visibility

#动画（CSS3）animation

#伸缩布局（CSS3）

flex

justify-content 调整主轴对齐

align-items 调整侧轴对齐

flex-wrap 控制是否换行

flex-flow

align-content 堆栈（由flex-wrap产生的独立行）对齐

order

---

#CSS 用户界面样式

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

鼠标样式 cursor

选择器{cursor: pointer; }

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

轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围（和边框不冲突），可起到突出元素的作用

选择器{online：none；}  或者 outline: 0;

一般情况下都是去掉的

防止拖拽文本域 resize

实际开发中，我们文本域（textarea）右下角是不可以拖拽的，使用此属性可以防止火狐、谷歌等浏览器随意拖动文本域

resize: none;

---

#vertical-align垂直对齐

用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效，块级元素无效

图片和文字对齐 

vertical-align : baseline | top | middle | bottom 

通常用来控制图片或表单（行内块元素）与文字的对齐  

去除图片底侧空白缝隙

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1.给图片添加 vertical-align:middle | top| bottom 等，只要不和基线对齐。 （提倡使用的）

2.把图片转换为块级元素 display: block;

---

#溢出的文字隐藏

word-break：自动换行

主要处理英文单词

normal 使用浏览器默认的换行规则

break-all 允许在单词内换行

keep-all 只能在半角空格或连字符处换行

white-space

设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

normal：默认处理

nowrap：强制在同一行内显示所有文本，直到文本结束或者遇 br 标签对象才换行

text-overflow文字溢出

text-overflow：clip / ellipsis；

设置或检索是否使用一个省略标记（...）标识对象内文本溢出

clip：不显示省略标记（...），而是简单的裁切

ellipsis：当对象内文本溢出时显示省略标记（...）

注意一定要首先强制一行内显示，再和overflow属性搭配使用

---

#CSS 精灵技术（sprite）

精灵技术产生的背景

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

精灵技术本质

CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页。这样当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵组。

精灵技术的使用

各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需使用CSS的background-image、background-repeat和background-position 属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

制作精灵图

小图拼合成一张大图

大部分情况下，精灵图是网页美工做

• 精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放
• 精灵图的宽度取决于最宽的那个背景
• 可以横行摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适
• 精灵图最低端，留一片空隙，方便我们以后添加其他精灵图

小公司，背景图片很少的情况没必要用精灵技术，维护成本高。如果背景图片比较多，可以建议使用精灵技术。

---

#字体图标（iconfont）

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的“http请求”，这都会大大降低网页的性能的。更重要的是图片不能进行很好的缩放，因为会失真。很多情况下我们希望图标是可以缩放的，所以引入了字体图标。

字体图标优点

可以做出跟图片一样的效果，改变透明度、旋转度等

本质是文字，可以随意改变颜色、产生阴影、透明效果等

本身体积更小，但携带的信息并没有削减

几乎支持所有浏览器

移动端设备必备

字体图标使用流程