面试题924

最新推荐文章于 2024-09-09 15:01:35 发布

置顶鲸是鲸鱼的鲸

最新推荐文章于 2024-09-09 15:01:35 发布

阅读量183

点赞数

本文链接：https://blog.csdn.net/weixin_44195250/article/details/101310041

版权

面试题专栏收录该内容

48 篇文章 1 订阅

订阅专栏

1、css js放置位置和原因
js是阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。
CSS放在前端是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，如果CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式很丑直到CSS加载完成。

说到这那我们就有必要先了解一下网站加载的整个完整过程了。
1.首先浏览器从服务器接收到html代码，然后开始解析html
2.构建DOM树（根据html代码自顶向下进行构建），并且在同时构建渲染树
3.遇到js文件加载执行，将阻塞DOM树的构建；遇到css文件，将阻塞渲染树的构建
（script标签中的defer属性：构建DOM树的过程和js文件的加载异步（并行）进行，但是js文件执行需要在DOM树构建完成之后
script标签中的async属性：构建DOM树、渲染树的过程和js文件的加载和执行异步（并行）进行）

2、HTML 中的块级元素、行内元素、行内块级元素及其区别

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种，一般使用 display，进行三者的转换。

display: inline; 将元素转换为行内元素；
display: block; 将元素转换为块级元素；
display: inline-block; 将元素转换为行内块级元素。
行内元素（display: inline）
特点：

和其他元素都在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变；
内联元素只能容纳文本或者其他内联元素

常见行内元素：span、strong、em、s、u、a等

块级元素（display: block）
特点：

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度；
它可以容纳内联元素和其他块元素

常见的块级元素：

h1~h6,hr
div,dir(目录列表),dl(定义列表)
table,ul.ol,li,form,fieldset(from控制组)
p,pre
address,blockquote,center
menu(菜单列表)
noframes(对于不支持frame的浏览器显示此区块内容)
noscript(对于不支持script的浏览器显示此内容)

行内块级元素（display: inline-block）
特点：

不自动换行
能够识别宽高
默认排列方式为从左到右

常见行内块级元素： input、img、button

下表列出了内联元素和块级元素的主要区别

在这里插入图片描述
3、
1、什么是css模型？
css的盒模型由里到外包括：content,padding,border,margin. 4部分；
css的盒模型有两种：IE盒模型和标准盒模型。

2、两种盒模型的区别
在IE盒模型中，我们设置的height,width值包含：(content)+填充(padding)+边框(border) 这三个部分，而标准盒模型中height,width值只是content部分；

3、如何设置两种盒模型
通常情况下，在不设置box-sizing时，
默认box-sizing:content-box;

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

css盒模型分为两种，一种是w3c标准盒模型，一种是IE盒模型，在盒模型中，宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距；不管是IE盒模型还是标准盒模型都遵循这个守则，但是有一点，在计算盒子宽度的时候，IE盒模型的边框是算在宽度里边的，但是w3c标准盒模型的边框是不算在里面的，比如说有一个宽度为400px的盒子，在IE盒模型中，400px的宽度是由398px的内容宽度和2px的边框宽度组成的，但是在标准盒模型中，400px的宽度指的是内容的宽度，盒子的宽度是指400px的内容宽度和2px的边框宽度共同组成的，即盒子的宽度是402px。在我们编写代码的时候需要特别注意这一点，不一样的浏览器模型对于宽度的解释是不一样的这就是我对盒模型的看法。

margin为4个时，margin:上右下左;（为顺时针方向）

margin为3个时，margin:上左=右下;

margin为2个时，margin:上=下左=右;

margin为1个时，margin:上=右=下=左;

4、css长度单位
px pt rem em vw vh vmin vmax

px就是绝对像素

pt （点）
绝对长度单位，多用于字体尺寸，1px = 0.75pt。

rem
我的理解1rem=100px

em
CSS中，em 被定义为给定字体的font-size值。如果一个元素的font-size为14px,那么1em=14px。

但是，我们前面说到，相对单位的大小会因为使用该单位的元素的不同而不同。

vw & vh
CSS3中加入的相对长度单位，取决于浏览器视窗的宽（高），1vw 即为浏览器视窗宽度的1/100，适用于依据屏幕宽或高进行的排版，适用于自适应。

vmin & vmax
CSS3中加入的相对长度单位，取决于浏览器视窗的宽或高中最小（最大）尺寸的轴，适用于依据屏幕最值宽或高进行的排版，适用于自适应。

5、水平居中垂直居中
1、使用margin: auto;

position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;

2、使用负margin

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .container {
        width: 800px;height: 400px;background: #ccc;position:relative;
    }
    .box {
        width: 400px;height: 200px;background-color: #47c730;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -100px;
    }
    </style>
</head>

3、使用position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .container {
        width: 800px;height: 400px;background: #ccc;
        position: relative;
    }
    .box {
        background-color: #47c730;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    </style>
</head>

盒子没有固定的宽和高
使用transforms属性的translate平移

这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。 

<!DOCTYPE html>
<html>
<head>
	<title>my-test</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.content {
			padding: 20px;
			background: orange;
			color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			border-radius: 5px;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
 
	</style>
</head>
<body>
	<div class="content">
		我不知道我的高度和宽度是多少。
	</div>
</body>
</html>