一、HTML面试题
1、如何理解语义化？
我的回答：语义化就是实现同样的功能，尽量使用html里面section，main，这些约定俗成的结构去书写dom结构。这样方便理解。
优化以后的回答：写主体结构使用main，section，footer，标题，h2,h3,列表使用ul,li,文字使用p标签。
通过遵守同样的规则，使彼此可以看懂的彼此表达的意思，这也是语言的作用，所以被称为语义化。总得来说，就是方便看懂，便于搜索引擎SEO。
2、默认情况下，哪些元素是块级元素，哪些是内联标签？
我的回答： div，p,ul,ol 等独占一行，内联元素span img button input不会独占一行。
二、CSS面试题
1、盒模型的计算
offsetWidth = 宽度+内边距+边框，无外边距;
使用border-box
如下图：
2.margin纵向重叠的问题
- 相邻元素的
margin-top和margin-bottom会发生重叠 - 空白内容的
<p></p>也会重叠
答案：15px
3.margin 设置负值的问题
- margin-top和margin-left负值，元素向上、向左移动。
- margin-right负值，右侧元素左移，自身不受影响。
- margin-bottom负值，下方元素上移，自身不受影响。
4、BfC的理解和应用？
- Block format context，块级格式化上下文。
- 一块独立渲染区域，内部的元素渲染不会影响到边界以外的元素。
最常应用：清除浮动；
形成BFC的常见条件：
- float 不是none
- position 是absolute 或者fixed
- overflow 不是visible
- display 是flex inline-block等
设计的目的就是它要能够包容它内部的元素，里面的元素不要乱跑，祸害别人。不要脱离文档流。好像一个史莱姆，把什么东西都吞进去。
推荐使用伪元素clearfix:after
.clearfix{
content:'';
height:0;
display:block;
clear:both;
visibility:hidden
}5、float布局
如何实现圣杯布局和双飞翼布局？（这是谁起的破名字）
圣杯布局
- 使用float布局
- 两侧使用margin负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用padding，一个用margin<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
<style type="text/css">
.container {
padding: 0 300px 0 200px; /* 重点 */
}
.main,
.left,
.right {
min-height: 130px;
float: left;
position: relative;
}
.main {
background-color: blue;
width: 100%;
}
.left {
background-color: aqua;
width: 200px;
margin-left: -100%; /* 重点 */
left: -200px; /* 重点 */
}
.right {
background-color: aquamarine;
width: 300px;
margin-right: -300px; /* 重点 */
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</html>双飞翼布局： :略
手写clearfix
.clearfix:after{
display:table;
content:'';
clear:both;
}
.clearfix{
*zoom:1;
}
6. flex布局
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>色子</title>
<style>
.box {
border: 2px solid #ccc;
width: 200px;
height: 200px;
display: flex;
justify-content: space-around;
}
.item {
width: 30px;
height: 30px;
border-radius: 15px;
background-color: #ccc;
}
.item:nth-child(2) {
align-self: center
}
.item:nth-child(3) {
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>7、CSS 定位
absolute 和relative分别依据什么定位？
定位元素：
- absolute，relative，fixed
- body
8、水平居中和垂直居中
我的回答：
1.flex:
.box {
width: 200px;
height: 200px;
border: 2px solid #ccc;
display: flex;
justify-content: center;
}
.item {
align-self: center;
width: 100px;
height: 100px;
border: 1px solid pink;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平居中</title>
<style>
.box {
width: 200px;
height: 600px;
border: 2px solid #ccc;
position: relative;
}
.box div {
height: 100px;
border: 1px solid #000;
margin-bottom: 10px;
}
.item1 {
text-align: center; /* 重点 */
line-height: 100px;
}
.item2 {
width: 100px;
margin: auto; /* 重点 */
}
.item3 {
position: absolute;
width: 100px;
left: 50%;/* 重点 */
margin-left: -50px; /* 重点 */
}
</style>
</head>
<body>
<div class="box">
<div class="item1">
<span>一段文字</span>
</div>
<div class="item2">this is block</div>
<div class="item3">this is absolute</div>
</div>
</body>absolute终极方案：
top：0;
right：0;
bottom:0;
left:0;
margin:auto;9、line-height的继承问题
- 写具
数值，如30px,则继承该值（比较好理解） - 写
比例，如2/1.5 ，则继承该比例（比较好理解） - 写
百分比，如200% 则继承计算出来的值（考点）
10、响应式布局
rem
rem 相对于根元素的长度单位
em 相对于父元素 不好用 也不常用
px 绝对长度单位
结合media-query ，检测宽度，然后设置根元素的font-size，以此作为标准宽度
vw/vm
针对rem的弊端-具有阶梯性
网页视口尺寸
window.screen.height; // 屏幕高度
window.innerHeight; // 去导航栏 网页视口高度
document.body.clientHeight; // 文档的高度vw 视口宽度的百分之一
vh 视口高度的百分之一
vmax 取两者最大值
vmin 取两者最小值
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。