1.line-heigh
有什么作用?
-
line-height
属性设置行间的距离(行高),不允许使用负值。
该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。 - 属性值包括:
-
normal
取决于用户代理。浏览器使用默认值,约为1.2,这取决于元素的font-family
。 -
number
设置数字,此数字会与当前的字体尺寸相乘来设置行间距,使用这种方法设置line-height
是首选方法,所有继承下来的元素不会忽略font-size
的值,line-height
会随着font-size
作相应的缩放。 -
length
设置固定的行间距。如:
div { line-height: 12pt; font-size: 10pt }
,这个line-height
的长度值12px会被后代元素继承下来,而忽略本身font-size
的值,line-height
不会随着font-size
的值作相应的改变。 -
percentage
(%)
基于当前字体尺寸的百分比行间距。计算值是给定的百分比值乘以元素计算出的字体大小。 -
inherit
规定应该从父元素继承line-height
属性的值。
- 语法
div { line-height: 1.2; font-size: 10pt } /* number */
div { line-height: 1.2em; font-size: 10pt } /* length */
div { line-height: 120%; font-size: 10pt } /* percentage */
div { line-height: 12pt; font-size: 10pt } /* length */
-
line-height
可以使文本居中,代码如下:
2.如何去查css属性的兼容性?比如inline-block
哪些浏览器支持?
CSS属性的兼容性可以通过以下网站查询:Can I Use。不仅可以查兼容性,还可以知道存在的bug。
inline-block的兼容性如下:
3.a
标签的href
,title
,target
是什么?title
和alt
有什么区别?如何在新窗口打开链接?
- a 签定义超链接,用于从一张页面链接到另一张页面。在所有浏览器中,链接的默认外观是:
未被访问的链接带有下划线而且是蓝色的。
已被访问的链接带有下划线而且是紫色的。
活动链接带有下划线而且是红色的。 - a 标签的属性:
-
download
此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。该属性也可以设置一个值来规定下载文件的名称。 -
href
规定链接指向的页面的 URL。这是一个必需属性为锚定义一个超文本链接来源。href
属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。 -
hreflang
规定被链接文档的语言。仅在使用href
属性时才可以指定hreflang
属性。 -
rel
规定当前文档与被链接文档之间的关系。 -
target
规定在何处打开链接文档。属性值如下:
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的a
标签是默认目标,它是在当前窗口直接跳转。这个目标是多余且不必要的,除非和文档标题<base>
标签中的target
属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标_self
等效。
_top
这个目标使得文档载入包含这个超链接的窗口,用_top
目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。 -
type
该属性指定在一个 MIME type 链接目标的形式的媒体类型。其仅提供建议,并没有内置的功能。
-
title
是当鼠标移到元素上时显示提示信息,title
是一个全局的属性,不仅仅可以用在a
标签里面。
alt
属性只能用在img
、area
和input
元素中,指定了替代文本,用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。title
与alt
的区别:alt
只在图像无法显示时才会显示。而title
时鼠标移动上去就会显示。
4.display:none
,visibility:hidden
,opacity:0
有什么作用?有什么区别?
display:none
表示元素及其它的子元素 不会被呈现。使元素脱离文档流。
visibility: hidden
表示隐藏元素,但是其他元素的布局不改变,相当于此元素变成透明。
opacity:0
表示元素完全透明,但它部影响元素本来的作用。只是变成了透明。
5.如何去除a
链接的默认样式?直接在a
链接父容器添加颜色,能否继承到当前a
链接上?
- 去除默认样式用:
text-decoration: none
;
- 直接在
a
链接父容器添加颜色,不能继承到当前a
链接上,是因为被浏览器对a标签默认样式覆盖掉了。要实现对a
链接颜色起作用,必须单独设置a
属性。
6.margin: 0 aut0;
和text-align:center;
的区别?
-
margin: 0 aut0;
是作用在当前元素上使元素居中,auto
是表示当前
margin
自动设置。如果你元素的文本设置了宽度,元素居中,但相对于网页,文本并没有居中。所以,整体效果还是没有居中的。 -
text-align:center;
是作用在父元素上,表示了子元素的文本居中。整体效果是居中的。