前端面试题总结-CSS

1.link和@import的区别

link属于XHTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
link方式的样式的权重高于@import的权重.

2.超链接访问过后hover样式就不出现了

被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

3.盒子模型

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).

4.选择器优先级

!important > id > class > tag

5.剧中

（1）给div设置一个宽度，然后添加margin:0 auto属性

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

（2）水平垂直剧中，外层要使用相对布局

   div{
        position:absolute;
        margin: auto;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }

6.列出display的值，说明他们的作用

block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。

7. position的设置

详见此网站

8.CSS3有哪些新特性

使用sass实现更方便

css动画
rgba
CSS3实现圆角（border-radius:8px）
阴影（box-shadow:10px）
对文字加特效（text-shadow）
线性渐变（gradient）
旋转（transform:rotate(9deg)）
缩放（scale(0.85,0.90)）
定位（translate(0px,-30px)）
倾斜（skew(-9deg,0deg)）

9.BFC

W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

（1）如何触发BFC呢
- float 除了none以外的值
- overflow 除了visible 以外的值（hidden，auto，scroll ）
- display (table-cell，table-caption，inline-block, flex, inline-flex)
- position值为（absolute，fixed）
- fieldset元素
（2）BFC特性
- 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
- 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box叠加。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
- 计算BFC的高度时，浮动元素也参与计算。

10.css权重

每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 如果两个选择器同时作用到一个元素上，权重高者生效。

权重规则:标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

   /*权重为1*/
    div{
    }
    /*权重为10*/
    .class1{
    }
    /*权重为100*/
    #id1{
    }
    /*权重为100+1=101*/
    #id1 div{
    }
    /*权重为10+1=11*/
    .class1 div{
    }
    /*权重为10+10+1=21*/
    .class1 .class2 div{
    }

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

11.clearfix:当浮动是，父元素高度不能很好使用

在子元素后面加一个空元素css设置为clear:both
用BFC