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.当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。