CSS-04高级技巧

元素的显示和隐藏

1、display(显示）
display:none;隐藏元素 不保留位置
display:block(有显示和转换成块元素的意思
2、visibility(可见性）
visivility:hidden;隐藏元素 保留位置
visibility：visivible;
3、overflow溢出（重点）
检索或设置对象的内容超过其指定高度及宽度时如何管理内容

用户界面样式

鼠标样式（cursor）

轮廓线（outline）
位于边框外围，突出元素
outline :outline - color || outline-style ||outline-width

防止拖拽文本域（resize）
textarea右下角可以拖拽

vertical-align 垂直对齐

(特别是行内块元素，通常用来控制图片/表单与文字对齐）
默认基线对齐baseline

垂直居中：middle；
顶部对齐：top;

去除图片低侧空白缝隙

默认是基线对齐 所以有空隙
display:block;

溢出文字用省略号显示

white-space:normal 自动换行
white-space：nowrap；强制在一行内显示

text-overflow:clip（被裁切）
text-overflow:ellipsis（溢出时显示省略标记（…））

一定要在一行内显示

CSS精灵技术（sprite）

为了提高加载速度，减少服务器接受发送的频率

精灵技术：将网页中的一些背景图整合到一张大图中（精灵图）
需要精确定位到某个小图

核心：
1.精确侧脸每个小背景图片的大小和位置
2、给盒子指定小背景图片是，背景定位基本都是负值（默认在左上角对齐）

滑动门

为了使各种形状背景自适应元素中文本内容的多少，出现了CSS滑动门，使背景能够自由拉伸，适应内部内容，常见于导航栏

核心技术：
利用css精灵（主要是背景位置）和盒子padding撑开宽度





margin负值
1、负边距＋定位 ：水平垂直居中
2、压住盒子相邻边框
margin-left:-1;（防止变粗）
3、突出显示某个盒子


（调高层级）
CSS三角形