CSS-2

浮动

浮动与父盒子的关系  浮动不会越过内边距
浮动与定位的盒子会默认转换为行内块元素  行内元素只要浮动 就可以给宽度和高度

一个行内的盒子，如果加了**浮动**、**固定定位**和**绝对定位**，
不用转换，就可以给这个盒子直接设置宽度和高度等。


可以让多个块级元素一行显示  或者 左右对齐盒子   浮动的盒子就是按照顺序左右排列 

清除浮动的三种方式

1、/*声明清除浮动的样式*/
        .clearfix:after {
     
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        .clearfix {
     
            *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
        }

2、/*声明清除浮动的样式*/
        .clearfix:before,
        .clearfix:after {
     
            content: "";
            display: table;
        }
        .clearfix:after {
     
            clear: both;
        }
        .clearfix {
     
            *zoom: 1;
        }

3、

overflow：hidden

定位

注意：

1. **边偏移**需要和**定位模式**联合使用，**单独使用无效**；
2. `top` 和 `bottom` 不要同时使用；
3. `left` 和 `right` 不要同时使用。
4.  top优先级要高于bottom
5.  定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。

绝对定位水平垂直居中

先走父盒子宽度与高度的一半   再往反方向走自身的 高度与宽度

固定定位是相对于浏览器的

定位之z-index

叠加次序  越是在后面的越是在前面！！！


z-index  默认值为0  数值越大就显示在前面

`z-index` 只能应用于**相对定位**、**绝对定位**和**固定定位**的元素，
其他**标准流**、**浮动**和**静态定位**无效。

为什么使用定位

标准流的盒子在最底层  ----- 浮动的盒子在最中间 -----定位的盒子在最上面

绝对定位   相对定位    静态定位    固定定位 

固定定位

凹凸文字

凸起的文字      text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff ;
凹下的文字      text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;

元素的显示与隐藏之display

元素的显示与隐藏-visibility

overflow(溢出）

显示与隐藏总结

鼠标样式

轮廓线

input有轮廓线  

input {
     
            /*取消轮廓线*/
            outline: none;
        }

防止文本框拖拽

vertical-align 控制文字与图片对齐

只针对行内元素与行内块元素
通常用来控制图片/表单与文字的对齐

去除图片底侧空白间隙

```css
1、vertical-align
2、display:block 
`

溢出的文字省略号显示

white-space：normal  换行
white-space: nowrap  强制在同一行显示所有文本，直到文本结束或者遭遇br标签对象才换行

text-overflow 文字溢出

text-overflow：clip    不显示省略标记（...）,而是简单的裁切



text-overflow：ellipsis   当对象内文本溢出时显示省略标记

文字一行显示三部曲

1、首先是强制一行显示
      white-space:nowrap
      
2、超出的部分隐藏
      over-flow： hidden
      
3、文字用省略号代替超出的部分
     text-overflow：ellipsis

CSS精灵技术