知识点44:CSS高级技巧---元素的显示与隐藏
①display显示(重点);配合后面js做特效,比如下拉菜单,鼠标经过显示与隐藏。
元素的显示与隐藏:目的就是让一个元素在页面中消失或者显示出来;例如广告。
语法:display:none; 隐藏元素
特点:隐藏元素、不保留位置
语法:display:block;显示元素;除了转换为块级元素之外,同时还有显示元素的意思。
②visibility显示
语法:visibility:hidden,隐藏元素
特点:隐藏之后,但是保留(占有)位置;
语法:visibility:visible;可见的,显示隐藏;
③overflow溢出隐藏(内容)
语法:overflow:hidden;溢出隐藏,超出盒子部分内容隐藏起来
overflow:scroll;显示滚动条,样式太丑了,一般不常用。
overflow:auto;如果超出,就显示滚动条,如果不超出,不显示滚动条,不过依然不常用。
知识点45:用户界面---鼠标样式cursor
设置或检索在对象上鼠标显示的样式图标
鼠标样式:cursor:default默认的,pointer小手(重点常用),move移动,text文本,not-allowed禁止。
知识点46:用户界面---轮廓线outline
是绘制元素外边框的一条线,显示在元素的外围,平时我们都不关心设置多少,因为一般都是去掉的;
语法:outline:0;或者outline:none;
知识点47:用户界面---防止拖拽文本域resize
语法:resize:none;防止用户拖拽文本域。
知识点48:vertical-align垂直对齐
有宽度的块级元素居中对齐,margin :auto;
文字水平居中:text-align:center;
vertical-align:垂直居中,只针对行内元素或者行内块元素
vertical-align:middle;以(文字、图片)中间对齐,谁垂直居中,设置给谁,不能设给父元素。
知识点49:去除图片底片空白间隙
为什么会存在这种情况,因为图片和文字默认的对齐方式是基线对齐,所以底侧有空白间隙。(行内块元素在块级元素中默认是以文字基线垂直对齐的)
解决方法有两种:①将对齐方式改为不是基线对齐;
②这种对齐方式只针对行内和行内块元素,所以可以将img转换为display:block;块级元素不受影响。
知识点50:溢出的文字用省略号取代
①white-space设置或检索对象内文本显示方式,
语法:white-space:normal;正常显示;nowrap强制文本一行内显示。
一般white-space有两种模式:
1、normal 即正常的,也就是默认的;
2、nowrap 即强制文本一行显示,除非遇到br强制换行;
②设置盒子内容超出部分隐藏;overflow:hidden;超出隐藏;
③隐藏文本显示,且带有省略号,必须结合两面两步才可以生效(显示出来省略号)
text-overflow: clip; 文本一行显示,部分省略
text-overflow: ellipsis; 文本一行显示,部分省略,带有省略号……
注意:三步骤必须都要有。
知识点51:文本拆开显示
word-break: break-all; 文本拆开显示
知识点52:CSS精灵技术sprite
为什么需要精灵技术?
用户》访问》浏览器》发送请求》服务器》接受并返回请求页面》浏览器
请求次数太多,服务器接收和反馈的压力很大,为了减少压力,所以采用技术;
知识点53:CSS精灵技术使用核心
不同位置的图片是不一样的,所以要确定他的坐标,故用到background-position;
①用Fw精确测量图片的 “大小”和“位置坐标”;
②给盒子指定小背景图片时,坐标值基本都是负值。
知识点54:制作精灵图(了解)
一般精灵图都是美工做的,精灵图是背景图,不是插入图;
每个精灵图之间最好留有空隙,相同的尽量放在一起;
尽量纵向摆放;
知识点55:滑动门技术
特殊的形状能够自适应元素中文本内容的多少
常用语法a>span,因为整个是链接,所以a包含span;
a是设置左侧背景(左门)
span是设置右侧背景(右门)
因为是滑动门,左右 "推拉",跟文字内容多少有关系,需要文字撑开盒子,此时需要行内块元素(display:inline-block)
CSS快速记忆笔记(五)
最新推荐文章于 2023-09-21 11:36:32 发布