CSS day6

第五章

1.元素的显示与隐藏

display:none 隐藏对象，不保留位置

dispaly:bolck 显示元素

visibility:visible可见的，hidden隐藏(保留位置)

overflow:visible,hidden(溢出隐藏，超出部分隐藏),scroll(显示滚动条，不会超出盒子大小，内容显示很全，总是显示，但画面丑不常用)，auto(显示滚动条，不会超出盒子大小，内容显示很全，超出显示滚动条，不超出不显示，但画面丑不常用)

2.鼠标样式cursor

cursor:default  小白默认,pointer 小手，move 移动 ， text 文本 ， not-allowed 禁止

3.轮廓线

outline:outline-color,outline-style,outline-width

一般最常用写法:outline:0;outline:none

4.防止拖拽文本域

resize:none;（防止用户拖拽文本域）

5.vertical-align 垂直居中

vertical-align只针对行内元素，行内块元素有效，块元素无效

vertical-align:baseline（默认的基线对齐），top （顶线），middle(中线)，bottom(底线)

6.去除图片底部白色缝隙

1.因为图片的默认对齐方式都是基线对齐，所以vertical-align:top （顶线），middle(中线)，bottom(底线)都可以处理白色缝隙

2.将图转换成块级元素 dispaly:block

7.溢出文字省略号显示

1.先强制一行内显示文本

white-space:normal(默认显示方式)，nowrap（强制一行显示，遇到br还是会换行）

2.超出部分先隐藏

overflow:hidden

3.文字以省略号替代超出部分

text-overflow:clip（裁剪）,ellipsis(省略号)

8.CSS精灵技术

为了有限的减少服务器接受和发送请求的次数，提高页面加载速度

background-position:0 -100px

1.精确测量，每个小背景图的大小和位置

2.给指定的盒子指定背景图片时，背景定位基本都是负值

9.滑动门

10.CSS三角形美

margin-left:-1px;

position:relative;压住盒子，鼠标经过突出显示边框，鼠标经过当前的div，提升当前div的层级

标准流:最底层  ----   浮动:中间   ---   定位：最上层

p {
    width:0;
    height:0;
    border-style:solid;
    border-width:10px;
    border-color:red transparent transparent transparent;
    font-size:0;
    line-height:0;   
}