html css基础面试题（一）

最新推荐文章于 2022-01-20 14:47:00 发布

qq_43373622

最新推荐文章于 2022-01-20 14:47:00 发布

阅读量183

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_43373622/article/details/113823159

版权

1.掌握盒子水平垂直居中的五大方案

让box在body中水平垂直居中，公共样式

      html,body{
				width: 100%;
				height: 100%;
				background-color: azure;
			}
			.box{
				width: 100px;
				height: 100px;
				background-color: coral;
			}

定位方案

盒子必须设置宽度和高度，并且margin-left,margin-top为宽度高度的一半

          body{
				position: relative;
			}
			.box{
				position: absolute;
				 top: 50%;
				 left: 50%;
				margin-top: -50px;
				 margin-left: -50px;
			}

盒子也必须设置宽度和高度，如果不设置的话会导致内部盒子的宽度高度为100%

           body{
				position: relative;
			}
			.box{
				position: absolute;
				 top: 0;
				 left: 0;
				 right: 0;
				 bottom: 0;
				 margin: auto;
			}

即使不设置盒子的宽度和高度，也可以使得盒子在body中水平垂直居中，推荐用法

      	body{
				position: relative;
			}
			.box{
				position: absolute;
				 top: 50%;
				 left: 50%;
			     transform: translate(-50%,-50%);    	 
			}

弹性盒方案
给父容器设置弹性盒，交叉轴和主轴都设置为居中

          body{
				 display: flex;
				 justify-content: center;
				  align-items: center;
			}

js方案

 <script type="text/javascript">
	let body=document.body;
	body.style.position="relative"
	bodyW=body.clientWidth;
	bodyH=body.clientHeight;
	boxW=box.offsetWidth;
	boxH=box.offsetHeight;
	box.style.position="absolute";
	box.style.left=(bodyW-boxW)/2+"px";
	box.style.top=(bodyH-boxH)/2+"px";
</script>

table-cell
父容器必须具有设置固定的宽度和高度

     <style type="text/css">
			 .boxwrapper{
				 display: table-cell;
				 vertical-align: middle;
				 text-align: center;
				 width: 500px;
				 height: 500px;
				 background-color: burlywood
				 
			 }
			 .box{
				 display: inline-block;
				 width: 100px;
				  height: 100px ;
				 background-color: coral;
			 }
		</style>
			 body>
		<div class="boxwrapper">
			<div class="box" id="box"> 
			</div>
		</div> 
	</body>

2.css盒模型

标准盒模型box-sizing:content-box，当设置的宽度和高度指的就是内容区域的宽度和高度，并不代表盒子的宽度和高度，因为一个盒子是由宽度高度以及padding填充和border边框组成一个盒子具体的宽度高度，再结合margin导致盒子在页面中具体的一个位置，在项目中，如果标准盒模型，当设置了padding以及border的时候，我们会发现盒子被撑大，此时需要手动计算盒子的宽度以及高度，但是如果我们使用css3提供的怪异盒模型，则盒子不会被撑大，在怪异盒模型中，我们设置的宽度以及高度就是盒子的宽度以及高度，因此我们不用再手动计算盒子的大小.在boostrap以及element-ul前端框架中，设置公共样式的时候，也会选择使用怪异盒模型
css3中怪异盒模型：box-sizing:border-box
css3中弹性盒：在移动布局中，大多都会使用弹性盒模型，给父容器这个盒子设置display:flex,这个盒子就会成为一个弹性盒，在这个盒子里面具有两个轴，一个是主轴，一个交叉轴，主轴就相当于x轴，交叉轴就相当于y轴，在这个盒子中所有的子元素都是布局的每一项，默认情况下，这些子元素都会沿着主轴方向进行排列（靠着交叉轴上面，沿着主轴左右），我们可以使用justify-content以及align-items来控制这些子元素在主轴以及交叉轴上的排列方式，从而实现我们想要的布局方案

3.掌握几种经典布局

圣杯布局(圣杯布局和双飞翼布局其本质都是左右固定，中间自适应)

<style type="text/css">
			 html,body{
				 height: 100%;
				 background-color: bisques
			 }
			 .container{
				 height: 100%;
				 padding: 0 200px;
				 
			 }
			 .center{
				 width: 100%;
				 min-height: 500px;
				 background-color: red
			 }
			 .left,.right{
				 width: 200px;
				 min-height: 200px;
				 background-color: aqua;
				 position: relative;
			 }
			 .center,.left,.right{
				 float: left;
			 }
			 .left{
				 margin-left: -100%;
				position: relative;
				 left: -200px;
			 }
			 .right{
				 margin-right: -200px;
			 			 
			 }
		</style>
      <div class="container" clearfix>
		 <div class="center">
		 	center
		 </div>
		 <div class="left">left</div>
		 <div class="right">right</div>
	 </div>

在这里插入图片描述

双飞翼布局

<style type="text/css">
			html,body{
				height: 100%;
			}
			 .continer{
				 width: 100%;
				 min-height: 400px;
				 background-color: red;
				 padding: 0 200px;
				 box-sizing: border-box;
			 }
			.continer,.left,.right{
				 float: left;
			 }
			.left,.right{
				 background-color: aqua;
				 width: 200px;
				 min-height: 400px;
			 }
			 .continer .center{
			  width: 100%;
				 background-color: orchid;
				 min-height: 400px;
			 }
			 .left{
				 margin-left: -100%;
			 }
			 .right{
				 margin-left: -200px;
			 }
			 
		</style>
     <div class="continer">
		  <div class="center">center</div>
	  </div>
	  <div class="left">left</div>
	  <div class="right">right</div>

calc
使用calc表达式渲染的话，性能会比较慢，不推荐使用

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,
			body {
				 
				height: 100%;
				background-color: antiquewhite
			}
			.left,.right{
				width: 200px;
				min-height: 400px;
				background-color: aqua
			}
			.center{
				width: calc(100% - 400px);
				min-height: 400px;
				background-color: red
				
			}
			.left,.center,.right{
				float: left;
			}
		</style>

flex

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,
			body {	 
				height: 100%;
				background-color: antiquewhite
			}
			.container{
				display: flex;
				justify-content:space-between
			}
			 .left,.right{
				 flex: 0 0 200px;
				 	 min-height: 400px;
				 background-color: aqua
			 }
			 .center{
				 flex: 1;
				 	 min-height: 400px;
				 background-color: red
			 }
		</style>
		<div class="container">
			<div class="left">left</div>
			<div class="center">center</div>
			<div class="right">right</div>
		</div>

定位

      <style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,
			body {	 
				height: 100%;
				background-color: antiquewhite
			}
			.container{
			 position: relative;
			 height: 100%;
			}
			.center{
				margin: 0 200px;
				background-color: red;
				min-height: 400px;
			}
			 .left,.right{
				 width: 200px;
				 min-height: 400px;
				 position: absolute;
				 top: 0;
				 background-color: aqua
			 }
			 .left{
				 left: 0;
			 }
			 .right{
				 right: 0;
			 }
			 
		</style>
       <div class="container">
			<div class="left">left</div>
			<div class="center">center</div>
			<div class="right">right</div>
		</div>

4.移动端响应式布局开发的方案

media
rem
flex
vh、vw

5. 不考虑其他因素，下面哪种的渲染性能比较高

css浏览器渲染机制是选择器从右到左查询
第二种如果找到a就直接可以渲染了，而第一种先找到a，然后再找box下的a,进行了二次筛选，因此第二种渲染性能比较高

.box a{
...
}
a{
}

6.使用css的方式隐藏一个元素

display:none;使用display:none隐藏元素，不占位置
visibility: hidden;占位
opacity: 0 使用透明度为0隐藏元素
margin-left;使用margin-left来设置一个负值，隐藏元素

7.谈谈你对html5的理解？

html新增了语义化标签（头部header,导航nav,footer,aside,文章类article,section，figure类似与dl 一般和figcaption结合使用一般放标题mark 标记内联元素）
新增音频以及视频（audio,video）
画布（canvas）
新增本地存储localStorage长期存储数据，浏览器关闭后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除

8.常见的浏览器内核有哪些

浏览器内核可以分为两部分，渲染引擎和js引擎，
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。
JS引擎则：解析和执行javascript来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，浏览器内核就倾向于只指渲染引擎

Trident内核（IE内核）：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核（firefox内核）：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核（Safari内核，Chrome内核原型,开源）：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]

qq_43373622

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html css基础面试题（一）

掌握盒子水平垂直居中的五大方案让box在body中水平垂直居中，公共样式 html,body{ width: 100%; height: 100%; background-color: azure; } .box{ width: 100px; height: 100px; background-color: coral; }定位方案盒子必须设置宽度和高度，并且margin-left,margin-top为宽度高度的一半
复制链接

扫一扫