css(07)

元素的显示与隐藏

让一个元素在页面中消失或者显示出来

display

display 设置或检索对象是否及如何显示。

display:none;让元素隐藏
display:block; 不仅可以变为块级元素也可以使元素隐藏

隐藏后不占位置
配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

visibility 可见性

visibility：visible 对象可见
visibility：hidden 对象隐藏
隐藏之后，继续保留原有位置

overflow 溢出

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

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

.one{
   /*默认的*/
   cursor: default;
  }
  .two{
   /*小手  轮播图可能用*/
   cursor: pointer;
  }
  .three{
   /*移动  京东商品可能用*/
   cursor: move;
  }
  .four{
   /*文本  可能表单会用*/
   cursor: text;
  }
  .five{
   /*禁止  比如数量为0可以用禁止*/
   cursor: not-allowed;
  }

轮廓线

一般用的都是给表单直接去除轮廓线
outline: 0; 或者 outline: none;

防止拖拽文本域resize

resize: none

vertical-align 垂直对齐

有宽度的块级元素居中对齐，是margin: 0 auto;让文字居中对齐，是 text-align: center;
vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，
通常用来控制图片/表单与文字的对齐。

也可以 去除图片底侧空白缝隙
图片或者表单等行内块元素，默认他的底线会和父级盒子的基线对齐。就是图片底侧会有一个空白缝隙
给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
给img 添加 display：block; 转换为块级元素就不会存在问题了。

溢出的文字省略号显示

三部曲

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

滑动门制作

<style type="text/css">
  /*a设置左侧背景（左门）*/
  /*span设置右侧背景*/
  /*因为整个导航栏都是链接所以a在外面*/
  /*滑动门 左右推拉 跟文字多少有关系
  要用文字撑开盒子 用行内块*/
  a{
   display: inline;
   height: 33px;
   background: url(案例/images/to.png) no-repeat;
   margin: 100px;
   padding-left: 15px;
   color: #fff;
   text-decoration: none;
  }
  a span{
   display: inline;
   height: 33px;
   /*span要右对齐*/
   background: url(案例/images/to.png) no-repeat right top;
   padding-right: 15px;
  }
 </style>
 <a href="">
  <span>首页</span>
 </a>

总结： a 设置 背景左侧，padding撑开合适宽度。
span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
之所以a包含span就是因为 整个导航都是可以点击的。