元素的显示与隐藏 / 精灵图

 

 

　　1.定位可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

　　2.定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置，并且可以压住其他盒子。

　　3.定位的组成：将盒子定在某一个位置　　　　‘

　　　　1.定位模式（position）：用于知道一个元素在文档中的定位方式。

　　　　2.边偏移：则决定了该元素的最终位置。

　　4.position　　

　　　　static静态定位   relative相对定位　　absolute绝对定位　　fixed固定定位

　　5.边偏移 top　　bottom　　left　　right　　 :相对于其父元素四条边线的位置  　　

　　6.静态定位：

　　　　选择器 { position ： static}        //无定位 很少用　　

　　8.相对定位:元素在移动过程中，元素相对于其原来的位置。（不脱标，继续保留原来的位置）

　　9.绝对定位：在移动位置时，是相对于他的祖先元素来说的。（脱标，不占有原来的位置）

　　　　　　9.1如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

　　　　　　9.2如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置

　　10.子绝父相：子集是绝对定位的话，父集则用相对定位，这样子盒子将在父盒子上面显示。 

　　11.固定定位：固定与浏览器的可视区域。页面滚动时元素的位置不会改变

　　　　特点：以浏览器的可视窗口为参照点移动元素　　跟父元素没有任何关系　　不随滚动条滚动　　脱标的（特殊的绝对定位）

　　12.粘性定位：被认为是相对定位与固定定位的混合（不常用）

　　　　特点：以浏览器的可视窗口为参照点移动元素（固定定位特点）　　粘性定位占有原先的位置（相对定位特点）

     选择器 {position ：sticky ；top：10px} 　　必须添加top、bottom、left、right中的一个才可以显示

 

　　13.定位叠放次序：

　选择器 {z-index：1；}  数值可以是正整数、负整数、0、默认为auto，数值越大，盒子越靠上  

 　　14.绝对定位水平垂直居中：子绝父相；left：50%-自身宽度或者高度。

　　15.定位的拓展：特殊特性： 绝对定位与固定定位也和浮动类似。　行内元素 添加绝对或者固定定位，可以直接设置高度和宽度。   块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小　　

　　　　浮动的元素不会压住下面标准流的文字/绝对定位会压住下面标准流的文字

------------恢复内容开始------------

　　1.本质：让一个元素在页面中隐藏或者显示出来

　　2.display属性

　　display:none   隐藏对象且不在占有原来的位置
　　display：block　　除了转换为块级元素外显示对象　　 搭配js使用

　　3.visibility 可见性

    visibility：visible    元素可视
    visibility：hidden     元素隐藏但是占有原来的位置

　　4.overflow 溢出

overflow：visible    不剪切内容也不显示滚动条
overflow：hidden    隐藏超过尺寸的内容
overflow：scroll      不管是否超出尺寸，都增加混动条
overflow：auto        超出才显示滚动条，否则不显示滚动条
　　如果有定位的盒子，慎用overflow：hidden，因为会隐藏多余的部分

 　　5.精灵图（sprite）：为了有效减小服务器接受和发送请求的次数，提高页面的加载速度。　　

　　　　核心：主要针对于背景图片的使用，就是吧多个小背景图整合到一张大图片中。移动背景图片位置，此时可以使用background-position。一般情况精灵图都是负值。

　　　   缺点：图片文件比较大，图片本身放大缩小后会失真，图片制作完成想要更换非常复杂

　　选择器 { background-position：x y }

 

　　6.字体图标：展示的是图标，实际属于字体

　　遇到结构样式简单的小图标，就用字体图标
　　遇到结构和样式复杂一点的小图片，就用精灵图
　　字体图标的下载 http://icomoon.io　　http://iconfont.cn
　　pink p257

　　7.css三角的做法

  .hub {
            width: 0;
            height: 0;
            border-top: 5px solid red;
            border-right: 1px solid transparent;
            border-left: 1px solid transparent;
            border-bottom: 1px solid transparent;
        }


　　<div class="hub"></div>
  对话框中的三角形做法为：两个盒子 子绝父相

　　8.CSS用户界面样式

　　鼠标样式（cursor）： li {cursor : pointer; }
　　轮廓线（outline） ：  input { loutline：0/none }
　　防止拖拽文本域（resize）： textarea{resize ：none； }

 　　9.vertical-align属性应用：通常用于设置图片或者表单（行内块元素）和文字垂直对齐

  vertical-align : baseline | top | middle | bottom
　　　　baseline:默认，元素放置在父元素的基线上。 
　　　　top：将元素顶端与行中最高元素顶端对齐
　　　　middle：把此元素放置在父元素中部
　　　　bottom：把元素的顶端与行中最低的元素的顶端对齐

 

　　10.图片低侧空白缝隙解决方案

　　　　因为图片为基线对齐 ：给图片添加 vertical-align:middle/top/bottom   或者将图片改为块级元素

　　11.溢出文字用省略号显示：

1.单行文本溢出显示省略号--必须满足三个条件
    /1.先强制一行内显示文本/
        white-space：nowrap；（默认为normal自动换行）
    /2.超出的隐藏部分/
        overflow：hidden；
    /3.文字用省略号替代超出部分/
        text-overflow：ellipsis；

　　12.常见布局技巧：

　　1.margin负值 可以用来消除边框重叠 magrin-right：-1px；然后改为相对定位或者使用z-index修改层级。
　　2.文字围绕浮动元素：浮动的本质为制作文字环绕效果；
　　3.行内块元素的巧妙应用：