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 : outline-color ||outline-style || outline-width 

但是我们都不关心可以设置多少，我们平时都是去掉的。 li

最直接的写法是 ： outline: 0; 或者 outline: none;

2.3 防拖拽文本域

<textarea  style="resize: none;"></textarea>

3. 垂直对齐

• 有宽度的块级元素居中对齐，是margin: 0 auto;
• 让文字居中对齐，是 text-align: center;

vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，

vertical-align : baseline |top |middle |bottom 

设置或检索对象内容的垂直对其方式。

• 注意：

  vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，

  特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

去除图片空白缝隙

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

就是图片底侧会有一个空白缝隙。

解决

• 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。

• 给img 添加 display：block; 转换为块级元素

4. 溢出文字省略号表示

4.1 white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

white-space:normal ；默认处理方式

white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

4.2 text-overflow

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

text-overflow : clip ；不显示省略标记（...），而是简单的裁切 

text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

注意：

一定要首先强制一行内显示，再次和overflow属性 搭配使用

  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

5. CSS精灵技术（sprite）

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。精灵技术目的：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。

background-image、
background-repeat
background-position属性进行背景定位，
其中最关键的是使用background-position 属性精确地定位。

首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。

1. 精确测量，每个小背景图片的大小和 位置。
2. 给盒子指定小背景图片时， 背景定位基本都是 负值。

6. 滑动门

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。

主要使用css精灵以及padding撑开盒子来实现

a实现左门，用padding撑开，

span实现右门，背景图右对齐，padding撑开

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

7. CSS三角形

用css边框模拟三角形

1. 我们用css 边框可以模拟三角效果
2. 宽度高度为0
3. 4个边框都要写*， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

黑马前端全栈教程