CSS进阶

单行文本溢出显示省略号

1、给容器定义宽度，即确定超出的范围。
  width:value;
2、强制文本在同一行显示
  white-space:nowrap;
3、溢出内容隐藏
  overflow:hidden;
4、文本溢出显示省略号
  text-overflow:ellipsis;

元素类型及类型转换

元素可分为三大类型：块状元素（block）、行内（内联）元素（inline）和行内块元素（inline-block）。
1、块状元素
  默认独占一行，可以自定义宽度和高度，常用于网页布局和网页结构的搭建。
2、行内元素
  不占有独立的区域，默认靠自己的文本大小和图像尺寸来支撑宽高，不可以设置宽高属性，多个行内元素可以在同一行显示。
3、行内块元素
  和相邻的行内块元素可以显示在一行上，但之间会有缝隙。可以设置宽度和高度。

常见的块状元素：div、p、h1-h6、ul、ol、li
常见的行内元素：span、a、b/strong、i/em、s/del、u/ins、sup、sub
常见的行内块元素：img、input

  块元素转行内元素 display:inline;使块元素具备内联元素的特性；
  行内元素转块元素 display:block;块状显示，使内联元素具备块属性标签的特性；
  块元素、行内元素转行内块元素 display:inline-block;元素的内容块状显示，并能够与行内其他元素显示在同一行。可以设置宽度和高度，不设置时由内容撑开；
注：仅有行内块元素支持vertical-align属性。
  display:none;此元素不会被显示；
  display:list-item;列表li的默认display属性值。

图片img的水平垂直居中

1、水平居中 text-align:center;
2、垂直居中
  （1）给img写一个兄弟span元素
  （2）将span转换为inline-block元素，设置宽度为0，高度为100%
  （3）给span、img两个都设置垂直对齐vertical-align:middle

定位position

1、静态定位static
  网页中所有元素都默认静态定位。在静态定位作用下，无法设置偏移属性（top、bottom、left、right）来改变元素的位置。
2、相对定位relative
  通过偏移属性来移动位置，移动基准为自己的左上角，并且移动之后，原来的位置继续保持占有。
3、绝对定位absolute
  也可以通过偏移属性移动位置，如果父元素都没有定位，则以浏览器当前屏幕进行定位；父元素有定位，以父元素左上角进行偏移。绝对定位不占有原来的位置。
4、固定定位fixed
  是一种特殊的绝对定位形式，都是以浏览器窗口为参照物。

定位在网页中最常使用子绝父相。
（1）子元素使用position:absolute;脱离文档流，不占位置。
（2）父元素使用position:absolute;占有位置，且此时子元素以父元素的左上角为基准，进行相对于父元素的定位。

命名锚记

（1）给元素定义命名锚记名
  <标签 id=“锚记名”></标签>
（2）定义锚记链接

    <a href="#锚记名"></a>

命名锚记的作用：在同一页面的不同位置进行跳转。

绝对定位的盒子水平/垂直居中

第一种方式：不知道元素的宽度和高度时
  先设置元素定位为position:absolute;再给四个方向设置top:0;right:0;bottom:0;left:0;最后设置margin:auto;让浏览器自动分配。
第二种方式：知道元素的宽度和高度时
  首先左上角对齐父盒子的中心position:absolute;top:50%;left:50%;
再向左上方移动自己外边距的一半margin-left:(-负)宽度的一半;margin-top:(-负)高度的一半

自适应

  网页布局中元素的大小能够根据窗口自动调整或者根据子元素自动调整，这就是自适应。
  各属性百分比参照物：
1、width、height参考父元素的宽度和高度
2、margin、padding参考父元素的宽度
3、line-height行高参考当前字体大小

清除浮动（高度塌陷问题的解决）

  子元素添加浮动属性，父元素不写高度时，会发生父容器高度为0的现象，称为高度塌陷。
解决方案1、给父元素添加声明overflow:hidden;
解决方案2、在浮动元素下方添加空div,并给该空div添加声明：clear:both;height:0;overflow:hidden;
解决方案3、万能清除浮动法
选择符:after{content:“.”; display:block; clear:both; height:0; overflow:hidden; visibility:hidden ; }
再给父元素添加类选择器

元素隐藏/显示的三种方式

元素消失：
  display:none;（不占位置）
  opacity:0; （占位置）（原理为元素设置全透明）
  visibility:hidden; （占位置）

相对应的元素显示：
  display:block;
  opacity:1;
  visibility:visible;

CSS Sprites（图片整合技术）

优势：通过整合图片，减少对服务器的请求次数，减少图片的体积从而加快页面加载速度。
实现方法：
  把小的背景图片整合到一张图片上，且设置no-repeat不平铺
  然后根据background-position进行移动，显示需要显示的部分。
  如：background-position:-8px -95px
以左上角为基准，第一个值为水平方向，第二个值为垂直方向。

滑动门技术

  滑动门技术，通过css背景图像可层叠性，允许彼此之上进行滑动来创造一些特殊的动态效果。
  给li设置左半部分的背景图片，给a设置右半部分的背景图片，可实现字数不一样时，也能展示正常的按钮效果。通过滑动门技术，可实现导航栏字数不一样多的问题。