前端面试题十七

一、请解释 inline 和 inline-block 的区别？

行内元素和行内块级元素，最基本的区别就是inline元素不能设置宽高边距，inline-block则可以，block是块级元素是独占一行的，inline-block就是能放在一行的block。关于这个问题，低版本的ie是有bug的，通过再次设置display为inline可以解决。

 

div{
    display:inline-block;
}
div{
    display:inline;
}

二、请解释 relative、fixed、absolute 和 static 元素的区别

relative相对于自己
fixed相对于浏览器
absolute相对于第一个非static的父级元素
static无定位

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响　　
3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。若想把一个定位属性为absolute的元素定位于其父级元素内，只有满足两个条件：第一：设定TRBL第二：父级设定Position属性
4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

 

三、CSS 中字母 'C' 的意思是叠层 (Cascading)。请问在确定样式的过程中优先级是如何决定的 (请举例)？如何有效使用此系统？

采用权值相加的方式来适配权值最高的css，具体权值：标签里写style(1000)，id选择器(100)，class选择器(10)，标签(1)，还有!important可以写在任何地方，而且优先级是最高的。

 

 

作者：Arno_z
链接：https://www.jianshu.com/p/1c314dd0ba1f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。