web前端基础部分面试题（纯干货）更新中……

css部分

1. 请问div1的offsetWidth是多大？（盒模型宽度计算）

    <style>
        #div1{
            width:100px;
            padding:10px;
            border:1px solid #ccc;
            margin:10px;
        }
    </style>
</head>
<body>
    <div id="div1">this is div1</div>
</body>

知识点: offsetWidth = (内容宽度+内边距+边框),无外边距
因此答案是122px
console.log(document.getElementById('div1').offsetWidth);//122px

补充问题:如果让offsetWidth等于100px,该如何做?

解决方法:添加样式代码：box-sizing:border-box
解释:指定宽度和高度（最小/最大属性）确定元素边框。
也就是说，对元素指定宽度和高度包括了 padding 和 border（把padding和border算到了100px以内）。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

2. AAA和BBB之间的距离是多少?(margin纵向重叠问题)

知识点:相邻元素的margin-top和margin-bottom会重叠,空p标签被忽略
答案:15px

      p{
          font-size: 16px;
          line-height: 1;
          margin-top: 10px;
          margin-bottom: 15px;
      }
  </style>
</head>
<body>
  <p>AAA</p>
  <p></p>
  <p></p>
  <p></p>
  <p>BBB</p>
</body>

3. 对margin的top,left,right,bottom设置负值，有何效果？（margin负值问题）

margin-top和margin-left为负值，元素向上，想左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响

4.什么是BFC?如何应用？（BFC的理解与应用）

简介
- Block format context ,块级格式化上下文
- 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
bfc元素表现的特性就是一个独立的盒子，内部的子元素再怎么折腾都不会影响外部的元素和父元素，

如果触发bfc，子盒子的margin和浮动不会对父盒子产生影响，所以可以用来清除浮动问题。
形成BFC的条件
1. float不是none
2. position是absolute或者fixed
3. overflow 不是visible
4. display是flex inline-block等

BFC常见应用

清除浮动
利用BFC避免margin重叠。

    <style>
         div {
             background: pink;
             margin: 20px 0;
         }
         li{
             overflow: hidden;
         }
     </style>
 </head>
 <body>
 <ul>
     <li>
         <div>1</div>
     </li>
     <li>
         <div>1</div>
     </li>
     <li>
         <div>1</div>
     </li>
     <li>
         <div>1</div>
     </li>
 </ul>

自适应两栏布局

3-5

5.如何实现圣杯布局和双飞翼布局？（float布局）

圣杯布局的目的
1. 三栏布局,中间一栏最先加载和渲染（内容最重要）
2. 两侧内容固定，中间内容随着宽度自适应
3. 一般用于PC网页
圣杯布局和双飞翼布局的技术总结
1. 使用float布局
2. 两侧使用margin负值，以便和中间内容横向重叠
3. 防止中间内容被两侧覆盖，一个用padding一个用margin
4. 圣杯布局是用外层盒子的padding进行留白，所以内层盒子要想出现在留白处除了使用margin-left(rigth)还要借助相对定位。
  而双飞翼布局是利用中间盒子的margin进行留白，所以直接用margin-left(rigth)就可以出现在留白处了

6.手写clearfix

//原理：通过CSS伪元素在容器的内部元素之后添加一个看不见的空格“/20”或点“.” ，并且设置clear属性清除浮动
 .clearfix:after {
            content: ''; //和:before 及 :after 伪元素配合使用，来插入生成内容。
            display: table;//设置成块状元素，或许display:block;也可以
            clear: both;//在左右两侧均不允许浮动元素。
        }
        .clearfix{
            zoom:1;/*兼容IE低版本*/
        }

7.flex实现三个点的色子（flex布局）

flex实现一个三点的色子
要求熟练掌握属性:
- flex-direction
- justify-content
- aligin-items
- flex-wrap
- align-self

8. absolute和relative分别依据什么定位

relative依据自身定位
absolute依据最近一层的定位元素定位
- 定位元素:
  - absolute relative fixed
  - body
  先找absolute relative fixed 如果没有就直接参考body定位

9. 居中对齐有哪些实现方式？

水平居中
- inline元素：text-align:center
- block元素: 给宽度+margin:auto
- absolute元素:left:50%+margin-left负值（需要知道子元素的尺寸）
垂直居中
- inline元素：line-height的值等于height值
- absolute元素:top:50% + margin-top负值 （需要知道子元素的尺寸）
- absolute元素:transform(-50%,50%)（不需要知道尺寸）
- absolute元素:top,left,bottom,right=0+margin:auto（不需要知道尺寸）

3-10

10.图文样式

line-height如何继承:

 <style type="text/css">
        body {
            font-size: 20px;
            line-height: 50px;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一行文字</p>
</body>

line-height: 50px;line-height为确定数值，那么p标签的line-height直接继承50px
line-height: 1.5;line-height为比例数值，那么p标签的继承的line-height为16*1.5=24px(补充知识:font-size=line-height=16)
line-height: 200%;line-height为百分比的形式，那么p标签的继承的line-height为20px(父元素的font-size)*200%=40px

11.响应式

rem:

px,绝对长度单位，最常用
em,相对长度单位，相对父元素，不常用
rem,相对长度单位，相对于根元素(html元素)，常用于响应式布局
- 换算尺度有html设置，如:html的 font-size为100px,那么子元素的font-size的1rem就是100px，0.16rem就是16px
- 除了font-size以为任何使用长度单位的情况都可以使用rem

响应式布局的常用方案:

media-query,根据不同的屏幕宽度设置根元素font-size
rem，基于根元素的相对单位

vw/vh

rem的弊端
- 弊端：阶梯性
网页视口尺寸
- window.screen.height //屏幕高度
- window.innerHeigth //网页视口高度 =100vh
- document.body.clientHeigth //body高度
vw/vh
- vh网页视口高度的1/100
- vw网页视口宽度的1/100
- vmax取两者最大值;vmin取两者最小值

12.css面试总结

如何理解HTML语义化？
- 让人更容易读懂（增加代码可读性）
- 让搜索引擎更容易读懂（SEO）
常见的块状元素和内联元素有哪些？
- display:block/table;有div h1 h2 table ul ol p等
- display:inline/inline-block;有span img input button等
盒模型宽度如何计算？
- offsetWidth = (内容宽度+内边距+边框),无外边距
- 让元素的width=offsetWidth：使用box-sizing:border-box;
margin 纵向重叠问题
- 相邻元素的margin-top和margin-bottom会发生重叠
- 空白内容的p标签也会重叠
元素margin负值问题
- margin-top和margin-left负值，元素向上，向左移动
- margin-rigth负值，右侧元素左移，自身不受影响
- margin-bottom负值,下方元素上移，自身不受影响
BFC理解和应用
- 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的条件：
- xxx见上文
BFC的常见应用
- 清除浮动
圣杯布局和双飞翼布局的技术总结
- 使用float布局
- 两侧使用margin负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用padding一个用margin
手写clearfix
flex布局（画三个点的色子）
absolute和relative的定位
- relative依据自身定位
- absolute依据最近一层的元素定位
居中对齐的实现方式
- 水平居中
- 垂直居中
line-height继承
rem是什么
响应式布局的常用方案

JS部分

题目：

typeof能判断哪些类型
何时使用=何时使用
值类型和引用类型的区别
手写深拷贝

知识点:

变量类型

值类型vs引用类型

值类型

let a = 100;
let b = a;
a = 200;
console.log(b);//100

常见的值类型

let a;//undefined
const s = 'abc'
const n = 100;
const b = true;
const s = Symbol('s');

引用类型

let a = {age:20};
let b = a;
b.age = 21;
console.log(a.age)//21

常见的引用类型

const obj = {x:100};
const arr = ['a','b','c'];
const n = null//特殊引用类型，指针指向为空地址
//特殊引用类型，但不用于存储数据，所以没有"拷贝，复制函数"这一说
function fn(){}

typeof 运算符
深拷贝
变量计算

4-1

posted @ 2021-04-01 17:30 howareyou! 阅读(116) 评论(0) 收藏举报

刷新页面返回顶部

yxqfunnysoul

web前端基础部分面试题（纯干货）更新中……

css部分

1. 请问div1的offsetWidth是多大？（盒模型宽度计算）

补充问题:如果让offsetWidth等于100px,该如何做?

2. AAA和BBB之间的距离是多少?(margin纵向重叠问题)

3. 对margin的top,left,right,bottom设置负值，有何效果？（margin负值问题）

4.什么是BFC?如何应用？（BFC的理解与应用）

3-5

5.如何实现圣杯布局和双飞翼布局？（float布局）

6.手写clearfix

7.flex实现三个点的色子（flex布局）

8. absolute和relative分别依据什么定位

9. 居中对齐有哪些实现方式？

3-10

10.图文样式

line-height如何继承:

11.响应式

rem:

响应式布局的常用方案:

vw/vh

12.css面试总结

JS部分

题目：

知识点:

4-1

公告