- A+
所属分类：Web前端
1 元素的显示与隐藏
1.1 display（使用较多，配合js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用广泛）
- display:none 隐藏（先隐藏元素，不保留位置）
- dispaly:block 除了转换成块级元素以外，还可以显示元素。
1.2 visibility
- visibility:hidden 隐藏（先隐藏元素，保留位置）
- visibility:visible 显示
1.3 overflow（可以清除浮动，保证盒子里面的内容不会超出盒子范围）
- overflow:hidden 溢出隐藏，超出盒子大小部分隐藏。
- overflow:scroll 显示滚动条 不会超出盒子大小，内容可以显示全。总是会显示
- overflow:auto 如果超出就显示滚动条，如果不超出就不显示滚动条。
2 CSS用户界面样式
2.1 鼠标样式cursor
- cursor:default 白色箭头
- cursor:pointer 小手
- cursor:move 移动
- cursor:text 文本
- cursor:not-allowed 禁止
2.2 轮廓 outline
- outline:0 outline:none
2.3 防止拖拽文本域 resize
- resize:none
3 vertical-align 垂直居中（只针对行内元素、行内块元素垂直居中）
- vertical-align:baseline | middle |top | bottom
3.1 图片、表单和文字对齐
- <img src="#" class="img" >对齐居中的文字 .img{vertical-align:middle;}
3.2 去除图片底部空白样式
- 默认是基线对齐，所以底部有空白缝隙。改为不是基线对齐vertical-align:bottom | top | middle
- 块级元素对vertical-align无效，所以不会有基线对齐的问题 display:block
4 溢出的文字用省略号显示
- 先强制一行内显示文本white-space:nowrap 除遇到<br> white-space:nomal(文字显示不开时，自动换行)
- 超出部分进行隐藏 overflow:hidden
- 文字溢出用省略号替代 text-overflow:ellipsis
5 CSS精灵技术（sprite）为了有效的减少服务器接收和发送请求的次数，提高页面加载的速度。
- background-image
- background-repeat
- background-position 精确测量每个背景图片的大小和位置 值为负值（x,y）
5.1 制作精灵图
- 精灵图上放的都是背景图片，插入图片不能往上放。
- 我们可以横向摆放，也可以纵向摆放，但是需要留有空隙。
- 在精灵图的最底端，留有空隙，方便再次添加精灵图。
6 滑动门
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部文本内容，可用性更强。最常见用于各种导航栏的滑动门。
- 经典布局
- <a href="#">
- <span>导航栏内容</span>
- </a>
- a设置左侧背景 padding撑开合适的宽度
- span设置右边背景 padding撑开合适的宽度 其余由文字继续撑开宽度
- 因为整个导航栏都是链接，所以a要包含span。
- 因为是滑动门，左右推拉，跟文字内容多少有关系，此时需要用到文字撑开盒子，就要用到行内块元素。
- a{display:inline-block;height}
7 拓展
7.1 margin负值之美
- 负边距+定位：水平垂直居中 一个绝对定位的盒子，利用父级盒子的50%，然后减去自己宽度的一半，可以实现盒子的水平垂直居中。
- 突显某个盒子
- margin-left:-1px margin-top:-1px
- div:hover{border:1px solid blue; } 变色后，会压住盒子边缘
- 保证盒子为定位（相对定位），才会压住浮动和标准流。定位的盒子通过Z-index实现层级关系
7.2 CSS三角形之美
- width:0;
- height:0;
- border-top:10px solid red;
- border-right:10px solid transparent;
- border-left:10px solid transparent;
- border-bottom:10px solid transparent;
- 简写为：
- width:0;
- height:0;
- border-style:solid;
- border-width:10px;
- border-color:red transparent transparent transparent;
- font-size:0;
- line-height:0;
可以模拟三角形效果，只保留一个边框，其他都改为透明色。font-size ling-height 照顾低版本浏览器兼容性
