前端面试 - css , 布局 ，js ,vue

：html,css相关

1. 介绍一下标准盒子模型和低版本IE盒子模型

标准盒子模型   宽度 = content+border+padding+margin

低版本IE盒子模型    宽度 = 内容宽度(content+border+padding)+margin

也就是说区别在于， 低版本IE盒子模型的内容宽度直接包含了border和padding

 

2,关于box-sizing

box-sizing：用来控制元素盒子模型的解析模式，默认是content-box。

content-box：为标准的盒子模型

borer-box：为IE传统盒子模型，content包含了border+padding+content的宽/高

3，css的选择器有哪些？css有哪些属性可以继承?css的优先级顺序？

css的选择器：id选择器，类选择器（class）,后代选择器（ul li），标签选择器（p a），相邻选择器（div+span），子选择器（ul >li），伪类选择器（a:hover，div:before，div:after），通配符选择器（*），属性选择器（input[type='text']）

css可以继承的属性：font-size，color，font-family

css不可以继承的属性：width，height，padding，margin，border

优先级：!important  >  style内联样式 >  id >  class >  其他

4,css3新增的伪类有哪些？

:first-of-type  选中属于其父元素的特定类型的第一个元素

:last-of-type  选中属于其父元素的特定类型的最后一个元素

:nth-child(2)  选择属于其父元素下面的第二个子元素

:only-of-type  选中属于其父元素下的唯一特定类型元素

:only-child  选中属于其父元素下的唯一子元素

:disabled  禁止选中

:checked  多选单选的选中状态

5,如何左右居中一个div?左右居中一个浮动的元素？ 左右居中一个绝对定位的元素？

div

width:100px;
height:200px;
margin:0 auto;

浮动的元素

width:100px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-100px;

绝对定位的元素

position:absolute;
left:0;
right:0;
margin:0 auto;

6,position有哪些值，有什么作用？

static 默认值

relative 相对定位，还占有位置，在原位置的基础上定位

absolute 绝对定位，向上找到唯一一个不是static的元素，相对此元素定位

fixed  固定定位，相对可视窗口定位

sticky  粘性布局

注意：sticky使用有几点需要注意：

1。父元素宽度/高度要大于设置sticky的元素的宽度/高度；

2。sticky的属性，必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

3。sticky只在其父元素内生效

4。父元素不可以设置overflow:hidden 或者overfloe:auto 属性

7,请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

传送门

8,用css设置一个三角形

设置div的宽高为0，配合border和transparent属性

width:0;height:0;
border-bottom:100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;

9,display:none和visibility：hidden的区别？

display:none：元素在页面在不再显示，没有其对应的位置（回流+重绘）

visibility：hidden：元素隐藏，但是页面扔保留其位置（重绘）

10，对BFC规范的理解？

传送门

11，清楚浮动的方法

1.父元素设置高度

2，父元素设置overflow:hidden或者overflow:auto

3，浮动元素最后加一个空div标签，设置clear:both

4，使用伪类元素atter

.box:after{
    content:'';
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.box{
    *zoom:1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

 5，使用:after和:before双伪类元素清除浮动

.box:after,.box:before{
    content:'';
    display:table;
}
.box:after{
    clear:both;
}
.box{
    *zoom:1;
}

12.浏览器的渲染机制