web前端面试中10个关于css高频面试题,你都会吗?

最新推荐文章于 2021-10-09 10:02:52 发布
最新推荐文章于 2021-10-09 10:02:52 发布
阅读量255 收藏 3
点赞数
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/xgangzai/article/details/99430957
版权 
 
 
1.什么是 BFC机制
 
 
BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
 
 
 
  
在IE下, Layout,可通过zoom:1 触发
 
 
 
 
  1. 浮动的元素会被父级计算高度(父级元素触发了BFC)
  2. 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
  3. margin不会传递给父级(父级触发BFC)
  4. 属于同一个BFC的两个相邻元素上下margin会重叠
 
 
  1. 普通文档流布局: 浮动的元素是不会被父级计算高度
  2. 非浮动元素会覆盖浮动元素的位置
  3. margin会传递给父级元素
  4. 两个相邻元素上下的margin会重叠
 
 
开发中的应用
 
 
2. CSS3中新增的选择器以及属性
 
 
这里只是列出来, 具体的使用,请查看我的关于css3新增选择器与属性文章
 
 
属性选择器含义描述
E[att^="val"]属性att的值以"val"开头的元素
E[att$="val"]属性att的值以"val"结尾的元素
E[att*="val"]属性att的值包含"val"字符串的元素
 
 
选择器含义描述
E:root匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
 
 
属性含义描述兼容
transition设置过渡效果
transform变换效果(移动、缩放、转动、拉长或拉伸)
animation动画效果
box-shadow阴影效果FF3.5, Safari 4, Chrome 3
text-shadow文本阴影FF 3.5, Opera 10, Safari 4, Chrome 3
border-colors为边框设置多种颜色FF3+
boder-image图片边框FF 3.5, Safari 4, Chrome 3
text-overflow文本截断IE6+, Safari4, Chrome3, Opera10
word-wrap自动换行IE6+, FF 3.5, Safari 4, Chrome 3
border-radius圆角边框FF 3+, Safari 4 , Chrome 3
opacity不透明度all
box-sizing控制盒模型的组成模式FF3+, Opera 10, Safari 4, Chrome 3
outline外边框FF3+, safari 4, chrome 3, opera 10
background-size不指定背景图片的尺寸safari 4, chrome 3, opera 10
background-origin指定背景图片从哪里开始显示safari 4, chrome 3, FF 3+
background-clip指定背景图片从什么位置开始裁切safari 4, chrome 3
rgba基于r,g,b三个颜色通道来设置颜色值, 通过a来设置透明度safari 4, chrome 3, FF3, opera 10
 
 
3. 居中布局
 
 
  1. 行内元素: text-align:center
  2. 块级元素: margin:0 auto
  3. 绝对定位和移动: absolute + transform
  4. 绝对定位和负边距: absolute + margin
  5. flex布局: flex + justify-content:center
 
 
垂直居中
 
 
  1. 子元素为单行文本: line-height:height
  2. absolute + transform
  3. flex + align-items:center
  4. table: display:table-cell; vertical-align: middle
  5. 利用position和top和负margin
 
 
水平垂直居中640?wx_fmt=png
 
 

 
 
1. 已知元素宽高:绝对定位+margin:auto:
 
 
   div{      width: 200px;      height: 200px;      background: green;      position:absolute;      left:0;      top: 0;      bottom: 0;      right: 0;      margin: auto;  }
width: 200px;
height: 200px;
background: green;

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

 
 
2. 已知元素宽高:  绝对定位+负margin
 
 
   div{      width: 200px;      height: 200px;      background: green;      position:absolute;      left:0;      top: 0;      bottom: 0;      right: 0;      margin: auto;  }
width: 200px;
height: 200px;
background: green;

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

 
 
3. absolute+transform
 
 
   div{     width: 200px;     height: 200px;     background: green;     position:absolute;     left:50%;    /* 定位父级的50% */     top:50%;     transform: translate(-50%,-50%); /*自己的50% */   }
width: 200px;
height: 200px;
background: green;

position:absolute;
left:50%;    /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
   }
 
 

 
 

 
 
4.flex + justify-content + align-items
 
 
.box{   height:600px;     display:flex;   justify-content:center;  //子元素水平居中   align-items:center;      //子元素垂直居中     /* aa只要三句话就可以实现不定宽高水平垂直居中。 */    }  .box>div{    background: green;    width: 200px;    height: 200px;  }
height:600px;  

display:flex;
justify-content:center;  //子元素水平居中
align-items:center;      //子元素垂直居中
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
    }
.box>div{
background: green;
width: 200px;
height: 200px;
  }
 
 
4. 清除浮动有哪些方法, 各有什么优缺点
 
 
 
  
优点: 简单, 写少量代码, 兼容性也好 缺点: 添加无语义html元素, 不利于代码语义化, 后期维护成本大
 
 
 
 
 
  
优点: 简单, 代码少, 浏览器支持好 缺点: 不能和position配合使用, 因为超出的尺寸会被隐藏overflow:hidden
 
 
 
 
 
  
优点: 浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 缺点: 代码多，要两句代码结合使用，才能让主流浏览器都支持
 
 
 
 
 
  
简单, 代码少,好掌握 缺点: 只适用于高度固定的布局
 
 
 
 
5. 用纯CSS创建一个三角形的原理是什么
 
 
之前写三角形, 都是直接记住代码,没有探究原因,我也是直到有一次面试时,面试大哥让我说说css创建三角形的原理,我就......回来就赶紧翻资料.接下来我就将当时我理解的过程列举出来:
 
 
1. 写一个我们最熟悉的 border应用
 
 
.box{	width:100px;	height:100px;	border: 3px solid;	border-color:#1b93fb #1bfb24 #efad48 #ef4848;}
width:100px;
height:100px;
border: 3px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
 
 
效果如下:640?wx_fmt=png
 
 
2. 接下来,我们将border值增大
 
 
.box{	width:100px;	height:100px;	border: 50px solid;	border-color:#1b93fb #1bfb24 #efad48 #ef4848;}
width:100px;
height:100px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
 
 
640?wx_fmt=png很容易发现, border渲染并不是正方形, 而是梯形的.
 
 

 
 
3. 在增大border的基础下, 此时我们将盒子宽高变成0,会产生什么效果呢!
 
 
.box{	width:0px;	height:0px;	border: 50px solid;	border-color:#1b93fb #1bfb24 #efad48 #ef4848;}
width:0px;
height:0px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
 
 
640?wx_fmt=png四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见;
 
 

 
 
4. 设置透明, 隐藏其中三个三角形
 
 
 .box{	width:0px;	height:0px;	border: 50px solid;	border-color:transparent transparent transparent #ef4848;}
width:0px;
height:0px;
border: 50px solid;
border-color:transparent transparent transparent #ef4848;
}
 
 
640?wx_fmt=png三角形这样就出来, 有木有很简单, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样的
 
 
.box{	width:0px;	height:0px;	border: 50px solid transparent;	border-left:50px solid #ef4848;}
width:0px;
height:0px;
border: 50px solid transparent;
border-left:50px solid #ef4848;
}
 
 
 
  640?wx_fmt=png 
 
 
 
 
  
这样给面试你的人讲,讲明白应该不是问题., 重点就是要理解border的应用
 
 
 
 

 
 
6. 实现三栏布局有哪些方法, 分别描述一下
 
 
三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？ 即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：640?wx_fmt=png下面列出四种实现方式, 在开发中可以根据实际需求选择适合自己的方法进行编码:
 
 

 
 
<style>.container{  display:flex;  justify-content: center;  height: 200px;  background: #eee;}.left {   width: 200px;   background-color: red;   height: 100%; }.main {    background-color: yellow;    flex: 1;}.right {    width: 200px;    background-color: green;}</style><div class="container">  <div class="left">1</div>  <div class="main">2</div>  <div class="right">3</div></div>
.container{
display:flex;
justify-content: center;
height: 200px;
background: #eee;
}
.left {
width: 200px;
background-color: red;
height: 100%;
 }
.main {
background-color: yellow;
flex: 1;
}
.right {
width: 200px;
background-color: green;
}
</style>
<div class="container">
<div class="left">1</div>
<div class="main">2</div>
<div class="right">3</div>
</div>
 
 
 
  
简单实用，现在比较流行的方案，但是需要考虑浏览器的兼容性。
 
 
 
 

 
 
<style>.container {  position: relative;  background:#eee;  height:200px;	}.main {  height: 200px;  margin: 0 120px;  background-color: yellow;	}.left {  position: absolute;  width: 100px;  height: 200px;  left: 0;  top: 0;  background-color: red;	}.right {  position: absolute;  width: 100px;  height: 200px;  background-color: green;  right: 0;  top: 0;}</style><div class="container">  <div class="left">1</div>  <div class="main">2</div>  <div class="right">3</div></div>
.container {
position: relative;
background:#eee;
height:200px;
	}
.main {
height: 200px;
margin: 0 120px;
background-color: yellow;
	}
.left {
position: absolute;
width: 100px;
height: 200px;
left: 0;
top: 0;
background-color: red;
	}
.right {
position: absolute;
width: 100px;
height: 200px;
background-color: green;
right: 0;
top: 0;
}
</style>

<div class="container">
<div class="left">1</div>
<div class="main">2</div>
<div class="right">3</div>
</div>
 
 
 
  
这种方案也简单实用, 并且可以将 <div class="main"></div>元素放到第一位,使得主要内容优先加载!
 
 
 
 

 
 
<style>.content {  float: left;  width: 100%;}.main {  height: 200px;  margin-left: 110px;  margin-right: 220px;  background-color: yellow;}.left {  float: left;  height: 200px;  width: 100px;  margin-left: -100%;  background-color: red;}.right {  width: 200px;  height: 200px;  float: right;  margin-left: -200px;  background-color: green;}	</style><div class="content">  <div class="main"></div></div><div class="left"></div><div class="right"></div>
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: yellow;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
background-color: green;
}	

</style>
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
 
 

 
 

 
 
<style>.container {  margin-left: 120px;  margin-right: 220px;}.main {  float: left;  width: 100%;  height: 300px;  background-color: yellow;}.left {  float: left;  width: 100px;  height: 300px;  margin-left: -100%;  position: relative;  left: -120px;  background-color: blue;}.right {  float: left;  width: 200px;  height: 300px;  margin-left: -200px;  position: relative;  right: -220px;  background-color: green;}</style><div class="container">  <div class="main"></div>  <div class="left"></div>  <div class="right"></div></div>
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: yellow;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
background-color: blue;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
background-color: green;
}
</style>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
 
 
 
  
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
 
 
 
 

 
 
7. css3实现0.5px的细线
 
 
<style>.line {    position: relative;}.line:after {    content: "";    position: absolute;    left: 0;    top: 0;    width: 100%;    height: 1px;    background-color: #000000;    -webkit-transform: scaleY(.5);    transform: scaleY(.5);}</style><div class="line"></div>
.line {
position: relative;
}
.line:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #000000;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
</style>

<div class="line"></div>
 
 

 
 
8. link 与 @import 的区别
 
 
  1. 从属关系区别
 
 
 
  
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等
 
 
 
 
  1. 加载顺序区别
 
 
 
  
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
 
 
 
 
  1. 兼容性区别
 
 
 
  
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
 
 
 
 
  1. DOM可控性区别
 
 
 
  
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。
 
 
 
 
css部分就整理到这里, 小伙伴们面试还有什么经常遇到的,可以在评论区给我留言, 我有时间就整理出来, IT(挨踢)都是一大家, 方便你我他
 
 
9. 开发中为什么要初始化css样式
 
 
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
 
 
10. CSS优化、提高性能的方法有哪些
 
 
  1. 内容和样式分离，易于管理和维护
  2. 减少页面体积
  3. css文件可以被缓存、重用，维护成本降低
 
 
不使用@import
 
 
避免使用复杂的选择器，层级越少越好 建议选择器的嵌套最好不要超过三层，比如：
 
 
精简页面的样式文件，去掉不用的样式
 
 
利用CSS继承减少代码量
 
 
避免！important，可以选择其他选择器
 
 
整理不易, 各位走过路过的大哥, 给小女子点个赞呗!
 
 

 


                

        

        

    

  


    

      

        

            

              
                
                  傲娇的koala
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
Web前端CSS面试题（含答案）

				
			

			

				

					码字员的博客
				

				

					01-12
					
					1055
					
				

			

		

		

			
				
CSS选择器的优先级是怎样的？
link和@import的区别?
有那些方式(CSS)可以隐藏页面元素？
em\px\rem区别？
块级元素水平居中的方法？
CSS有几种定位方式?
如何理解z-index？
如何理解层叠上下文？
清除浮动有哪些方法？
你对css-sprites的理解
你对媒体查询的理解
你对盒模型的理解
标准盒模型和怪异盒模型有什么区别？
谈谈对BFC(Block Formatting Context)的理解？
为什么有时候人们用translate来改变位置而不是定位?
伪类和伪元素的区.

			
		

	



                

            
              



	

		

			

				
					
web前端面试题（必背面试题）

					
热门推荐

				
			

			

				

					Z_Gleng的博客
				

				

					05-25
					
					3万+
					
				

			

		

		

			
				
自己总结的常见的面试题 总字数13万+ 大概有200+左右道题  会不定期更新


			
		

	



              


  
              

                


	

		

			

				
					
前端面试题之Html和CSS

				
			

			

				

					dkz10838的博客
				

				

					06-22
					
					201
					
				

			

		

		

			
				
又到了毕业季，很多小伙伴们都到了找工作的时候了，好多小伙伴问我有前端的面试题么？答：没有。 呃呃… …
小伙伴本宝宝真的没有骗你们，我从毕业到现在一直在一家公司没有换过，所以手里压根没有面试题。我们公司招聘也压根不需要什么面试题。因为那些都是可以百度的哈哈。 但是大部分公司还是有面试题的，所以征求大家意见后总结一下关于前端的面试题。今天我们分享关于Html和CSS部分的。

1. ...

			
		

	





	

		

			

				
					
web开发-web前端面试题（html-css-js）-学习笔记十二

				
			

			

				

					xuesnowce的博客
				

				

					04-16
					
					1552
					
				

			

		

		

			
				
1、。
答：html5标准网页声明，表示网页采用html5。
2、块元素和内联元素的区别。
答：块元素：换行，新的一行开始且能包含其他块对象和内联对象。例：div table p h1 form
内联元素：不换行，在一行里，直接从内容里面，接着往后走。例：span ima input a
块级转换成内联：display：inline ； 内联转换成块级：display：block。
3

			
		

	



		

			
		



	

		

			

				
					
Day3 - 前端高频面试题之基础版

				
			

			

				

					weixin_34247155的博客
				

				

					06-20
					
					219
					
				

			

		

		

			
				
1、什么是变量提升？var、let 及 const 区别？什么是暂时性死区？
变量提升是将变量声明提升到作用域顶部，函数也可以被提升，并且优先于变量提升
// var 存在提升，能在声明之前使用 
console.log(a)	// undefined
var a = 1
复制代码// 函数提升是把整个函数提升到作用域顶部
console.log(a) // ƒ a() {}
function a...

			
		

	





	

		

			

				
					
初级前端高频面试题总结一

				
			

			

				

					qq_43592064的博客
				

				

					03-27
					
					1220
					
				

			

		

		

			
				
1:css水平、垂直居中的写法，请至少写出4种？
//水平居中

行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center

垂直居中

设置line-height 等于hei...

			
		

	





	

		

			

				
					
web前端工程师-高频面试题

				
			

			

				

					10-24
				

			

		

		

			
				
【前端面试】涵盖的知识点广泛，包括HTML、CSS、JavaScript（ES6）、Vue、React以及小程序，还有编程题目和Web开发工具如webpack和git。以下是对这些知识点的详细阐述：  一、HTML 1. 兼容性问题：前端开发者需要...

			
		

	





	

		

			

				
					
前端面试题库 Vue，React，JS面试题，HTTP，工程化，CSS，算法面试题，大厂面试题，高频面试题

				
			

			

				

					02-21
				

			

		

		

			
				
9. **高频面试题**：这些题目通常是面试中最常被问到的，例如JavaScript的原型继承、事件委托、Vue的nextTick等。  在准备前端面试时，全面复习这些知识点并结合实际项目经验进行阐述，将有助于提升面试成功率。对于...

			
		

	





	

		

			

				
					
HTML+CSS+CSS3高频面试题_88题.pdf_前端面试题

				
			

			

				

					09-01
				

			

		

		

			
				
【HTML+CSS+CSS3高频面试题_88题.pdf_前端面试题】这份文档主要涵盖了HTML、CSS和CSS3的常见面试问题，涉及到前端开发的基础知识和最新特性。以下是根据文档部分内容提炼出的关键知识点：  1. **HTML `<img>` 标签的...

			
		

	





	

		

			

				
					
Web前端工程师高频面试题-《 HTML5+CSS3 Web前端开发与实例教程（微课视频版） 》随书资源

					
最新发布

				
			

			

				

					06-10
				

			

		

		

			
				
### Web前端工程师高频面试题详解  #### 一、Web前端开发概述  1. **浏览器兼容性问题**   - **定义**: 浏览器兼容性问题指的是网页在不同浏览器上显示的效果不一致的情况。  - **原因**: 不同浏览器对HTML、CSS等...

			
		

	





	

		

			

				
					
前端基础面试题大全-极乐科技（二）-HTML+CSS部分

				
			

			

				

					weixin_33826268的博客
				

				

					08-10
					
					518
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
初级前端高频面试题总结二

				
			

			

				

					qq_43592064的博客
				

				

					03-27
					
					764
					
				

			

		

		

			
				
1:cookies、sessionStorage和localStorage解释及区别
1）相同点是都是保存在浏览器端、且同源的
2）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只...

			
		

	





	

		

			

				
					
前端高频面试题 CSS篇

				
			

			

				

					weixin_34391445的博客
				

				

					06-14
					
					182
					
				

			

		

		

			
				
通过从网上看到的面经，总结的一些高频的前端CSS面试题，有很多不会，于是找资料，并通过代码实现，自己提供了一些参考答案。

目录
1.怎样会产生浮动？
2.如何清除浮动？
3.盒子模型，以及IE和其他浏览器的却别？
4.CSS3新特性有哪些？
5.em 和 rem 的区别？
6.重排和重绘？
7.行元素和块...

			
		

	





	

		

			

				
					
Web前端面试题及答案——HTML&CSS、JS、DOM

				
			

			

				

					yaocong1993的博客
				

				

					11-19
					
					9947
					
				

			

		

		

			
				
虽然个人认为有些知识不是必须记忆的，需要的时候可以查阅笔记，但是对于得到面试的机会还是很重要的。

HTML&CSS

1、清除浮动的几种方式，各自的优缺点

清除浮动：使父元素围住浮动的子元素，避免对后续元素造成影响。

（1）给父元素设置overflow:hidden;或float:left;或position:absolute;或position:relative;。触发块级格式化...

			
		

	





	

		

			

				
					
10个关于css高频面试题

				
			

			

				

					frontend_frank的博客
				

				

					01-12
					
					826
					
				

			

		

		

			
				
1.什么是 BFC机制BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位...

			
		

	





	

		

			

				
					
CSS高频重点

				
			

			

				

					M_Edison的博客
				

				

					08-03
					
					236
					
				

			

		

		

			
				
1. CSS选择器以及优先级
标签选择器、伪元素选择器：1
类选择器、属性选择器、伪类选择器：10
id选择器：100
内联样式：1000
注意：

!important声明的样式优先级最高
优先级相同时，最后出现的样式生效
继承得到的样式优先级最低
通用选择器(*)、子选择器(>)、相邻同胞选择器(+)并不在这四个等级中，所以它们的权值为0

2. display的属性值及其作用
none：元素不显示，并且从文档流中移除该元素
block：块类型，可设置宽高，换行显示（默认宽度为父元素宽度）
inl

			
		

	





	

		

			

				
					
前端部分高频面试题

				
			

			

				

					shiningyn的博客
				

				

					08-25
					
					290
					
				

			

		

		

			
				
前端部分高频面试题1.http相关问题1.1 http是什么？1.2 http的组成？1.3 http的状态码？1.4 http的请求方法？1.5 http与https的区别？2. 前端页面如何实现性能优化？3. 数组的相关问题3.1 数组的去重1.for循环嵌套，利用splice去重2.新建数组，利用indexof（）去重3.利用ES6的Set去重4.使用对象记录重复的元素，以及出现的次数3.2...

			
		

	





	

		

			

				
					
css 高频实用小技巧

				
			

			

				

					汉堡请不要欺负面条
				

				

					10-09
					
					416
					
				

			

		

		

			
				
利用 drop-shadow 对元素的部分内容添加单重及多重阴影

 <div class="setCss">
	<div class="round"></div>
</div>
.setCss {
	width: 300px;
	height: 300px;
	background: #000;
	padding: 32px
}
.round{
 	--colorA: #fff;
    position: relative;
    margin: aut

			
		

	





	

		

			

				
					
2020 前端高频面试题！！！（前端基础篇）

				
			

			

				

					ZHANGJIN9546的博客
				

				

					05-19
					
					3669
					
				

			

		

		

			
				
前端基础篇
1、如何理解执行上下文
JavaScript执行上下文(context)主要指代码执行环境的抽象概念。执行上下文分为三种：

全局执行上下文
函数执行上下文
eval执行上下文

### 每一段js代码执行，都会先创建一个上下文环境。
2、如何理解作用域链
前沿知识：js代码执行前会创建上下文环境，这个上下文环境包含了变量、作用域链和this.
简单理解就是从当前环境向父级一层一层查找变量的过程称之为作用域链。
var name = '前端未来';
function hello(){
  con

			
		

	





	

		

			

				
					
"2021大厂前端高频面试题手册：HTML、CSS、浏览器详解

				
			

			

				

					
				

			

		

		

			
				
本文总结了238道大厂前端高频面试题，包括HTML、CSS、浏览器相关的问题。其中涉及了网络中最常使用的图片格式、CSS盒子模型的概念和使用以及视频/音频标签的运用等。另外，还介绍了HTML5新增的一些内容。  在面试中...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值