1. 元素的显示与隐藏
- display 设置或检索对象是否及如何显示。
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。 -
特点： 隐藏之后，不再保留位置。
29none.png
2. visibility 可见性
- 设置或检索是否显示对象。
visibility：visible ; 对象可视
visibility：hidden; 对象隐藏 -
特点： 隐藏之后，继续保留原有位置。
30visibility.png
3. overflow 溢出
- 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
33overflow.png
实际开发场景：
- 清除浮动
- 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。
4. 显示与隐藏总结
| 属性 | 区别 | 用途 |
|---|---|---|
| display | 隐藏对象，不保留位置 | 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 |
| visibility | 隐藏对象，保留位置 | 使用较少 |
| overflow | 只是隐藏超出大小的部分 | 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围 |
CSS用户界面样式
5. 鼠标样式
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
6. 轮廓线 outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。 li
最直接的写法是 ： outline: 0; 或者 outline: none;
7. 防止拖拽文本域resize
34textarea.png
实际开发中，我们文本域右下角是不可以拖拽：
<textarea style="resize: none;"></textarea>
8. vertical-align 垂直对齐
vertical-align 垂直对齐，它只针对于行内元素或者行内块元素
xian.jpg
vertical-align : baseline |top |middle |bottom
- 注意：
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
基线对齐.jpg
1498467742995.png
-
去除图片底侧空白缝隙
35vertical.png
- 原因
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
就是图片底侧会有一个空白缝隙。 - 解决
- 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
- 给img 添加 display：block; 转换为块级元素就不会存在问题了。
9. 溢出的文字省略号显示
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
10. CSS精灵技术（sprite)
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。
jds.png
这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
我们需要使用CSS的
- background-image、
- background-repeat
- background-position属性进行背景定位，
- 其中最关键的是使用background-position 属性精确地定位。
首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。
- 精确测量，每个小背景图片的大小和 位置。
- 给盒子指定小背景图片时， 背景定位基本都是 负值。
11. 滑动门
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。
http://weixin.qq.com/
核心技术
核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
<a href="#">
<span>导航栏内容</span>
</a>
</li>
css样式
* {
padding:0;
margin:0;
}
body{
background: url(images/wx.jpg) repeat-x;
}
.father {
padding-top:20px;
}
li {
padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0 10px;
background: url(./images/to.png) no-repeat left ;
}
a {
padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;
}
li:hover,
li:hover a {
background-image:url(./images/ao.png);
}
总结：
- a 设置 背景左侧，padding撑开合适宽度。
- span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
- 之所以a包含span就是因为 整个导航都是可以点击的。
12. margin负值
-
负边距+定位：水平垂直居中
一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。 -
**压住盒子相邻边框 **
margin.png
13. 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;
}
arr.png
- 我们用css 边框可以模拟三角效果
- 宽度高度为0
- 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
- 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;
14. 字体图标
字体图标下载
- icomoon字库
http://icomoon.io - 阿里iconfont字库
http://www.iconfont.cn/
字体图标的引入
- 选择图标，下载字体包
- 解压，将font文件夹放在项目根目录下
- 在style.css文件中复制字体声明放在自己css中
- 打开demo.html文件复制想要图标的小方框
- 设置字体样式‘font-family’,必须和字体声明中的‘font-family’一样
网友评论