1.元素的显示与隐藏
1.1 display 显示
- display : none; 隐藏对象，不保留位置
- display : block; 转换成块级元素，并且显示隐藏的元素
1.2 visibility 可见性
- visibility : hidden; 隐藏对象，保留位置
- visibility : visible; 显示对象
1.3 overflow 溢出
对超出部分进行显示与隐藏，还有清除浮动的作用。
- overflow : visible; 超出的内容不剪切也不添加滚动
- overflow : hidden; 超出的内容隐藏
- overflow : scroll; 超出的内容添加滚动，不超出也显示滚动条（太丑，一般不用）
- overflow : auto; 超出就显示滚动条，不超出就不显示（一般不用）
1.4 案例练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
position: relative;
width: 450px;
height: 450px;
margin: 100px auto;
}
.mask{
display: none;
position: absolute;
top: 0;
left: 0;
width: 450px;
height: 450px;
background: rgba(0,0,0,.3) url(images/tb.png) no-repeat center center;
}
.box a:hover .mask{
display: block;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
<div class="mask"></div>
<img src="jackson.jpg" alt="">
</a>
</div>
</body>
</html>
2. CSS用户界面样式
2.1 鼠标样式cursor
- cursor : default; 默认样式
- cursor : pointer; 小手样式
- cursor : move; 移动样式（十字架形状）
- cursor : text; 文本样式（“ | ”）
- cursor : not-allowed; 禁止样式（红圈加斜杠的形状）
2.2 轮廓线（主要针对表单）
outline : outline-color || outline-style || outline-width
一般不设置轮廓线：outline : 0; 或者 outline : none;
2.3 防止拖拽文本域resize
resize : none;
3. vertical-align 垂直对齐
- vertical-align : baseline | top | middle | bottom;
- 只用于行内元素、行内块元素
- 用于图片、表单和文字对齐：
vertical-align : middle - 用于去除图片底侧空白缝隙:
vertical-align : middle | top | bottom
4. 溢出的文字用省略号显示
-
先强制一行显示文本
white-space: nowrap; -
超出的部分隐藏
overflow: hidden; -
文字用省略号代替超出的部分
text-overflow: ellipsis;
5. CSS精灵技术（sprite）
- 当网页中的图像过多时，服务器就会频繁地接受和发送请求。为了解决这个问题，提高页面的加载速度，精灵技术将网页中的一些背景图像整合到一张大图中（精灵图）。
- 用于背景图片，不用于插入图片。
- 一般坐标值为负数。
6. 滑动门
目的：根据内容向两边撑开盒子
设置一个背景图片：
- a 设置背景左侧，padding 撑开合适宽度；
- span 设置背景右侧，padding 撑开合适宽度，剩下由文字继续撑开宽度；
- a 中包含 span ，整个导航栏都可以点击。
7. margin 负值
1.负边距+定位：水平垂直居中；
2.压住盒子相邻边框；
-
解决两个边框相邻加倍临边的问题，实现1+1=1的效果。
例如：margin-left: -1px; -
margin 负值与浮动一起作用时，先进行浮动，浮动的盒子是紧贴在一起的，然后盒子的临边再 -1px。
3.突出显示某个盒子
- 当定位和标准流在一起时，定位的盒子在上面；
- 当盒子都是定位时，可以用z-index 设置盒子堆叠。
8. 三角形
用css 边框可以模拟三角形效果：
- 宽度高度都设为0；
- 四个边框都要设置，只保留需要边框的颜色，其余边框改成 transparent 透明；
- 为了兼容，加上 font-size: 0; line-height: 0。
2474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
