前端面试题之CSS篇

1.说一下CSS盒子模型

盒子模型从内往外的结构依次是content，padding，border，margin

CSS盒子模型主流上主要分为两种

W3C盒子模型：width仅包括content部分。

IE盒子模型：     width部分包括了content，padding和border

W3C盒子模型的box-sizing默认值为 content，IE盒子模型的box-sizing默认值为border

 

2.画一条0.5px的线

.line{
            width: 0.5px;
            height: 100%;
            background-color: red;
        }

background样式不是必须的，只是为了在浏览器中看的更清楚而已。没什么好说的，但是如果使用padding或者border的话，著需要设置0.25px就可以了，因为padding和border是成对存在的。

 

3.link标签和import标签的区别

link是xhtml标签，除了可以加载CSS还可以定义RSS等其他事务，import只能加载CSS

link在页面载入时同时加载    import在页面加载后再加载

link是xhtml标签，没有兼容性问题    低版本浏览器不支持import载入CSS样式

link支持用js操作DOM修改样式  import不支持

 

4.transition和animation的区别

transiton强调的是一个过渡过程，只能设置一个开始帧和结束帧。需要一个触发事件

animation是一个动画过程，可以设置各个阶段的帧，不需要触发事件。

阮一峰的动画讲解

 

5.Flex布局

弹性盒子布局，可以很轻松的实现普通布局难以实现的样式，如垂直居中等。

主要属性有     

flex-direction    规定主轴的对齐方向  row为水平  column为竖直

flex-wrap          规定主轴元素的换行方式

flex-flow            前两个的合称

align-items        垂直对齐方式

justify-content   定义了项目在主轴上的对齐方式及额外空间的分配方式。

align-content     定义了项目在交叉上的对齐方式及额外空间的分配方式。

阮一峰的flex布局

 

6.BFC（块级格式化上下文，用于清除浮动，防止margin重叠等）

BLOCK FORMAT CONTENT 块级格式化上下文，是一个独立的渲染区域，在BFC内的布局和外部布局互不干扰。

它的作用是清除浮动和消除外边距重叠问题

触发BFC的条件 

position 为float absolute

display不为none

overflow不为visible

 

7.垂直居中的方法（尽可能多写）

脱离文档流的写法

.center{
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: auto;
}

margin负值法

.center{
            width: 30px;
            height: 30px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -15px;
            margin-top:  -15px;
        }

table-cell法

父元素设置display为table-cell，再设置属性vertical-align：middle可以设置子元素垂直居中

flex法

父元素设置display为flex      并设置属性   justify-content：center；  align-items：center

 

8.说一下块元素和行元素

块元素是指独占一行的元素，如h，div，p等。可以设置高度和宽度

行元素是指在页面布局中不独占一行的元素。不可以设置垂直方向上的margin和padding。width和height设置无效

 

9.visibility=hidden, opacity=0，display:none

visibility=hidden和opacity=0是将元素隐藏起来，但是元素依然占据其在文档流中的位置。

display设置none是将元素直接从文档流中移除。

 

10.双边距重叠问题

父子或兄弟节点会出现的外边距重叠问题，当都为正时，去较大值。当都为负时，取绝对值较大值。当一正一负时，取插值的绝对值

 

11.position属性 比较

positon为static 默认布局，元素出现在文档流中原本的位置。

position为absolute，绝对定位。元素脱离文档流，以页面文档为标准进行绝对定位

position为relative，相对布局，元素脱离文档流，以其原本在文档流中的位置进行绝对定位

position为fixed，元素以视觉窗口为标准进行绝对定位，脱离文档流

position为sticky，元素以视觉窗口为标准进行绝对定位,但是保留其在文档流中本来的位置。

 

12.浮动清除

清除浮动的几种方法问的很多喔

方法1，插入空标签法。

在设置浮动元素的最后插入一个空div标签，空标签样式设置clear：both

方法2.触发BFC条件，BFC作用之一就是清除浮动 父元素设置overflow：hidden

方法3. css伪类法

其实本质上还是利用的插入空标签

.father:last-child{
            content: '.';
            height: 0px;
            opacity: 0;
            display: block;
        }

方法四：双伪元素清除浮动法

.父元素：before，.父元素：after：{
    display：table;
    content:""
}

.父元素：after{
    clear：both
}

.父元素{
    *zoom：1
}

 

13.CSS选择器有哪些，优先级呢

内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

 

14.了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

页面上的元素发送变化使得页面重新渲染的过程叫做重绘（vidibility、outline、背景色等属性的改变等），页面上的元素变化使得页面结构发生变化从而使页面重新渲染的过程叫做重排。重排一定会引起重绘，但是重绘不一定会引起重排。

减少重绘和重排的方法。

将会经常变化的标签设置成脱离文档流。不会影响到其他页面结构

可以先将需要重排的元素设置成display：none，对此进行很多次操作之后恢复显示。这样页面只会执行一次重绘

使用文档片段创建一个子树，然后再拷贝到文档中。

缓存布局信息