CSS第七天——CSS高级技巧

CSS第七天——CSS高级技巧

1.元素的显示与隐藏

1.1display显示（重点）

• display设置或检索对象是否及如何显示。

display: none 隐藏对象

display: block 除了转换为块级元素之外，同时还有显示元素的意思。

• 特点：隐藏之后，不再保留位置。

1.2visibility可见性（了解）

• 设置或检索是否显示对象.

visibility: visible ;             对象可视

visibility: hidden;               对象隐藏

• 特点:隐藏之后，继续保留原有位置。(停职留薪)

1.3overflow溢出（重点）

• 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

属性值	描述
visible（默认）	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	只有超出时才自动加上滚动条

1.4显示与隐藏总结

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出大小的部分	1.可以清除浮动 2.保证盒子里面的内容不会超出该盒子范围

2.CSS用户界面样式

2.1鼠标样式curor

• 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

属性值	描述
default（默认）	小白
pointer	小手
move	移动
text	文本
not-allowed	禁止

<ul>
<li styler"cursor :default" >我是小白</1i>
<1i style-"cursor: pointer" >我是小手</11>
<1i1 style-"cursor:move" >我是移动</1i>
<1i style="cursor:text" >我是文本</1i>
<1li style="cursor:not-allowed" >我是禁止</11>
</u1>

2.2轮廓线outline

可以设置outline-color，outline-style，outline-width，但我们通常不使用（浏览器兼容性问题）

最常见的用法为outline: 0或outline: none

2.3防止拖拽文本域resize

<textarea style="resize:none;"></textarea>

实际开发中，文本域也有默认轮廓线，需要把outline设置为none；其默认边框通过border进行修改

3.vertical-align 垂直对齐

3.1图片、表单与文字的对齐

vertical-align: baseline(基线)|middle(垂直中线)|top(顶部)

3.2去除图片底侧的空白缝隙

• 用图片撑开没有高度的盒子时，底部会有空白缝隙（原理是图片与文字默认基线对齐，空隙实际上是基线与底线之间的那部分）

解决方法一：img的vertical-align设置为顶线、中线、底线对齐都可以，只要不是默认的基线对齐（baseline）

解决方法二：img改为display: block，原理是块级元素就不会有默认的vertical-align基线对齐

4.溢出的文字省略号显示

4.1 white-space

●white-space设置或检索对象内文本显示方式。通常我们使用于强制-行显示内容

white-space:normal ;默认处理方式

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

4.2 text-overflow文字溢出

●设置或检索是否使用一个省略标记(…） 标示对象内文本的溢出

text-overflow : clip ;不显示省略标记(...) ，而是简单的裁切

text-overflow: ellipsis ;当对象内文本溢出时 显示省略标记(...)

注意:
一定要首先强制一行内显示，再次和overflow属性 搭配使用

5.CSS精灵技术（sprite）重点

5.1为什么需要精灵技术

• 为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。
• 出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。

5.2精灵技术使用的核心总结

1. 精确测量，每个小背景图片的大小和位置。
2. 给盒子指定小背景图片时，背景定位基本都是 负值。
3. 使用background-position 属性精确的定位。

6.滑动门

总结：

1. a设置背景左侧，padding撑开合适宽度。
2. span设置背景右侧，padding撑开合适宽度 剩下由文字继续撑开宽度。
3. 之所以a包含span就是因为 整个导航都是可以点击的，看成一个链接

<style>
    a {
   	    display: inline-block;
   		height: 33px;
    	background: url() no-repeat;
    }
	a span {
   		display: inline-block;
   		height: 33px;
        background: url() no-repeat right top; 
    }
</style>

<a href="#">    <span>一个按钮</span></a>