CSS高级技巧

最新推荐文章于 2024-05-22 14:36:42 发布

Ctrl_CV攻城狮

最新推荐文章于 2024-05-22 14:36:42 发布

阅读量335

点赞数 1

分类专栏：前端基础文章标签：前端

前端基础专栏收录该内容

27 篇文章 2 订阅

订阅专栏

1. 元素的显示与隐藏

1.1 display显示(重点)

1.2 visibility可见性(了解)

1.3 overflow溢出(重点)

1.4 显示与隐藏总结

2. CSS用户界面样式

2.1 鼠标样式cursor

2.2 轮廓线outline

2.3 防止拖拽文本域resize

2.4 用户界面样式总结

3. 垂直对齐 vertical-align

注意：

3.1 图片、表单和文字对齐

3.2 去除图片底侧空白缝隙

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

4.1 white-space

4.2 text-overflow 文字溢出

4.3 总结三步曲

/* 1.先强制一行内显示文本 */
white-space: nowrap;
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
text-overflow: ellipsis;

5. CSS精灵技术(sprite)重点

5.1 为什么需要精灵技术

5.2 精灵技术讲解

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

5.4 制作精灵图(了解)

6. 滑动门

6.1 核心技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。一般的经典布局都是这样的：

<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动门实现原理</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
/* background-color: #515151; */
}
a {
display: inline-block;
height: 33px; /* 宽度不能给 写死宽度是不对的 我们要推拉门*/
background: url(images/ao.png) no-repeat;
padding-left: 15px;
margin: 100px;
color: #fff;
text-decoration: none;
line-height: 33px;
}
a span {
display: inline-block;
height: 33px;
background: url(images/ao.png) no-repeat right;
/* span 不能给宽度 利用padding 挤开 要span 右边的圆角 背景位置 右对齐 */
padding-right: 15px;
}
</style>
</head>
<body>
<div>
<a href="#">
<span>首页</span>
</a>
<a href="#">
<span>二维码</span>
</a>
</div>
</body>
</html>

总结：

1.a 设置背景左侧，padding撑开合适宽度。

2.span 设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。

3.之所以a包含span就是因为整个导航都是可以点击的。

二. 拓展@

1. margin负值

1). 负边距+定位：水平垂直居中

前面讲过，一个绝对定位的盒子，利用父级盒子的50%，然后往左(上)走自己宽度的一半，可以实现盒子水平垂直居中。

2). 压住盒子相邻边框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 1200px;
margin: 10px auto;
}
li {
position: relative;
/* 浮动的盒子是紧贴在一起的 */
float: left;
width: 200px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
list-style: none;
}
p {
position: absolute;
bottom: 0;
width: 200px;
height: 80px;
background-color: #f40;
display: none;
}
li:hover {
/* 鼠标经过li的时候 让li在最上层 定位的盒子是在最上层的*/
border: 1px solid #f40;
/* 堆叠顺序 */
z-index: 1;
/* position: relative; */
}
li:hover p {
display: block;
}
</style>
</head>
<body>
<ul>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

2. CSS三角形

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;
}
P {
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent transparent red;
font-size: 0;
line-height: 0;
}
</style>
</head>
<body>
<div></div>
<P></P>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 200px;
height: 100px;
background-color: pink;
margin: 100px auto;
}
p {
position: absolute;
top: -40px;
left: 50%;
margin-left: -20px;
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent pink transparent;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>