Javascript学习笔记面试(一)CSS部分

微信扫一扫,分享到朋友圈

Javascript学习笔记面试(一)CSS部分

一、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-topmargin-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>
  <div>main</div>
  <div>left</div>
  <div>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>
<div></div>
<div></div>
<div></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>
<div>
<span>一段文字</span>
</div>
<div>this is block</div>
<div>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 取两者最小值

微信扫一扫,分享到朋友圈

Javascript学习笔记面试(一)CSS部分

Redmi K30 Pro全新配色水色天光开启预约:明日10点首卖

上一篇

美国宇航局与SpaceX计划今年9月份再送4名航天员进入太空

下一篇

你也可能喜欢

Javascript学习笔记面试(一)CSS部分

长按储存图像,分享给朋友