共计 3371 个字符,预计需要花费 9 分钟才能阅读完成。
一、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 取两者最小值
正文完