【css基础学习笔记六之display、cursor、text-overflow、ico图标、description、keywords】

css高级技巧

一.元素的显示与隐藏
display 显示
 display:none 隐藏对象。
 display:block 转换为块级元素和显示元素。

visibility 可见性
 visibility:visible 对象可视
 visibility:hidden  对象隐藏

特点：隐藏后，继续保留原来位置(停职留薪)

overflow 溢出
   overflow:auto 超出自动显示滚动条，不超出不显示滚动条
   overflow:hidden 超出部门隐藏掉
   overflow:visible 不剪切内容也不添加滚动条
   overflow:scroll 不管超出内容否，总是显示滚动条

二.css用户界面样式
  1.鼠标样式cursor
  cursor:pointer  小手
  cursor:move    移动
  cursor:text    文本
  cursor:default 默认鼠标形状

  2.轮廓outline
  outline:0;//去掉轮廓，比如input框
  outline:none;

  3.防止拖拽文本域resize
  resize:none;  防止拖拽textarea文本域

  4.vertical-align 垂直对齐
  注意;vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，
        特别是行内块元素， 通常用来控制图片/表单与文字的对齐。默认图片文字以基线对齐
  vertical-align:baseline;  基线对齐，默认的是文字和图片基线对齐
  vertical-align:middle;    垂直居中
  vertical-align:top;       顶部对齐
  vertical-align:bottom;    底线对齐

  去除图片底侧空白缝隙
   a.img{vertical-align:top;border:0;}//让图片不要和基线对齐
   b.img{display:block;}//转化为块级元素
   
  5.溢出的文字隐藏
    white-space:normal  默认处理方式
    white-space:nowrap: 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行
   
  6.文字溢出 
    text-overflow:clip       不显示省略标记（...），而是简单的裁切 
    text-overflow:ellipsis   当对象内文本溢出时显示省略标记（...）

三.ico图标
   <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/> 
   1. 她(它)不是iconfont字体哦 也不是图片。
   
2. 位置是放到 head 标签中间。

   3. 后面的type="image/x-icon"  属性可以省略。
   
4. 为了兼容性，请将favicon.ico 这个图标放到根目录下。

  
  转换ico图标网址：http://www.bitbug.net/

四.description
   <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
   keywords关键字
   <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

text-indent: -20000px; 隐藏文字， 背景图片