面试系列（一）常见的Css和HTML试题_css html 案例试卷-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39975379/article/details/108151714

面试系列将持续更新，长期维护感兴趣的小伙伴可长期关注。

为什么要写面试系列，网上的面试题已经很多了。因为我之前也是在面试之间快速突击，快餐式学习，导致学了忘，忘了学。只是为了面试而面试，直到挂掉一家很心意的公司，才醒悟自己的这种学习方式是不对的，需要多总结多思考，还要持续性学习。写这个面试系列一来是为了总结学到的知识，二来是为了督促自己坚持学习。能力有限，若发现错误还请留言提醒，感激。

面试全是套路，有些东西还是需要死背硬记的

1.清除浮动(有时候需要手写)

.clearfix：after{
    display:block;
    clear:both;
    content:'';
    visibility:hidden;
    height:0
}
.clearfix{ 
    zoom:1
}

2. BFC

BFC：就是单独的一块内容不管里面怎样渲染都不影响其外面的元素。

BFC形成条件：

overflow:不是visible

float:不是none

display:flex或者inline-block

position:absolute 或者fixed

3.absolute和relative 是依据什么定位的

absolute是依据最近元素的定义情况来定位的，就是一层层找父级元素的定位一直到body

relative是根据自身定位的

4. 垂直居中和水平居中的方式

水平居中（一般有4种）

（1）行内元素：text-align: center;

(2) 块级元素：居中元素定宽 margin: 0 auto

(3) 定位元素宽固定：position:absolute; left：50%；margin-left: - 宽度的一半；

（4）定位元素不定宽：position:absolute; left :50%; transform: translateX(-50%)

垂直居中

（1）行内元素：line-height = height

(2) 块级元素定高：position:absolute; top：50%；margin-top: - 高度的一半

（3）定位元素不定高：position:absolute; top:50%; transform: translateY(-50%)

5. line-height继承的特性

（1）父元素的line-height 是数值或者是比值，则子元素直接继承这个值。

（2）父元素的line-height 是百分比，则子元素继承父字体*百分比算出来的值。

6. em,rem,px

px:是常用的绝对长度单位

em : 是相对长度单位，相对于父元素，不常用

rem : 也是相对长度单位，相对于根元素，响应式常用。r 为root。rem配合media-query使用可实现具有阶梯性的响应试布局。

7. 网页视口尺寸（vw,vh）

在说vw 和vh之前要知道三个尺寸，他们分别是

（1）window.screen.height 屏幕高度

（2）window.innerHeight 网页视口高度就是除了浏览器头和下巴，剩下来的可以显示网页内容的高度（这里需要注意在用浏览器模拟手机时，这个值等于window.screen.height和真机测试是有出入的）

（3）document.body.clientHeight body元素的高度

vw = 网页视口宽度/100

vh = 网页视口高度/ 100

vmin: 取1vw 和1vh里面的最小值

vmax：取1vw和1vh里面的最大值

8. 盒模型（css里面的重点，经典面试题）

盒模型分两种IE盒模型和W3c盒模型

w3c盒模型width和height只包含content部分

IE盒模型width和height是content+padding+border

在ie8+浏览器中可用box-sizing控制使用的盒模型

border-box则用的是IE盒模型

content-box则用标准盒模型

9.margin负值和margin重叠

margin的top和left为负值时，元素向上或者左移动

margin的bottom和right 为负值时，该元素的下面或者右面的元素，向上或者左移动，本身不受影响

margin重叠：相邻元素的margin-top和margin-bottom会重叠，空白元素的<p></p>也会重叠

下一篇：面试系列（二）js基础知识