CSS快速记忆笔记（五）

知识点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快速记忆笔记（五）

猜你喜欢