zoukankan      html  css  js  c++  java
  • 分享几道前端面试题(2)

    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 透明的元素的子元素不会继承透明效果!)

  • 相关阅读:
    pandas isin 和not in
    游戏开发需要学什么?
    打开页面,数字会自增的效果怎么弄?
    jq 导航栏点击添加/删除类(a标签跳转页面)
    bootstrap+jq分页
    2020/12/18
    2020/12/17
    2020/12/16
    2020/12/15
    2020/12/14
  • 原文地址:https://www.cnblogs.com/qdjj/p/12490071.html
Copyright © 2011-2022 走看看