HTML 学习笔记3
2016-11-28 本文已影响27人
osborne
1 . line-height 的作用
- 在没有设置标签的高度
height时，line-height控制其表现高度； - 把标签的
line-height设置为所需要的box的大小，可以令标签内单行文字垂直居中,无需设置高度height；
2 . 如何查CSS属性的兼容性？比如inline-block哪些浏览器支持？
-
利用www.caniuse.com来查询CSS属性的兼容性。
-
inline-block的兼容性为
css inline-block兼容性.png
3 . a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?
- a标签
href属性表示a标签的链接地址
title属性表示在点击目标元素的时候出现的提示内容
target属性表示用什么样的方式打开链接。 - title alt属性的区别
title属性表示当鼠标放在标签内容的时候显示的提示文字。title属性不像alt属性，它不是某一个标签的专属属性，所以可以用在很多的标签上，包括img.a.p等标签。
alt属性表示图片无法显示的时候，出现的代替文字。所以alt是img标签的专属属性，所以a标签是不允许出现alt属性的。alt属性防止img无法显示或网络环境不佳的情况下，帮助用户理解图片内容，帮助搜索引擎理解图片信息。 - 新窗口打开链接：
<a href="#" target="_blank"></a>
4 . display: none , visibility: hidden,opacity:0 的作用，及区别
-
display: none；此元素不会被显示；元素从页面上消失了，不保存物理空间，是彻底从文档流里消失了； -
visibility: hidden；元素是不可见的；但是为它保留了物理空间，只是隐藏起来了； -
opacity:0；设置透明度为0；当透明度为0 的时候元素就消失了，空间还是会被自己占有。0为完全透明，1为不透明。
5 . 如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？
- 去除a链接的默认样式
去除下划线：a{text-decoration:none;}
改变点击前颜色：a:link{color:#xxx;}
改变鼠标划过颜色：a:hover{color:#xxx;}
改变点击后颜色：a:visited{color:#xxx;} - a链接不继承父容器颜色，需要单独设置。
代码题
1 . 写个div，边框为1px, #ccc, 宽度为200px, 高度为80px, 内有一行文字这里是饥人谷，文字字体大小14px, 颜色#f0f, 文字在div里垂直水平居中
- div代码
div.png
2 . 对于如下html代码
- 给
.dialog加个边框 1px, #ccc - 给header设置高度40px, 左对齐，左内边距10px, 文字16px, 颜色#f00,下边框#ccc 1px。
- 给content 设置高度100px,内部 a链接去掉下划线，颜色 blue, 鼠标放置上去后颜色变为 red
- 给footer设置高度50px，内部 btn设置 边框1px #ccc, 圆角3px, 上下内边距4px,左右内边距3px，显示为inline-block, footer内居中显示;
<div class="dialog"> <div class="header"> <h3>我是标题</h3> <a class="close" title="关闭" href="#">X</a> </div> <div class="content"> <h3>欢迎来到 <a href="http://jirengu.com">饥人谷</a></h3> <p> 在这个大家庭你能快乐的学到更多前端技能</p> </div> <div class="footer"> <a class="btn btn-cancel" href="#">取消</a> <a class="btn btn-confirm" href="#">确认</a> </div> </div>
- 补充代码html
3 . 写一个如下表格表头是蓝色，表行是白色。 当鼠标放置到表行时背景色变为淡灰色
- 表格代码
4 . 下面代码有什么作用？手抄一遍如下代码，改变浏览器宽度看看效果
`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.wrap{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">这里是标题</div>
</div>
<div id="content">
<div class="wrap">这里是内容</div>
</div>
<div id="footer">
<div class="wrap">这里是 footer</div>
</div>
</body>
</html>`
- 修改代码
-
margin:0 auto属性功能是设置一个元素的外边距，后跟两个参数，第一个参数代表上下外边距是0，第二个参数代码左右外边距根据浏览器自动调整。 - 代码题四中用了属性
margin:0 auto。我们可以看到现象，当浏览器宽度大于908px (div的宽度900加body的默认宽度8) 时，div元素居中显示；当浏览器宽度小于908px，下方出现滚动条，页面固定在908px宽度。
- 参考资料
-
display:none、visibility:hidden、opacity:0的区别【代码】
