知识导航:
- 盒子的显示与隐藏
- 用户界面样式
- 鼠标样式
- input轮廓线
- 文本域脱拽问题
- 设置垂直对齐
- 使溢出text文本以省略号显示
- css精灵
1. 盒子的显示与隐藏
应用:使一个盒子显示或者隐藏。如:
开始鼠标未经过我的淘宝
当鼠标经过我的淘宝
即,鼠标经过时盒子显示。鼠标移出时,盒子隐藏
1.1 display显示
基本语法:
display: none 隐藏对象
display:block 除了转换为块级元素之外,同时还有显示元素的意思。
下面来看display的特性;准备三个盒子
给第二个盒子添加display:none
效果:
即display属性隐藏元素之后,不再保留位置了
1.2 visibility 可见性 (了解即可)
基本语法:
visibility:visible ; 对象可视
visibility:hidden; 对象隐藏
还是用上面的三个盒子
这回给第二个盒子添加visibility:hidden;
,效果:
即visibility隐藏元素之后,仍然占有位置
1.3 overflow 溢出(重点)
设置当对象的内容超过其指定高度及宽度时如何管理内容。
它的属性值如下:
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
2. 用户界面样式
2.1 鼠标样式
设置鼠标在盒子上的形状,如盒子是input的输入框。则最好显示鼠标的那种文本格式,是链接盒子则鼠标样式为小手样式
属性:cursor
其属性值:
属性值 | 描述 |
---|---|
default | 小白 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
代码举例
<style>
input {
cursor: text;
}
</style>
<input type="text">
2.2 轮廓线 outline
鼠标定到这个input时,它自己出来的蓝色边框。影响我们页面的美观
去掉的语法:
设置属性
outline: 0;
或者
outline: none;
2.3 防止拖拽文本域
行内属性为area的input文本域是可以拖拽的。
这种拖拽肯定是及其影响布局(倘或我把它拖的屏幕这么大我其他盒子岂不是都被挤跑了)
设为不可拖拽语法:
<textarea style="resize: none;"></textarea>
3. vertical-align 垂直对齐
我们知道了有宽度的块级元素居中对齐,是margin: 0 auto;让文字居中对齐,是 text-align: center。但是还没有总结过垂直居中
vertical-align 垂直对齐,它只针对于行内元素或者行内块元素,它对块级元素无效
它的基本语法:
vertical-align : baseline |top |middle |bottom
四个属性的对齐分别对应下图这四根线
即:它是设置一个行内元素是与另一个行内(或行内块)元素的哪跟线对齐
举例:
如果给一行内元素一个vertical-align : baseline
,则它便会跟与其相邻的行内元素的基线对齐
3.1 它有一个重要应用(清除3像素bug):
当我们往一个空的块盒子扔一张图片。这个不用设宽高,让图片把它撑开。会发现下面的效果。
它的下方有一个3px的缝隙。
原理其实上面就有所涉及,img属于行内块元素。即它算是文本的一种,可认为所留下的位置是文字的基线到底线的那个距离
如下图,你假设它旁边有文字。它默认是会留位置的
解决方法很简单
- 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。但是最好还是用top
- 又或者直接把img转为块元素更为简单方便,块级元素是不存在这种问题的。不需考虑对齐方式
4. 溢出的文字省略号显示
基本步骤:
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
语法:
white-space:normal ;默认处理方式
white-space:nowrap ; 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。
text-overflow 文字溢出
设置或检索是否使用一个省略标记(…)标示对象内文本的溢出
语法:
text-overflow : clip ;不显示省略标记(...),而是简单的裁切
text-overflow:ellipsis ; 当对象内文本溢出时显示省略标记(...)
举例开始:
添加属性:
效果图:
5 css精灵(重要重要)
为什么需要:
当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。
然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。
为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。精灵技术产生了
它的原理是将上面的所有小图集中放在一张大图上。一次性拿过来。
像这种
嗯,速度是快了但对我们布局却增加了点难度(哈哈)
这里我们需要使用CSS的
- background-image、
- background-repeat
- background-position属性进行背景定位,
其中最关键的是使用background-position 属性精确地定位。
下面写一个精灵当做例子吧
找一个精灵图如下图
要求,把那个下载游戏挖出来。
首先把精灵图扔到fw里面,通切片工具选中下载游戏
它的大小和在精灵图上的坐标已有显示。
打开vscode准备一个此大小的盒子
接下来添加背景属性,小图的坐标已知。
设置为
效果图:
over!!!
还是再唠叨一下吧
新手在坐标设置这里可能不太理解。
我来解释一下。开始将背景图装入盒子时是这样的。
(position属性不明白的话可以看看我的css总结2背景属性那)
接着上。可发现x轴是不需要动,刚才fw中已经知道选中区域的纵坐标为218px,即只需向y的负反方向走218px即可!
finish!!!