码迷,mamicode.com
首页 > 其他好文 > 详细

分享几道前端面试题(2)

时间:2020-03-14 01:29:30      阅读:53      评论:0      收藏:0      [点我收藏+]

标签:试题   控制   html   方式   元素   size   select   let   是什么   

1.伪元素和伪类的区别?

 

答案:

1、伪元素使用 2 个冒号,常见的有:::before,::after,::first-line,::first-letter,::selection、::placeholder 等;

  伪类使用1个冒号,常见的有::hover,:link,:active,:target,:not(),:focus等。

2、伪元素添加了一个页面中没有的元素(只是从视觉效果上添加了,不是在文档树中添加);

  伪类是给页面中已经存在的元素添加一个类。

解析:

CSS 伪元素是添加到选择器的关键字,去选择元素的特定部分。它们可以用于装饰(:first-line:first-letter)或将元素添加到标记中(与 content:...组合),而不必修改标记(:before:after)。

:first-line:first-letter可以用来修饰文字。

上面提到的.clearfix方法中,使用clear: both来添加不占空间的元素。

使用:beforeafter展示提示中的三角箭头。鼓励关注点分离,因为三角被视为样式的一部分,而不是真正的 DOM。如果不使用额外的 HTML 元素,只用 CSS 样式绘制三角形是不太可能的。

 

2.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3 新增伪类有那些?

 

答案:

        1.id选择器( # myid)

        2.类选择器(.myclassname)

        3.标签选择器(div, h1, p)

        4.相邻选择器(h1 + p)

        5.子选择器(ul < li)

        6.后代选择器(li a)

        7.通配符选择器( * )

        8.属性选择器(a[rel = "external"])

        9.伪类选择器(a: hover, li: nth - child)

    *   可继承: font-size font-family color, UL LI DL DD DT;

    *   不可继承 :border padding margin width height ;

    *   优先级就近原则,样式定义最近者为准;

    *   载入样式以最后载入的定位为准;

优先级为:

       !important >  id > class > tag  

       important 比 内联优先级高

CSS3新增伪类举例:

    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

    :enabled、:disabled 控制表单控件的禁用状态。

    :checked,单选框或复选框被选中。

 3.行内元素和块级元素的具体区别是什么?行内元素的 padding 和 margin 可设置吗?

 

答案:

  • 块级元素(block)特性:

    • 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
    • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
  • 内联元素(inline)特性:

    • 和相邻的内联元素在同一行;
    • 宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变(也就是 padding 和 margin 的 left 和 right 是可以设置的),就是里面文字或图片的大小。

那么问题来了,浏览器还有默认的天生 inline-block 元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些?

答案:<input> 、<img> 、<button> 、<texterea> 、<label>。

 

3.什么是外边距重叠?重叠的结果是什么?

 

答案:

外边距重叠就是 margin-collapse。

在 CSS 当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则:

  1. 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。

  2. 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。

  3. 两个外边距一正一负时,折叠结果是两者的相加的和。

 

4.什么是外边距重叠?重叠的结果是什么?

 

答案:

外边距重叠就是 margin-collapse。

在 CSS 当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则:

  1. 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。

  2. 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。

  3. 两个外边距一正一负时,折叠结果是两者的相加的和。

 

5.rgba()和 opacity 的透明效果有什么不同?

 

答案:

rgba()和 opacity 都能实现透明效果,但最大的不同是 opacity 作用于元素,以及元素内的所有内容的透明度,

而 rgba()只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果!)

分享几道前端面试题(2)

标签:试题   控制   html   方式   元素   size   select   let   是什么   

原文地址:https://www.cnblogs.com/qdjj/p/12490071.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!