CSS高级技巧
1. 元素的显示与隐藏
1.1 display显示★
-
display: none;隐藏对象，隐藏之后不保留位置 -
display：block;除了转换为块级元素之外，同时还有显示元素的意思。
1.2 visibility可见性
-
visibility：visible;对象可视 -
visibility：hidden;对象隐藏，但保留位置
1.3 overflow溢出★
| 属性值 | 描述 |
|---|---|
| visible | 正常显示 |
| hidden | 超出隐藏 |
| scroll | 总是显示滚动条 |
| auto | 超出显示滚动条 |
2. CSS用户界面样式
2.1 鼠标样式cursor
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
2.2 轮廓线outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。但平时都是去掉的。
<input type="text" style="outline: 0;"/>
2.3 防止拖拽文本域resize
<textarea style="resize: none;"></textarea>
2.4 用户界面样式总结
| 属性 | 用途 | 用途 |
|---|---|---|
| 鼠标样式 | 更改鼠标样式cursor | 样式很多，重点记住 pointer |
| 轮廓线 | 表单默认outline | outline 轮廓线，一般直接去掉，border是边框，我们会经常用 |
| 防止拖拽 | 主要针对文本域resize | 防止用户随意拖拽文本域，造成页面布局混乱，resize:none |
3. vertical-align垂直对齐
- 有宽度的块级元素居中对齐，是
margin: 0 auto; - 让文字居中对齐，是
text-align: center; -
vertical-align垂直对齐，只针对于行内元素或者行内块元素。
（以下属性值指的是如图所指四线）
vertical-align : baseline |top |middle |bottom
3.1 图片、表单和文字对齐
3.2 去除图片底侧空白缝隙
- 原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
- 解决方法： 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
4. 溢出文字省略号显示
4.1 white-space
white-space设置或检索对象内文本显示方式。
-
white-space:normal;默认处理方式 -
white-space:nowrap;强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
4.2 text-overflow文字溢出
-
text-overflow : clip;不显示省略标记（…），而是简单的裁切 -
text-overflow：ellipsis;当对象内文本溢出时显示省略标记（…）
4.3 总结三步曲
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
5. CSS精灵技术（sprite）★
5.1 为什么需要精灵技术
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
5.2 精灵技术讲解
我们需要使用CSS的
background-imagebackground-repeat-
background-position是关键，用来精确地定位。
6. 滑动门
<a href="#"> <!-- a中设置左侧背景 -->
<span>内容</span><!-- span中设置右侧背景 -->
</a>
@拓展
margin负值之美
- 负边距+定位：水平垂直居中
- 压住盒子相邻边框 （堆叠顺序：定位的盒子用z-index；如果想让浮动的盒子选中升起在hover里用position:relative）
CSS三角形之美
div {
width: 0;
height: 0;
line-height:0；
font-size: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid #000;
}
css 边框可以模拟三角效果
- 宽度高度为0
- 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
- 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;