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的分支)]