CSS 7day

CSS高级技巧

display显示

display：none; 隐藏元素，不保留位置

display：block 转换为块级元素，显示元素

用途

做下拉菜单、JS特效

visibility可见性

visibility：hidden； 隐藏元素，保留位置

visibility：visible； 显示元素

overflow溢出

overflow：hidden； 溢出的隐藏

overflow：scroll； 显示滚动条

overflow：auto； 智能，字数溢出时显示滚动条

用途

清除浮动、保证盒子内容不超出盒子范围

鼠标样式cursor

1、cursor：default 默认 2、cursor：pointer 小手 3、cursor：move 移动 4、cursor：text 文本 5、cursor：not-allowed 禁止

轮廓线 outline

outlone=none; 取消表单的轮框线

防止拖拽文本域 textarea

resize：none 防止拖拽

垂直对齐 vertical-align

照片与文字的位置

1、vertical-align：baseline 基线对齐（默认）

2、vertical-align：middle 中线对齐

3、vertical-align：top 顶部对齐

溢出文字省略号显示

步骤 1、white-space：nowrap； 强行一行内显示文本 2、overflow：hidden； 超出的部分隐藏 3、text-overflow：ellipsis； 用省略号表示超出部分

CSS精灵技术

把许多照片放到一张照片上对服务器进行请求

background-position：x y 显示需要照片的位置

滑动门

左边background-lift

右边background-rifgt

随着字数的变多，把右边的背景撑开

margin负值

1、float：left； margin-left：-1px； 使表格之间的边框统一

CSS三角形

width：0；

heifgt：0；

border-top/rifgt/bottom/left：10px solid （颜色）

一个边有颜色，另三个边透明transparent

//font-size=0; line-height:0;