css-高级技巧
1. 元素的显示与隐藏
- display 显示(重点)
- display 设置或检索对象是否及如何显示。
display: none 隐藏对象
display:block 除了转换为块级元素之外,同时还有显示元素的意思。
- 特点: 隐藏之后,不再保留位置。 - visibility 可见性 (了解)
- 设置或检索是否显示对象。
visibility:visible ; 对象可视
visibility:hidden; 对象隐藏
- 特点: 隐藏之后,继续保留原有位置。(停职留薪) - overflow 溢出部分隐藏
- 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉
auto 超出自动显示滚动条,不超出不显示滚动条
scroll 不管超出内容否,总是显示滚动条 - 显示与隐藏总结
2. CSS用户界面样式
- 鼠标样式 cursor
- 轮廓线 outline
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少,我们平时都是去掉的。 li
去除轮廓线的写法
outline: 0;
outline: none;
outline-style:none; - 防止拖拽文本域resize
提示内容 - 用户界面样式总结
3. vertical-align 垂直对齐
- 图片、表单和文字对齐
vertical-align:middle; - 去除图片底侧空白缝隙,
就是图片底侧会有一个空白缝隙。
- 原因:
图片或者表单等行内块元素,他的底线会和父级盒子的基线baseline对齐。
- 解决的方法就是:
给img图片vertical-align: top |middle | bottom等等。 让图片不要和基线对齐。
常用
vertical-align: top
4. 溢出的文字省略号显示
- white-space
white-space:normal ;默认处理方式
white-space:nowrap ; 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。 - text-overflow 文字溢出
设置或检索是否使用一个省略标记(…)标示对象内文本的溢出
text-overflow : clip ;不显示省略标记(…),而是简单的裁切
text-overflow:ellipsis ; 当对象内文本溢出时显示省略标记(…)
注意:
一定要首先强制一行内显示,再次和overflow属性 搭配使用 - 总结三步曲
/1. 先强制一行内显示文本/
white-space: nowrap;
/2. 超出的部分隐藏/
overflow: hidden;
/3. 文字用省略号替代超出的部分/
text-overflow: ellipsis;
5. CSS精灵技术(sprite) 重点
- 为什么需要精灵技术
为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。 - 精灵技术讲解
- 精灵技术使用的核心总结
首先我们知道,css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术的。
1. 精确测量,每个小背景图片的大小和 位置。
2. 给盒子指定小背景图片时, 背景定位基本都是 负值。 - 制作精灵图(了解)
6. 滑动门
- 滑动门出现的背景
- 核心技术
核心技术就是利用CSS精灵(主要是背景位置)和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。
因为整个导航栏都是 链接 所以 a 要包含 span
a 是 设置 左侧 背景 (左门)
span 是设置 右侧 背景 (右门)
7. 拓展@
- margin负值之美
负边距+定位:水平垂直居中
应用场景:相邻的盒子,共用边框 - CSS三角形之美
1. 我们用css 边框可以模拟三角效果
2. 盒子的宽度高度为0
3. 我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了
4. 为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;