1. 元素显示与隐藏
1.1 display显示
display: none /*隐藏对象*/
display: block /*显示对象*/
特点
隐藏之后,位置不在保留,应用于下拉菜单之类
1.2 visibility可见性
visibility : visible;
visibility : hidden;
特点
隐藏之后,继续保留位置
1.3 overflow溢出
检索设置当前对象内容超过指定宽高后的操作
属性值 | 描述 |
---|---|
visible | 不剪切也不添加滚动条 |
hidden | 不显示超出对象尺寸的内容 |
scroll | 不管是否超出,总是显示滚动条 |
auto | 超出显示滚动条,否则不显示 |
用于清除浮动,隐藏超出内容
2. CSS用户界面样式
2.1 鼠标样式cursor
属性值 | 描述 |
---|---|
default | 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
2.2 轮廓线
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少,我们平时都是去掉的。 li
最直接的写法是 : outline: 0; 或者 outline: none;
2.3 防拖拽文本域
<textarea style="resize: none;"></textarea>
3. 垂直对齐
- 有宽度的块级元素居中对齐,是margin: 0 auto;
- 让文字居中对齐,是 text-align: center;
vertical-align 垂直对齐,它只针对于行内元素或者行内块元素,
vertical-align : baseline |top |middle |bottom
设置或检索对象内容的垂直对其方式。
-
注意:
vertical-align 不影响块级元素中的内容对齐,它只针对于行内元素或者行内块元素,
特别是行内块元素, 通常用来控制图片/表单与文字的对齐。
去除图片空白缝隙
图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。
就是图片底侧会有一个空白缝隙。
解决
-
给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
-
给img 添加 display:block; 转换为块级元素
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属性 搭配使用
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
5. CSS精灵技术(sprite)
一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。精灵技术目的:为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图。
background-image、
background-repeat
background-position属性进行背景定位,
其中最关键的是使用background-position 属性精确地定位。
首先我们知道,css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术的。
- 精确测量,每个小背景图片的大小和 位置。
- 给盒子指定小背景图片时, 背景定位基本都是 负值。
6. 滑动门
为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 最常见于各种导航栏的滑动门。
主要使用css精灵以及padding撑开盒子来实现
a
实现左门,用padding撑开,
span
实现右门,背景图右对齐,padding撑开
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
7. CSS三角形
用css边框模拟三角形
- 我们用css 边框可以模拟三角效果
- 宽度高度为0
- 4个边框都要写*, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了
- 为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;
黑马前端全栈教程