08 css高级
# 1.元素的显示与隐藏 #
## 1.1 display显示 ##
- display 设置或检索对象是否及如何显示。
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
- 特点： 隐藏之后，不再保留位置。
实际开发场景：
> 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
## 1.2 visibility可见性 ##
- 设置或检索是否显示对象。
visibility：visible ; 对象可视
visibility：hidden; 对象隐藏
- 特点： 隐藏之后，继续保留原有位置。（停职留薪）
## 1.3 overflow溢出 ##
| 属性值 | 描述 |
| ----------- | ------------------------------------------ |
| **visible** | 不剪切内容也不添加滚动条 |
| **hidden** | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| **scroll** | 不管超出内容否，总是显示滚动条 |
| **auto** | 超出自动显示滚动条，不超出不显示滚动条 |
实际开发场景：
1. 清除浮动
2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。
# 2.css用户界面样式 #
## 2.1 鼠标样式 ##
- 所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。
- 更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究)
- 表单轮廓等。
- 防止表单域拖拽
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
| --------------- | ---------- |
| **default** | 小白 默认 |
| **pointer** | 小手 |
| **move** | 移动 |
| **text** | 文本 |
| **not-allowed** | 禁止 |
## 2.2 轮廓线 outline ##
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
```css
outline : outline-color ||outline-style || outline-width
```
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是 ： outline: 0; 或者 outline: none;
## 2.3 防止拖拽文本域resize ##
<textarea style="resize: none;"></textarea>
## 3.1 vertical-align 垂直对齐 #
vertical-align :
baseline(基线对齐) |top(顶部对齐) |middle (垂直居中) |bottom
## 3.2 去除图片底侧白边缝隙 ##
- 原因：
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
就是图片底侧会有一个空白缝隙。
- 解决的方法就是：
- 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。<img src="media/1633.png" width="500" style="border: 1px dashed #ccc;" />
- 给img 添加 display：block; 转换为块级元素就不会存在问题了。<img src="media/sina1.png" width="500" style="border: 1px dashed #ccc;"/>
## 4.溢出的文字省略号显示 ##
div {
width: 150px;
height: 25px;
border: 1px solid pink;
/*不允许换行*/
white-space: nowrap;
/*超出不显示*/
overflow: hidden;
/*用省略号代替超出*/
text-overflow: ellipsis;
}
### 4.1 white-space
- white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
~~~
white-space:normal ；默认处理方式
white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
~~~
### 4.2 text-overflow 文字溢出
- 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
~~~
text-overflow : clip ；不显示省略标记（...），而是简单的裁切
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
~~~
css
div {
width: 150px;
height: 25px;
border: 1px solid pink;
/*不允许换行*/
white-space: nowrap;
/*超出不显示*/
overflow: hidden;
/*用省略号代替超出*/
text-overflow: ellipsis;
}
**注意**：
一定要首先强制一行内显示，再次和overflow属性 搭配使用
# 5.css精灵技术 Sprites #
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
我们需要使用CSS的
* background-image、
* background-repeat
* background-position属性进行背景定位，
* 其中最关键的是使用background-position 属性精确地定位。
1. 精确测量，每个小背景图片的大小和 位置。
2. 给盒子指定小背景图片时， 背景定位基本都是 负值。
# 6.滑动门 #
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。
核心要点：
核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
```html
<li> <a href="#"> <span>导航栏内容</span> </a> </li>
```
css样式
css
<style> /*1. a是设置左侧背景 （左门）*/ a { /*因为要撑开盒子。必须要用到行内块元素*/ display: inline-block; height: 33px; background: url(suca/images/to.png) no-repeat; margin: 100px; color: #fff; padding-left:15px; text-decoration: none; } a span { display: inline-block; height: 33px; /*一定注意 span 需要背景图片 右对齐*/ background: url(suca/images/to.png) no-repeat right top; padding-right: 15px; line-height: 33px; } /*2. span 是设置 右侧 背景 右门*/ /*3. 整个导航栏都是 链接 所以 a 包含 span*/ /*4.因为要撑开盒子。必须要用到行内块元素*/ </style>
总结：
1. a 设置 背景左侧，padding撑开合适宽度。
2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
3. 之所以a包含span就是因为 整个导航都是可以点击的。
# 7.拓展 #
## 7.1 margin负值之美 ##
一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。
用外边距实现盒子边框不叠边
margin-top: -1px;
演示 鼠标经过时边框改变颜色
div {
float: left;
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
}
div:hover {
/*使用相对定位让盒子到最前*/
position: relative;
border: 1px solid pink;
}
## 7.2 css三角形 ##
利用不同颜色边框 创建三角形
div {
/*css 边框模拟三角效果*/
width: 0;
height: 0;
/*border-collapse: */
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
border-left: 10px solid red;
border-right: 10px solid #fff;
}
