Web网页开发-CSS高级技巧1-笔记

1.display：设置元素隐藏和元素属性转换成块级元素 ? ??
（1）元素隐藏: 本质是让元素完全消失，转换成没有，位置不再保留?
? ? ? ? display: none;
? ? ? ? 元素显示:display:block

? visibility：设置或检索元素是否可见
（2）元素隐藏: 本质上是改变元素的可见性: 隐藏,位置仍然保留
? ? ? ? ?visibility:hidden；
? ? ? ? ?元素可见：visibility:visible；

2.对溢出内容的处理方式
hidden表示让溢出的内容隐藏 ? ? ?visible表示可见，不对溢出内容进行处理 ??
scroll会让盒子出现滚动条? ? ? ? ? ? auto：如果盒子内容溢出，自动出现滚动条

3.光标样式
光标cursor
default：箭头形状
text：文本类型，大写I
pointer:小手形状
move：船锚形状,移动
not-allowed:禁止形状

4.文本区域textarea
resize：是否能够进行拖拽，改变尺寸。
none:不能改变尺寸
both：宽高都可以改变
horizontal:只能水平拖拽
vertical:只能垂直拖拽

5.
字符间距：表示字母或汉字之间的距离
letter-spacing
单词间距：专用于英文，用空格区分单词
word-spacing

6.图片的基线与底线之间有空白间隙
(1) 改变图片的对齐方式
(2) 改变图片的显示模式，转换成块级元素

7.溢出文字省略号显示??

前提是先有宽高
(1) 让文字强制一行显示，不允许自动换行?
white-space: nowrap;
(2) 超出盒子的内容隐藏?
overflow: hidden;
(3) 让隐藏的内容转成省略号
text-overflow: ellipsis;

8.transparent 透明

9.CSS精灵

CSS精灵技术：减少对服务器的请求次数,提高页面的加载速度。

当网页元素需要用到某个图标时，我们需要使用CSS的

• background-image 背景图片

• background-repeat 背景平铺

• background-position 进行背景图定位

精灵图核心：
1.精灵技术主要是针对背景图片的使用，就是把很多小背景图片放在一张大图片种，减少服务器请求（如图片本身就很大，就不建议整合在一起了）。
2.精灵图的使用，最关键的是利用background-position 属性精确地定位到所需小图。移动的距离就是这个目标图片的x和y坐标。
3.当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。