前端部分基础面试题01_前端基础面试题js部分-优快云博客

本文深入探讨CSS盒模型的概念，包括元素的组成、行内元素、块级元素及空元素的区别。讲解了同步与异步的区别，px与em单位的使用场景，以及优雅降级与渐进增强的设计理念。此外，还介绍了CSSHack的应用及其利弊，以及实现元素垂直居中的多种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是盒模型

在网页中，一个元素所占用的空间的大小是有四个部分组成的，元素本身的内容（content）、元素的内边距（padding）、元素的外边距（margin）、元素的边框（border）共同组成的。这四个部分有的可以显示相应的内容，有的部分只能用来分隔相邻的区域，这四个部分组成了css中的元素的盒模型。

行内元素有哪些？块级元素有哪些？空元素有哪些？

行内元素: a、span、b、img、strong、input、select、lable、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素： br、hr、link、input、img

简述同步和异步的区别

同步就是阻塞模式，就是指一个进程在执行某个请求的时候，如果这个请求需要一段时间才能返回这个请求的数据的时候，这个请求的进程会一直的的等待下去，其他的请求需要在后面一直等待，直到上个请求收到返回的信息，后面的请求才能继续执行下去。例如：打印机

异步就是指进程不需要一直等待下去，当执行一个请求后，不需要等待返回的信息，继续执行下一条的请求，不需要管理其他进程的状态，当有进程的消息返回到系统模块的时候，会有进程专门的进行处理，这样可以提供执行的效率。

如果有两个任务m和n，当采用同步的方式执行程序的时候完成这两个任务花费的总的时间为m+n。但是采用异步的方式执行程序的话，最大的执行时间为max{m，n}。

px和em的区别？

px和em都是长度单位。

区别：

px就是像素的值是固定不变的，指定的的多少就是多少，计算也比较容易。

em的值是不固定的，em的大小会随着父级元素的字体·的大小而变化，浏览器默认的字体大小都是16px，所以对于未修改的浏览器都符合，1em=16px，即0.75em=12px；其他的自行换算即可。

什么叫优雅降级和渐进增强？

渐进增强：增强意味着扩充，页面设计的渐进增强，就是在针对低版本的浏览器时只保证网站的必备的基本功能，保留产品的核心模块，让后随着浏览器版本的提升，进行动画效果、产品交互等方面的增加和追加更多的功能来提高用户体验。

优雅降级：降级意味着功能衰减，一开始就针对高版本的浏览器进行开发，让后再对低版本的浏览器进行兼容。

区别：

a.优雅降级是从复杂的现状开始，并且通过减少用户体验的供给来对浏览器的低版本进行兼容。

b.渐进增强则是从一个非常基础的只附带有产品的核心模块的版本开始，随着浏览器的不断升级而不断的扩充，以适应产品和时代的发展。

c.降级意味着向回看，而渐进增强意味着朝前看，同时保证其根基处在安全的地带。

什么是CSS Hack?

一般来讲css hack 就是针对不同的浏览器版本写不同的css，就是css hack。

IE浏览器的hack分为三种，条件hack、属性级hack、选择符hack。例如：

1.条件hack
只在ie浏览器内生效
<!--[if IE]-->
<style>
.test{
    color:red;
}
<!--[if IE 6]-->
只在ie6浏览器内生效
.test{
    color:red;
}
<!--[if get IE 6]-->
只在ie6浏览器以上的生效
.test{
    color:red;
}
<!--[if ！ IE 6]-->
只在非ie6的浏览器内生效
.test{
    color:red;
}
</style>
<!--[end if]-->
2.属性hack
.test{
    color：red;/FOR IE8+/
    color:red;/FOR IE7and earlier/
    _color:red;/FOR IE6 and earlier/
}
3.选择符hack
html.test{
    color:pink;
}/FOR IE6 and earlier/
html.test{
    color:pink;
}/FOR IE7/
主要上面的所有的颜色记得在生产环境中一定要换算成16进制的数来进行表示，这个只是个demo。

css hack的书写顺序，一般将使用范围广的、被识别能力强的css定义在前面。

css hack的利弊：

一般情况下尽量不使用css hack，但是在有些情况下为了顾及用户的体验实现优雅降级，不得已的使用hack，例如：网站大量使用css3属性，但是在IE8以下的版本根本不兼容css3属性，在其他的chrom、Firefox、ie9等主流浏览器下正常渲染。这种情况下就需要IE8以下的hack出马，来对低版本的浏览器进行兼容适配。

虽然使用了hack会让页面在各个浏览器的显示一直。但是过多的滥用会造成html文档混乱不堪，在管理和维护方面都会有不小的负担。希望厂商能够标准浏览器市场，让标准越来越趋向统一化，抛弃陈旧的ie hack。

实现垂直居中的几种方法

行内元素垂直居中：通过在父元素中设置text-align属性，让子元素的文本进行居中。通过line-height属性的值等于父元素的高度即可。

<div class='father'> 
	<div class='son'>
	</div>
</div>
    <style>
    	.father{
    			background:#ccc;
    			height:200px;
    			text-align:center
			}
		.son{
            line-height:200px;
        }
    </style>

最常用的方法。不定宽高的块级父级元素的水平垂直居中，通过子绝（绝对定位）父相（相对定位）的的定位方式，让后用百分比设置top和left的值；再用margin-left、margin-top消除子元素一半偏移量。

<div class='father'> 
	<img src="ab.jpg" class='divImg'>
	</div>
</div>
    <style>
    	.father{
    			position:relative;
    			height:200px;
    			backgroud:#ccc;
			}
		.divImg{
            position:absolute;
            width:50px;
            height:100px;
            left:50%;
            top:50%;
            margin-left:-25px;//元素宽度的一半
            margin-top:-50px;//元素高度的一半         
        }
    </style>

简述src和href的区别

href：是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用在超链接。

src：是指向外部资源的位置，指向的内容将会嵌套到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并且应用到当前的文档内。例如js脚本文件，img图片和其他的frame等元素。当浏览器解析到src所在内容的时候，浏览器内核会暂停其他资源的加载，直到将该资源完全加载完毕，并且编译、执行完毕。当然这也是为什么要将js文件放在页面上执行的原因。