CSS高级技巧
一、元素的显示与隐藏
目的:让一个元素在页面中消失,但是不在文档源码中删除
1.1display显示
display设置或检索元素是否如何显示
display:none;隐藏元素
display:block;除了转换为块级元素之外,同时还有显示元素的意思
特点:隐藏之后,不再保留位置
![](https://i-blog.csdnimg.cn/blog_migrate/32ed1b28d51f12b9bf949eeb7c1470fe.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b12d3ede31c457f7ccfe6614e39b9a82.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a506cf70a889e11b5cc97d179e19baf7.png)
1.2visibility可见性
visibility:hidden;隐藏元素,保留位置
visibility:visible;元素可视
特点:隐藏之后,保留位置(停职留薪)
![](https://i-blog.csdnimg.cn/blog_migrate/87529b2c89fdf784bcec65feeb396ce2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/87424cd61816b809ea30ef85c56f77ae.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9e7a03d831b861a03e8a906e4d837fba.png)
1.3overflow溢出(重点)
检索或设置当对象内容超过其指定高度及宽度时如何管理内容
属性值
|
描述
|
visible
|
不剪切内容,也不添加滚动条(默认)
|
hidden
|
不显示超过尺寸的内容,超出的部分隐藏掉
|
scroll
|
不管超出内容否,
总是显示滚动条(太丑了,不常用)
|
auto
|
超出自动显示滚动条,不超出不显示滚动条(智能小天才)
|
实际开发场景:
1、清除浮动
2、隐藏超出部分,隐藏掉,不允许内容超出父盒子
1.4显示与隐藏总结:
属性
|
区别
|
用途
|
display
|
隐藏对象,不保留位置
|
配合后面JavaScript做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单,应用及广
|
visibility
|
隐藏对象,保留位置
|
使用极少
|
overflow
|
只是隐藏超出大小的部分
|
1、清除浮动;2、保证盒子里面的内容不会超出该盒子范围
|
二、CSS用户界面样式
所谓界面样式,就是更改一些用户操作样式
-
更改用户鼠标样式
-
单表轮廓等
-
防止表单域拖拽
2.1鼠标样式cursor
设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状
属性值
|
描述
|
default
|
小白(默认)
|
pointer
|
小手
|
move
|
移动
|
text
|
文本
|
not-allowed
| 禁止 |
鼠标放在我身上看效果哟
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move"> 我是移动</li>
<li style="cursor:text">我是文本 </li>
<li style="cursor:not-allowed">我是文本</li>
</ul>
2.2轮廓线outline
绘制周围于元素的一条线,位于边框边缘的外围,可起到突出元素的作用
outline:outline-color || outline-style || outline-width;
但是我们并不关心可以设置多少,我们平时都是去掉的
最直接的写法是:outline:0;或者outline:none;
<
input
tyle
=
"text"
style
=
"
outline
:
0
"
/>
2.3防止拖拽文本域
<
textarea
style
=
"
resize
:
none
;
"
></
textarea
>
2.
4用户界面样式总结
属性
|
用途
|
用途
|
鼠标样式
|
改变鼠标样式cursor
|
样式很多,重点记住pointer
|
轮廓线
|
表单默认outline
|
outline轮廓线,我们一般去掉,border是边框,我们会经常用
|
防止拖拽
|
主要针对文本域
| 防止用户随意拖拽文本域 |
三、vertical-align垂直对齐
有宽度的块级元素居中对齐,是margin:0 auto;
让文字居中对齐,是taxt-align:center;
vertical-align垂直居中对齐,它只针对行内元素或者行内块元素,对块级元素无效
vertical-align:baseline || top || middle || bottom;
设置或检索对象内容的垂直居中对齐方式
注意:
vertical-align不影响块级元素中内容对齐,它只针对于行内元素或者行内块元素
特别是行内块元素,通常用来控制图片/表单与文字的对齐
![](https://i-blog.csdnimg.cn/blog_migrate/3e697feac7b1e53cc99b402b6a1e780a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f62ace901e6065d207a13236a5f8b39e.png)
.one
{
/*默认是基线对齐*/
vertical-align
:
baseline
;
/*让图片的中线 对齐 文字的中线 居中对齐*/
vertical-align
:
middle
;
/*让图片的顶线 对齐 文字的顶线 顶部对齐*/
vertical-align
:
top
;
}
3.1图片、表单和文字对齐
可以通过vertical-align控制图片和文字垂直关系,默认图片会与文字基线对齐
3.2去除图片底侧空白缝隙
.two
{
border
:
1
px
solid
red;
}
![](https://i-blog.csdnimg.cn/blog_migrate/c5cd2c41e16d8452ef7af250e8ef313d.png)
因为·默认是基线对齐,所以底侧有空白缝隙
.two
{
border
:
1
px
solid
red;
}
.two
img
{
vertical-align
:
bottom
;
}
![](https://i-blog.csdnimg.cn/blog_migrate/219972d9f48ad47132707eb1d017f7ca.png)
四、溢出文字省略号显示
4.1 white-space
设置或检索对象内文本显示方式,通常我们使用于强制一行显示内容
white-space:normal;默认处理方式,超出部分换行显示
![](https://i-blog.csdnimg.cn/blog_migrate/7e92f224a5d092effce8fd37b878adfa.png)
white-space:nowrap;强制在一行内显示所有文本,直到文本结束或遭遇<br>标签对象才换行
![](https://i-blog.csdnimg.cn/blog_migrate/4a368fe68fe5a1309e4957c62e6af69e.png)
4.2 text-overflow文字溢出
设置或检索是否使用一个省略号标记(...)标示对象内文本的溢出
text-overflow:clip;不显示省略号标记(...),而是简单的裁剪
text-overflow:ellipse;当对象文本溢出时使用省略号标记(...)
注意:一定要首先强制一行内显示,再次和overflow属性,搭配使用
4.3 总结三部曲
1、强制一行显示文本
white-space:nowrap;
![](https://i-blog.csdnimg.cn/blog_migrate/7e92f224a5d092effce8fd37b878adfa.png)
2、超出部分隐藏
overflow:hidden;
![](https://i-blog.csdnimg.cn/blog_migrate/83f9ef896b8a8cc6b67eb865c0c19036.png)
3、文字用省略号代替超出的部分
text-overflow:ellipse;
![](https://i-blog.csdnimg.cn/blog_migrate/3d0fed8b69c92c97d198a6924d07afeb.png)
五、CSS精灵(重要)
5.1、为什么需要精灵技术:
为了有效减少服务器接收和发送的次数,提高页面的加载速度
CSS精灵也称CSS sprites、CSS雪碧
5.2、精灵技术讲解
![](https://i-blog.csdnimg.cn/blog_migrate/070b80989526cf8d4f7418f450749324.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a036d939292066fed2bfb3396aa9538c.png)
当网页访问该页面时,只需要向服务器发送一份请求,网页中的背景图像即可全部展现出来
我们需要用到CSS的:
background-image,
background-repeat,
background-position属性进行背景定位,
其中最关键的就是使用background-position属性进行精确定位
5.3精灵技术使用的核心总结
首先,我们知道CSS精灵是针对背景图片,插入图片img是不需要这个技术的
1,精确测量,每个小图标的大小和位置
2,给盒子制定小背景图片时,背景定位基本都是负值
5.4制作精灵图(了解)
CSS精灵其实是将网页中的一些背景图片整合到一张大图中(精灵图),那我们要做的就是把小图拼合成一张大图
六、滑动门
为了各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术
核心技术:
利用CSS精灵(主要是背景位置)和盒子padding撑开宽度,一般能适应不同字数的导航栏
一般经典布局都是这样的:
<li>
<a href="#">
<span>导航栏的内容</span>
</a>
</li>
a是设置左侧背景,左门
a {
doisplay:inline-block;
height:33px;
background:url(img/to.png) no-repeat;
margin:100px;
padding-left:15px;
color:#fff;
}
span时设置右侧背景,右门
span {
doisplay:inline-block;
height:33px;
一定要注意span需要背景图片右对齐
background:url(img/to.png) no-repeat right top;
margin:100px;
padding-left:15px;
color:#fff;
}
因为整个导航栏都是链接,所以a要包含span
微信导航栏案例
七、扩展
7.1margin负值之美
(1)负边距+定位:水平垂直居中
之前学过,一个绝对定位盒子,利用父级盒子的50%,然后再往左走自己宽度的一半,可以实现盒子水平居中对齐
(2)压住盒子相邻边框
div {
float:left;
width:200px;
height:300px;
border:1px solid #ccc;
}
![](https://i-blog.csdnimg.cn/blog_migrate/fbcce83dbe04b3855867c58fe70e1b85.png)
div {
float:left; 浮动紧贴元素
width:200px;
height:300px;
border:1px solid #ccc;
margin-left:-1px;
}
实现1+1=1px
![](https://i-blog.csdnimg.cn/blog_migrate/78adc20243174c17c67fecfdfb36f0eb.png)
div {
position: relative;
float: left;
width: 200px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
}
div:hover {
/*鼠标经过的时候div升到最高处*/
/* 定位盒子是最高层的 */
z-index: 1;
border: 1px solid #f40;
}
7.2、CSS 三角之美
![](https://i-blog.csdnimg.cn/blog_migrate/d9a9f68bb716c41c779b73987c7c1a2d.png)
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;
}
1、用CSS边框可以模拟三角形效果
2、宽度、高度为0;
3、我们四个边框都要写,只保留需要的颜色边框,
其余的不能省略,都改为transparent透明就好
4、为了照顾兼容性,加上font-size:0;line-height:0;