keywords : line-height, 垂直居中，单行文本两端对齐，inline-block，visibility、opacity。
ps : Sublime text2如何设置快捷键让编写的HTML文件在浏览器预览？
-
line-height有什么作用?
line-height按字面意思即为“行高”。line-height属性是指文本行基线之间的距离 ，而不是文字大小。line-height控制行间距，其与字体大小之差就是行间距。在应用到块级元素时，line-height定义了元素中文本基线的最小距离。注意，它定义的是最小距离，而不是一个绝对值，文本基线拉开的距离可能比line-height要大。
line-height.PNG
1、垂直居中
<style type="text/css">
div
{
border:1px solid #ccc;
text-align:center;
height:80px;
line-height:80px;
}
</style>
</head>
<body>
<div>line-height=height 垂直居中</div>
</body>
利用line-height垂直居中.PNG
2、深入讨论
line-height的概念比想象中的要复杂。在继续讲line-height之前，先要明确几个概念：文本行、行框（line box）、行内框（inline box）。
文本行中的每个元素都会生成一个内容区，这由字体大小确定。这个内容区则会生成一个行内框（inline box）。如果不存在其他因素，这个行内框就完全等于该元素的内容区。
内容区加上行间距就等于行内框.PNG
要确定一个给定元素的行间距，只需将line-height的计算值减去font-size的计算值。这个计算值是总的行间距。而且要记住，这可能是一个负值。然后将行间距除以2，并分别应用到内容区的顶部或底部。此时，其结果就是该元素的内容框。
行框图.PNG
在未指定line-height的情况下，文本行的line-height会取默认值normal。不同的浏览器对normal的解释可能不同。这使得我们一般看见的文段内容的行框要高于给定元素的font-size值，从显示效果来看，文段会存在行间距。
line-height与font-size.PNG
对于多行文字而言，上行文字的行框底端是下行文字的行框顶端。如果line-height小于font-size就会造成多行文字重叠。
多行文字重叠.PNG
只需保证line-height大于font-size即可避免此种情况。
但需注意的是，当一个块级元素从另一个元素继承line-height时，问题会更复杂。line-height值从父元素继承时，要从父元素计算，而不是在子元素上计算。
<style>
body{
font-size:10px;
}
div{
line-height:1em; /*计算后传给子元素*/
}
p{
font-size:18px;
}</style>
<div>
<p>
文本的字体是18px,但从父元素继承的line-height值为10px。会导致多行文本重叠。
</p>
</div>
不要使用em.PNG
如果采用数值（number），即可避免此种问题。因为数值（或缩放因子）是继承值，而不是计算值。这个数会应用到该元素及所有子元素，子元素根据自己的font-size计算line-height。
body{
font-size:10px;
}
div{
line-height:1; /*采用数值，或者说缩放因子*/
}
p{
font-size:18px;
}
正常.PNG
-
如何去查CSS属性的兼容性？比如inline-block哪些浏览器支持？
通过Can I use等网站，可以查看CSS属性在各浏览器的支持情况。
caniuse.PNG
-
a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?
<a>标签定义超链接，用于从一张页面链接到另一张页面。
<a>元素最重要的属性是 href 属性，它指示链接的目标。
<a>标签title是工具提示，当鼠标在超链接上悬停时，会提示title中的内容。
<a>属性target规定从何处打开链接文档。
alt是ime属性，指示当图片不能显示时，在图片位置显示的内容。
给target赋值_blank,当点击超链接时，文档会在新窗口打开。
例如<a target="_blank" href="http://www.jianshu.com/p/f566452a9f29">郑哲明的简书</a>
-
display: none , visibility: hidden, opacity:0 有什么作用？有什么区别？
.hidden {
display:none;
} ```
此时，元素将彻底消失，如同从未存在，下面的元素上移，填补隐藏元素留出的空间，网页将重新渲染和重新排列。
.hidden{
visibility:hidden;
}```
此时，被选中的元素隐藏，网页上不可见，但仍然占据空间，网页重新渲染但不会重新排列，不可用js绑定事件。
.hidden{
opacity:0;
}
此时，元素不可见，完全透明，占据的位置仍然保留，可以用js绑定事件。
可见，visibility:hidden和opacity:0可以起到同样的视觉效果，但对js的反应不同。
-
如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？
对相应链接应用样式text-decoration:none即可。
链接无法继承父元素的颜色属性。如下：
链接不能继承颜色.PNG
网友评论