前端面试宝典11-15题

     11.CSS 选择符有哪些？哪些属性可以继承？

    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 ;

    12.CSS 优先级算法如何计算？

    优先级就近原则，同权重情况下样式定义最近者为准;

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

    优先级为:

    同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文

    件中）。

    !important > id > class > tag

    important 比 内联优先级高

    13.如何居中 div？

    水平居中：给 div 设置一个宽度，然后添加 margin:0 auto 属性

    div{width:200px;margin:0 auto;}

    让绝对定位的 div 居中

  div {position: absolute;width: 300px;height: 300px;margin: auto;top: 0; 
    left: 0;bottom: 0;right: 0;background-color: pink; /* 方便看效果 */}

    水平垂直居中一

    确定容器的宽高 宽 500 高 300 的层,设置层的外边距

    div {position: relative; 
    /* 相对定位或绝对定位均可 */ 
    width:500px;height:300px;top: 50%;left: 50%;margin: -150px 0 0 -250px; 
    /* 外边距为自身宽高的一半 */ 
    background-color: pink; 
    /* 方便看效果 */}

    水平垂直居中二

    未知容器的宽高，利用 `transform` 属性

  div {position: absolute; 
    /* 相对定位或绝对定位均可 */ 
    width:500px;height:300px;top: 50%;left: 50%;transform: translate(-50%, -50%); 
    background-color: pink; 
    /* 方便看效果 */}

    水平垂直居中三

    利用 flex 布局,实际使用时应考虑兼容性

 .container {display: flex; align-items: center;/* 垂直居中 */justify-content: center;/* 
    水平居中 */} 
    .container div {width: 100px;height: 100px;background-color: pink;/* 方便看效果 */}

    14.display 有哪些值？说明他们的作用。

    block

    块类型。默认宽度为父元素宽度，可设置宽高，换行显示。

    none

    缺省值。象行内元素类型一样显示。

    inline

    行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

    inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。

    list-item

    象块类型元素一样显示，并添加样式列表标记。

    table

    此元素会作为块级表格来显示。

    inherit

    规定应该从父元素继承 display 属性的值。

    15.position 的值 relative 和 absolute 定位原点是？

    absolute

    生成绝对定位的元素，相对于值不为 static 的第一个父元素进行定位。

    fixed （老 IE 不支持）

    生成绝对定位的元素，相对于浏览器窗口进行定位。

    relative

    生成相对定位的元素，相对于其正常位置进行定位。

    static

    默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声

    明）。

    inherit

    规定从父元素继承 position 属性的值。