CSS高级技巧
一、元素的显示与隐藏
目的：让一个元素在页面中消失，但是不在文档源码中删除
1.1display显示
display设置或检索元素是否如何显示
display：none；隐藏元素
display：block；除了转换为块级元素之外，同时还有显示元素的意思
特点：隐藏之后，不再保留位置
1.2visibility可见性
visibility：hidden；隐藏元素，保留位置
visibility：visible；元素可视
特点：隐藏之后，保留位置（停职留薪）
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不影响块级元素中内容对齐，它只针对于行内元素或者行内块元素
特别是行内块元素，通常用来控制图片/表单与文字的对齐
.one
{
/*默认是基线对齐*/
vertical-align
:
baseline
;
/*让图片的中线 对齐 文字的中线 居中对齐*/
vertical-align
:
middle
;
/*让图片的顶线 对齐 文字的顶线 顶部对齐*/
vertical-align
:
top
;
}
3.1图片、表单和文字对齐
可以通过vertical-align控制图片和文字垂直关系，默认图片会与文字基线对齐
3.2去除图片底侧空白缝隙
.two
{
border
:
1
px
solid
red;
}
因为·默认是基线对齐，所以底侧有空白缝隙
.two
{
border
:
1
px
solid
red;
}
.two
img
{
vertical-align
:
bottom
;
}
四、溢出文字省略号显示
4.1 white-space
设置或检索对象内文本显示方式，通常我们使用于强制一行显示内容
white-space：normal；默认处理方式，超出部分换行显示
white-space：nowrap；强制在一行内显示所有文本，直到文本结束或遭遇<br>标签对象才换行
4.2 text-overflow文字溢出
设置或检索是否使用一个省略号标记（...）标示对象内文本的溢出
text-overflow：clip；不显示省略号标记（...），而是简单的裁剪
text-overflow：ellipse；当对象文本溢出时使用省略号标记（...）
注意：一定要首先强制一行内显示，再次和overflow属性，搭配使用
4.3 总结三部曲
1、强制一行显示文本
white-space：nowrap；
2、超出部分隐藏
overflow：hidden；
3、文字用省略号代替超出的部分
text-overflow：ellipse；
五、CSS精灵（重要）
5.1、为什么需要精灵技术：
为了有效减少服务器接收和发送的次数，提高页面的加载速度
CSS精灵也称CSS sprites、CSS雪碧
5.2、精灵技术讲解
当网页访问该页面时，只需要向服务器发送一份请求，网页中的背景图像即可全部展现出来
我们需要用到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;
}
div {
float:left; 浮动紧贴元素
width:200px;
height:300px;
border:1px solid #ccc;
margin-left:-1px;
}
实现1+1=1px
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 三角之美
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；
1315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
