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

2024-01-08 18:41:00

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

文章来源:https://blog.csdn.net/pinbodeshaonian/article/details/135377338
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。