前端常见面试题

最新推荐文章于 2023-03-27 14:44:42 发布

俊哥哥来也

最新推荐文章于 2023-03-27 14:44:42 发布

阅读量206

点赞数

分类专栏：前端文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/jj2320711457/article/details/113531748

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

1、对HTML语义化的理

让页面的内容结构化
利于浏览器解析和SEO搜索引擎优化
提高代码的可维护和可重用性

2、常见的块级元素与行内元素

	块级元素：div、p、h1、h2、table、ul、ol...
	行内元素：span、input、button、img...

3、盒子模型的宽度offsetWidth怎计算方式

<style>
    div {
        width: 100px;
        padding: 20px;
        border: 1px ;
        margin: 20px;
    }
</style>

offsetWidth = (内容宽度+内边距+边框），无外边距
offsetWidth = (100 + 20x2 + 1*2） = 142px

在这里插入图片描述
如果需要让div的offsetWidth 等于100，可以改为

 <style>
        div {
            width: 100px;
            padding: 20px;
            border: 1px ;
            margin: 20px;
            box-sizing: border-box;
        }
 </style>

4、margin纵向重叠问题

（上一个盒子的margin-bottom遇到下一个盒子的margin-top会重叠）
margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 100px;
            height: 100px;
            border: solid 1px pink;
            margin-top: 15px;
            margin-bottom: 20px;
        }
    </style>
</head>


<body>
    <div>div1</div>
    <div>div2</div>
</body>

</html>

在这里插入图片描述

5、什么是BFC？

BFC定义：
   BFC(Block formatting context)直译为"块级格式化上下文"。是 W3C CSS2.1 规范中的一个概念，
   它是一个独立的渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其
   他元素的关系和相互作用。

个人理解：BFC看成一个封闭的盒子，盒子内部无论怎样变化，外界不会受到任何影响

BFC的触发条件:
1、body 根元素
2、浮动元素： float 除 none 以外的值
3、绝对定位元素：position(absolute、fixed)
4、display 为 inline-block、table-cellsflex
5、 overflow 除了visible 以外的值 (hidden、auto、scroll)

1、margin重叠问题（解决上一题4、margin纵向重叠问题）

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            overflow: hidden;
        }

        p {
            width: 100px;
            height: 100px;
            border: solid 1px pink;
            margin-top: 15px;
            margin-bottom: 20px;
        }
    </style>
</head>


<body>
    <div>
        <p>div1</p>
    </div>
    <div>
        <p>div2</p>
    </div>
</body>

</html>

在这里插入图片描述
2、高度塌陷问题

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            border: 1px solid black;
        }

        p {
            width: 50px;
            height: 50px;
            background: rgb(226, 63, 63);
            float: left;
        }
    </style>
</head>


<body>
    <div>
        <p></p>
    </div>

</body>

</html>

在这里插入图片描述

将外层div启用BFC
div {
     border: 1px solid black;
     overflow: hidden;
}

在这里插入图片描述

BFC功能总结
1、解决两个相邻元素的上下margin重叠问题；
2、解决高度塌陷问题；

6、absolute和relative定位区别

absolute：依据最近一层定位元素位置定位 （常见定位元素：absolute、
          relative、fixed。 如果找不到这些元素的话，则以body定位)

relative：依据自身位置定位

7、css常见居中对齐方案

水平居中：

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%)（css3动画属性）
absolute元素：top,left,bottom,right=0 + margin：auto

8、line-height如何继承？

<style>
		body{
            font-size：20px;
            line-height：?
		}

		p{
		    font-size：15px
		}
</style>
<body>
	<p>须知少时凌云志, 曾许人间第一流</p>
</body>

1、line-height：50px（具体值）
	直接继承
	<p>须知少时凌云志, 曾许人间第一流</p>的line-height等于50px
	
2、line-height：2 （整数或者小数）
	15px*2 = 30px
	<p>须知少时凌云志, 曾许人间第一流</p>的line-height等于30px
	
3、line-height：200% （百分数--考点）
	200%*20px = 40px
	<p>须知少时凌云志, 曾许人间第一流</p>的line-height等于40px

9、css响应式

核心属性rem （是一个长度单位）

常见长度单位

1、px，绝对长度单位（不考虑响应式时）

2、em，相对长度单位，相对于父元素（每个元素对应的父元素不一定相同）

3、rem，相对长度单位，相对于根元素（常用于响应式，所有元素对应的根
       元素不会变）

vh与vw

vw : 1vw 等于视口宽度的1%    windows.innerWidth = 100vw

vh : 1vh 等于视口高度的1%    windows.innerHeight = 100vh

vmin : 选取 vw 和 vh 中最小的那个

vmax : 选取 vw 和 vh 中最大的那个

俊哥哥来也

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端常见面试题

1、对HTML语义化的理1、让页面的内容结构化2、利于浏览器解析和SEO搜索引擎优化3、提高代码的可维护和可重用性2、常见的块级元素与行内元素1、块级元素：div、p、h1、h2...2、行内元素：span、input、button、img......
复制链接

扫一扫