18.元素显示与隐藏
举例：网站的广告，点击关闭就没有，一刷新就重新出现。
| 类型 | 含义 |
|---|---|
| display | 显示隐藏元素，不保留位置 display:none;(隐藏） display:block;(显示) |
| visibility | 显示隐藏元素，保留位置 visibility:visible;(可视) visibility:hidden;(隐藏) |
| overflow | 溢出显示隐藏，只对溢出部分处理 |
备注：
1.overflow(溢出时会怎样)：
| 样式 | 含义 |
|---|---|
| visible | 不切内容不加滚动条 |
| hidden | 不显示超出内容 |
| scroll | 一直有滚动条 |
| auto | 超出有滚动条，不超出没有 |
2.一般不让溢出内容显示，但如果有定位的盒子，慎用overflow：hidden（会隐藏多余部分）。
19.精灵图sprites
1.用处：
主要用于背景图片，把多个小背景图片整合到一张大图片，减少服务器接收和发送请求的次数，提高页面加载速度。
2.做法：
先量要的小图的大小，确定盒子的大小，然后left、top移动。
background: url(images/sprites.png) no-repeat -155px -106px;（一般为负值，往左/上为负值，往右/下为正值）
备注：移动背景图片位置，用background-position，移动距离为目标图片的x和y坐标。
20.字体图标iconfont
网站：icomoon/iconfont
本质：字体，文本
21.鼠标样式 cursor
cursor：default（默认三角）/pointer（小手）/move（移动即十字架）/text（文本I）/not-allowed（禁止）;
22.轮廓线outline和防拖拽文本域 resize
input, textarea {
/* 取消表单轮廓，去掉默认表单蓝边框 */
outline: none;
}
textarea {
/* 防止拖拽文本域 */
resize: none;
}
<!-- 1. 取消表单轮廓 -->
<input type="text">
<!-- 2. 防止拖拽文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
23.vertical-align
作用：设置图片或者表单（行内块元素）和文字垂直对齐，去掉图片底侧空白。
| 属性 | 含义 |
|---|---|
| baseline | 默认，放基线 |
| top | 与最高元素顶端对齐 |
| middle | 放父元素中间 |
| bottom | 与最低元素对齐 |
备注：只对行内（块）元素有效。
24.溢出的文字省略号显示
1.单行：
/* 这个单词的意思是如果文字显示不开自动换行 */
/* white-space: normal; */
/* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
white-space: nowrap;
/* 2.溢出的部分隐藏起来 */
overflow: hidden;
/* 3. 文字溢出的时候用省略号来显示 */
text-overflow: ellipsis;
2.多行：
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
25.三角做法和巧用
1.三角做法
盒子宽高为0，给4条边框transparent，再给其中一条加颜色。大盒子装小盒子，绝对定位。
<style>
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: pink;
}
.jd span {
position: absolute;
right: 15px;
top: -10px;
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: pink;
}
</style>
<div class="jd">
<span></span>
</div>
2.三角巧用
想做直角三角形，且两条直角边不一样长。
先把左边和下边的边框宽度设为0，再把上边框宽度加大。
<style>
.box1 {
width: 0;
height: 0;
/* 把上边框宽度调大 */
/* border-top: 100px solid transparent;
border-right: 50px solid skyblue; */
/* 左边和下边的边框宽度设置为0 */
/* border-bottom: 0 solid blue;
border-left: 0 solid green; */
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
border-style: solid;
/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
border-width: 100px 50px 0 0 ;
}
</style>
26.其他巧用
1.margin负值的巧妙运用
<style>
ul li {
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
/* ul li:hover {
1. 如果盒子没有定位，则鼠标经过添加相对定位即可
position: relative;
border: 1px solid blue;
} */
ul li:hover {
/* 2.如果li都有定位，则利用 z-index提高层级 */
z-index: 1;
border: 1px solid blue;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
备注：
1.解决两边框1+1=2的问题，给每个盒子加margin-left：-1px（border宽度）
2.若要实现鼠标每经过每个盒子时，盒子四条边都变色鼠标经过提高当前盒子层级，若盒子无定位，则加相对定位，若有定位，则加z-index。
2.文字围绕浮动元素的妙用
在一个大盒子中，把图片浮动放进去，文字只需要标准流就可以自动围绕着图片。
3.行内块的巧妙运用
给父亲添加text-align：center，则父亲所有的行内（块）元素都会水平居中。
