初步了解四 CSS

CSS高级技巧

一 理解

• 能说出元素显示隐藏最常见的写法
• 能说出精灵图产生的目的
• 能说出去除图片底侧空白缝隙的方法

二 应用

• 能写出最常见的鼠标样式
• 能使用精灵图技术
• 能用滑动门做导航栏案例

1. 元素的显示与隐藏
   目的：让一个元素在页面中消失或者显示出来
   场景：类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

   1. display 显示（重点）
      display 设置或检索对象是否及如何显示。

      1. display: none 隐藏对象
      2. display：block 除了转换为块级元素之外，同时还有显示元素的意思。
      3. 特点： 隐藏之后，不再保留位置。

   2. visibility 可见性 (了解)
      设置或检索是否显示对象

      1. visibility：visible ; 　对象可视
      2. visibility：visible ; 　对象可视
      3. 特点： 隐藏之后，继续保留原有位置。（停职留薪）

   3. overflow 溢出(重点)
      检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

      1. visible不剪切内容也不添加滚动条
      2. hidden不显示超过对象尺寸的内容，超出的部分隐藏掉
      3. scroll不管超出内容否，总是显示滚动条
      4. auto超出自动显示滚动条，不超出不显示滚动条
      5. 实际开发场景：
         清除浮动
         隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

   4. 显示与隐藏总结
      display隐藏对象，不保留位置配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
      visibility隐藏对象，保留位置使用较少
      overflow只是隐藏超出大小的部分1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

2. CSS用户界面样式
   所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。
   更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究)
   表单轮廓等。
   防止表单域拖拽

   1. 鼠标样式cursor
      设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
      default小白 默认
      pointer小手
      move移动
      text文本
      not-allowed禁止

   2. 轮廓线 outline
      是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
      outline : outline-color ||outline-style || outline-width
      但是我们都不关心可以设置多少，我们平时都是去掉的。 li
      最直接的写法是 ： outline: 0; 或者 outline: none;
      input type=“text” style=“outline: 0;”/

   3. 防止拖拽文本域resize
      textarea style=“resize: none;”>

3. vertical-align 垂直对齐
   有宽度的块级元素居中对齐，是margin: 0 auto;
   让文字居中对齐，是 text-align: center;
   ertical-align 垂直对齐，它只针对于行内元素或者行内块元素，
   注意：

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

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

   3. 图片、表单和文字对齐
      

   4. 去除图片底侧空白缝隙
      原因：
      图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
      就是图片底侧会有一个空白缝隙
      解决的方法就是：
      给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。

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

   1. white-space
      white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
      white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

   2. text-overflow 文字溢出
      设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
      text-overflow : clip ；不显示省略标记（…），而是简单的裁切
      text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（…）
      注意：
      一定要首先强制一行内显示，再次和overflow属性 搭配使用

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

5. CSS精灵技术（sprite) 重点

   1. 精灵技术讲解
      CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图
   2. 精灵技术使用的核心总结
      首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。
      1. 精确测量，每个小背景图片的大小和 位置。
      2. 给盒子指定小背景图片时， 背景定位基本都是 负值。

6. 滑动门 （推拉门）

   1. 核心技术
      核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。

   2. 布局
      li>
      a href="#">
      span>导航栏内容/span>
      /a>
      /li>

7. 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);
   }
   4. 总结：
   1. a 设置 背景左侧，padding撑开合适宽度。
   2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
   3. 之所以a包含span就是因为 整个导航都是可以点击的。

8. 拓展@
   1). 负边距+定位：水平垂直居中
   咱们前面讲过， 一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。
   2). 压住盒子相邻边框
   3). 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;
   }

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

9. 背景线性渐变色
   background: linear-gradient(起始颜色，颜色1，颜色2…);
   兼容型
   background: -webkit-linear-qradient(left, red, blue);
   background: -webkit-linear-qradient(left top,red ,blue);

10. 字体渐变色
    注意：顺序不能变化。
    background: linear-gradient(to right, red, blue);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;