html+css学习笔记010-垂直对齐0指针0透明
2018-05-26 本文已影响30人
Mr柳上原
Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
“年轻人犯情绪问题等于白痴”
这是很久以前一位上司给我说过的话
现在回头想想
真正想要控制自己的情绪，真的好难
耿直和老好人的性格
无法达到平衡点
稍微有点倾斜
不是被人觉得是当枪使的白痴
就是被认为是阴翳的小人
生活就是这样阴晴不定前路茫茫
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meat charset='UTF-8'/> <!-- 网页字符编码 -->
<meat name='Keywords' content='关键词1,关键词2'/>
<meat name='Description' content='网站说明'/>
<meat name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
vertical-align:middle; /* 垂直对齐方式：适用于inline，inline-block元素 */ /* line-height并不能使文字完全垂直居中对齐 */
baseline 与文字基线对齐
/* 没文字时，盒子与基线对齐
有文字时，盒子里的文字基线与外面的文字基线对齐
*/
top 与line-height顶端对齐
middle 与 line-height 文字 的中间对齐
bottom 与line-height底部对齐
text-top 与文字顶部对齐
text-bottom 与文字底部对齐
/* 多个inline-block盒子并排的时候，都要设置vertical-align */
/* 解决盒子中img元素与下边框出现间隙的两种方法（图片与文字基线对不齐）
1.img{display:block;}
2.img{vertical-align:middle; /* 垂直对齐方式:相对于父元素垂直居中 默认baseline */}
*/
cursor:default; /* 定义光标类型 */
default 默认
move 移动
pointer 小手
wait 等待
url('images'),move; 自定义图片光标
opacity:0; /* 透明度：数值0~1，子元素也会被透明 */
ie浏览器兼容方法：
filter:alpha(opacity=0~100)
</style>
</head>
<body> <!-- 网页主干：可视化区域 -->
<div id='wrap' class='wrap'>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
