1.line-height
有什么作用?
line-height
属性设置行间的距离(行高)。
在显示文章的box里,因为文章里面的文字是有大有小的,使用px定值,由于继承性,无法实现根据文字大小自动调整间距,会出现大号文字重叠的现象。normal也不行,一般文章显示最好是650像素的宽度,1.5倍的行距较好。一般浏览器的normal值在1~1.2之间,使用normal必然文字间距过小,阅读吃力。百分值也有继承性,有个办法可以实现文字间距自动适应于文字的大小,那就是使用通配符,但是通配符大大增加了css的渲染,效率低,更好的方法,就是使用数值。150%虽然和1.5在值上是一样的,差别在于继承性,使用百分比会计算
line-height
的值,然后以px像素为单位继承下去,而1.5则是先继承1.5这个值,遍历到了该标签再计算去line-height的像素值。所以同样的效果只需要.article_box{linheight:1.5;}
就可以实现了。
heightline-height
都可以设置高度,如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height
起作用
令line-height
和height
高度值相等,可以设置单行文字的垂直居中属性,
2.如何去查CSS属性的兼容性?比如inline-block
哪些浏览器支持?
打开caniuse的网站查询
3.a 标签的href, title, target 是什么? title 和 alt有什么区别?如何新窗口打开链接?
href:用于指定超链接目标的 URL,超链接的 URL可能的值:
绝对 URL - 指向另一个站点(比如 href="http://www.example.com/index.htm")
相对 URL - 指向站点内的某个文件(href="index.htm")
锚 URL - 指向页面中的锚(href="#top")
title:鼠标悬停在超链接上时,显示该超链接的文字注释,例如:
<a href="http://www.baidu.cn" title = "百度的的中文站点">百度网站</a>
target:规定在何处打开链接文档
title作为属性时,用来为元素提供额外说明信息。例如,给超链接标签a添加了title属性,把鼠标移动到该链接上面是,就会显示title的内容,以达到补充说明或者提示的效果。
alt属性则是用来指定替换文字,只能用在img、area和input元素中,用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意,alt是替代图像作用而不是提供额外说明文字的,使用alt属性还具有搜索引擎优化效果,因为搜素引擎是无法直接读取图像的信息的,alt可以为其提供文字信息,所以对搜索引擎比较友好。
4.display: none
,visibility: hidden
, opacity:0
有什么作用?有什么区别?
display: none
:把元素隐藏起来,脱离文档流,可以理解成在页面中把该元素删除掉一样
visibility: hidden
:该元素隐藏起来了,不会改变页面布局,但是不会触发该元素已经绑定的事件
opacity:0
:隐藏元素,设置透明度为零,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件
5.如何去除 a 链接的默认样式?直接在 a 链接父容器添加颜色,能否继承到当前 a 链接上?
使用text-decoration: none;
,去除默认样式
不能
6.下面代码有什么作用?手抄一遍如下代码,改变浏览器宽度看看效果
margin: 0 auto
使得整个body在浏览器页面居中