前端入门系列--CSS（6）

截止上篇文章已经基本将css内容全部讲完，本篇文章则讲一些高级的css内容，至于css3则留在后面再说；

1、元素的显示与隐藏

1.1通过display

display：none则是隐藏元素，而将隐藏的元素显示出来则是display：block（其除了转成块元素外还有显示的作用）

该方法使用较多
该方法元素隐藏后不再占有位置

1.2通过visibility

visibility:visible/hidden两个属性值控制元素的显示与隐藏
该方法隐藏后仍然占有位置，使用较少

1.3通过overflow

该属性是针对内容超出盒子后是否进行隐藏等

这个属性之前用来清除浮动

1.4三种方法总结

2、CSS界面样式

## 2.1鼠标样式 当鼠标移动到某标签时，若该标签的css中写了cursor属性，则鼠标的形状会根据设置进行改变：

2.2轮廓线

是元素周围的一条线，如表单等中，其设置如下：

 outline : outline-color ||outline-style || outline-width 

但一般不去关心只将其设置为0即可：

 <input  type="text"  style="outline: 0/none;"/>

2.3防止拖拽文本域

正常的文本域是可以通过拖拽改变其大小的但正常来说我们并不想要该效果，所以通常去掉：

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

3、垂直对齐

之前讲过的对齐方式：

• 有宽度的块级元素居中对齐，是margin: 0 auto;
• 让文字居中对齐，是 text-align: center;
• 让绝对定位的盒子水平居中是先将其移动父盒子的一半再移动本身的一半（在上一篇文章中）

vertical-align 垂直对齐，它只针对于行内元素或者行内块元素（对块级元素不适用）

vertical-align : baseline |top |middle |bottom 

3.1图片、表单和文字的对齐

可以通过三种不同的属性值设置图片和文字的基线、中线、顶线对齐

3.2去除页面底端空白缝隙

父盒子若不给大小直接由其中图片撑开则最下面会有空白缝隙（因为图片或者表单等行内块元素其底线会和父级盒子的基线对齐），若想克服该缺点则将img设置为其他对齐方式

4、溢出文字的省略号显示

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

5、CSS精灵技术

在大型项目中，如果一个网页有很多图片，则进入时需要向服务器多次请求，会增大服务器的负担；而精灵图技术则是将很多的小的背景图片整合成一张大图，我们从服务器获得图片后再进行操作，以此减轻服务器负担。
当我们使用一张精灵图时，需要准确的测量所需图标在大图中的具体位置以及大小，然后设置background-image（所需图标的大小）、background-repeat（不平铺）以及background-position（所需图标在大图中的位置）

6、滑动门效果

按钮有这种凸起和凹下去的效果，但是必须随着字数变化后面的凹陷也变化；

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

上面代码时其中一项的代码，用li来实现左边的弧度而用span来实现右边的弧度，其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);
    }

7、margin负值的应用

1、前面用到的绝对盒子水平居中先走了父元素的一半后再往回走用的是负的margin值
2、两个盒子相邻时，其边框会靠在一起变大，此时将其margin设置为：-边框值则可克服该缺点

8、CSS写三角形

对于三角形，我们除了可以用图片外也可以通过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; 

 }

最后效果图如下：实际中我们只需要取所需的方位而其他方位颜色写transparent即可