WEB前端面试题汇总（CSS）

头像
永久
    阅读 5 分钟
    3

    position的值， relative和absolute分别是相对于谁进行定位的？

    <1>、relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。
    <2>、absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。
    <3>、fixed: 生成绝对定位，相对于浏览器窗口或者frame进行定位。
    <4>、static:默认值，没有定位，元素出现在正常的文档流中。
    <5>、sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。

    position:absolute和float属性的异同？

    共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
    不同点：float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。absolute会覆盖文档流中的其他元素。

    box-sizing属性有哪些？

    box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box;
    <1>、content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border+padding+content的宽度/高度决定，设置width/height属性指的是content部分的宽/高。
    <2>、border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border+padding+content的宽度/高度。
    <3>、padding-box：设置width/height属性指的是padding+content的宽度/高度。

    标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或边距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

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

    选择符：
    <1>、id选择器（#myId）;
    <2>、类选择器（.myClassName）;
    <3>、标签选择器（div,p,h1）;
    <4>、相邻选择器（h1 + p）;
    <5>、子选择器（ul > li）;
    <6>、后代选择器（li a）;
    <7>、通配符选择器（*）;
    <8>、属性选择器（button[disabled="true"]）;
    <9>、伪类选择器（a:hover,li:nth-child）;表示一种状态
    <10>、伪元素选择器（li:before、:after,:first-letter,:first-line,:selecton）;表示文档某个部分的表现

    优先级：
    !important > 行内样式（比重1000） > id（比重100） > class/属性（比重10） > tag / 伪类（比重1）;

    伪类和伪元素区别：
    1>、伪类：a:hover,li:nth-child；
    2>、伪元素：li:before、:after,:first-letter,:first-line,:selecton;

    伪元素和伪类都是选择器的补充，伪类表示的是一种状态，伪元素表示文档的某个确定部分的表现。
    伪元素选择器选择出来的部分不再dom里，也不能对其绑定事件，但是如果对伪元素前面的选择器定义的元素绑定了事件，伪元素同样会生效。

    新增伪类
    1>、li:first-of-type:选择属于其父元素的首个<li>元素；
    2>、li:last-of-type:选择属于其父元素的最后一个<li>元素；
    3>、li:only-of-type:选择属于其父元素的唯一一个<li>元素；
    4>、li:only-child:选择属于其父元素的唯一子元素；
    6>、li:nth-child(2):选择属于其父元素的第二个<li>元素；
    7>、:enabled :disabled:选择表单控件的禁用状态；
    8>、:checked:单选或复选框被选中状态；

    对BFC规范的理解？

    BFC定义：块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个相邻的块级盒在垂直方向的margin会发生折叠。

    BFC布局规则：
    1>、内部的box会在垂直方向，一个接一个的放置。
    2>、box的垂直方向的距离有margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。
    3>、每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。
    4>、BFC的区域不会与float box重叠。
    5>、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。
    6>、计算BFC的高度时，浮动元素也参与计算。

    哪些元素会产生BFC：
    1>、根元素；
    2>、float属性不为none；
    3>、position为absolute或fixed；
    4>、display为inline-block，table-cell，table-caption，flex，inline-flex；
    5>、overflow除了visible以外的值（hidden、auto、scroll）;
    6>、fieldset元素

    运用BFC：
    1>、解决margin重叠问题：根据BFC布局原则2，在元素外侧包裹一层容器，并触发该容器生成一个BFC，那么两个元素就不在同一个BFC,就不会发生margin重叠。

    <style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

    图片描述

    2>、自适应两栏布局：

    <style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

    4dca44a927d4c1ffc30e3ae5f53a0b79.png?_=3674372

    根据BFC布局规则第3条：即使存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。
    解决：根据BFC布局规则第4条，我们可以通过通过触发main生成BFC， 来实现自适应两栏布局。

    .main {
    overflow: hidden;
}

    当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下：
    t01077886a9706cb26b.png?_=3674372

    3>、清除内部浮动：

    <style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

    t016035b58195e7909a.png?_=3674372

    根据BFC布局规则第6条：计算BFC的高度时，浮动元素也参与计算，为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

    .par {
    overflow: hidden;
}

    t016bbbe5236ef1ffd5.png?_=3674372

    解释下浮动和它的工作原理？清除浮动的技巧：

    原理：任何元素都可以被浮动，浮动元素脱离文档流，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    浮动引起的问题：
    1>、父元素的高度无法被撑开，影响与父元素同级的元素；
    2>、与浮动元素同级的非浮动元素（内联元素）会跟随其后；
    3>、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构；

    清除浮动：
    1>、使用空标签清除浮动：
    这种方法是在所有浮动标签后面添加一个空标签 <div style="clear:both;"></div>. 弊端就是增加了无意义标签。
    2>、使用after伪类：

    #parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

    3>、浮动外部元素；
    4>、设置父元素overflow为hidden或者auto，触发父元素BFC；

    常见兼容性问题

    1>、png24位的图片在ie6浏览器上出现背景，解决方案是做成png8，也可以引用一段脚本处理。
    2>、浏览器默认的margin和padding不同。解决方案：加一个全局的*{margin：0；padding：0}。
    3>、ie6双边距bug（20px距离）：块属性标签float后，又有横行的margin情况下，在ie6显示margin值比设置的大。解决方案：在float标签样式控制中加入_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)。
    4>、渐进识别方式，从总体中逐步排除局部：
    首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。
    接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

      .bb{
       background-color:#f1ee18;/*所有识别*/
      .background-color:#00deff\9; /*IE6、7、8识别*/
      +background-color:#a200ff;/*IE6、7识别*/
      _background-color:#1e0bd1;/*IE6识别*/
  }

    待续....2015.5.29

    css面试
    永久
    69 声望3 粉丝
    下一篇 »
    WEB前端面试题汇总（JS）

    引用和评论

    推荐阅读
    头像
    WEB前端面试题汇总（JS）

    永久赞 13阅读 9.1k

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    Bitmap 和 布隆过滤器傻傻分不清？你这不应该啊

    程序员小富赞 8阅读 1.6k评论 1

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    0 条评论
    得票最新