css常见布局面试题集
2019-08-12 本文已影响0人
isSunny
1.左列定宽，右列自适应
浮动：
<div class="left">left</div>
<div class="right">right</div>
<style>
.left{
width: 100px;
background: red;
float: left;
}
.right{
background: yellow;
}
</style>
绝对定位
<div class="wraper">
<div class="left">left</div>
<div class="right">right</div>
</div>
<style>
.wraper{
width: 100%;
position: relative;
}
.left{
width: 100px;
background: red;
}
.right{
position:absolute;
background: yellow;
left:100px;
right:0;
top:0;
}
</style>
<div class="wraper">
<div class="left">left</div>
<div class="right">right</div>
</div>
<style>
.wraper{
width: 100%;
position: relative;
}
.left{
width: 100px;
background: red;
position:absolute;
}
.right{
margin-left:100px;
background: yellow;
}
</style>
flex
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
<style>
.wrap{
display: flex;
}
.left{
width: 200px;
background: red;
}
.right{
flex:1;
background: yellow;
}
</style>
2.两侧定宽，中栏自适应
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</div>
<style>
.left{
width: 200px;
float: left;
background: red;
}
.right{
width: 200px;
float:right;
background: red;
}
.middle{
margin:0 200px;
background: yellow;
}
</style>
flex
<div class="wrap">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
<style>
.wrap{
display: flex;
}
.left,.right{
width: 200px;
background: red;
}
.middle{
flex:1;
background: yellow;
}
</style>
3.右侧定宽，左侧自适应
<div class="right">right</div>
<div class="left">left</div>
<style>
.left{
margin-right: 200px;
background: red;
}
.right{
float: right;
width: 200px;
background: yellow
}
</style>
flex布局
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
<style>
.wrap{
display: flex;
}
.left{
flex:1;
background: red;
}
.right{
width: 200px;
background: yellow;
}
</style>
4.上中下，左中右
<style>
.top{
position: absolute;
width: 100%;
height: 100px;
top:0;
left: 0;
right:0;
background: red;
}
.center{
position: absolute;
top:100px;
bottom:100px;
width: 100%px;
height: auto;
left:0;
right:0;
}
.center .left{
width: 100px;
height:100%;
background: green;
float: left;
}
.center .right{
width: 100px;
height:100%;
background:blueviolet;
float: right;
}
.center .middle{
margin: 0 100px;
height:100%;
background:yellow;
}
.bottom{
position:absolute;
bottom: 0;
left: 0;
right:0;
height: 100px;
width: 100%;
background: blue;
}
</style>
<div class="top">top</div>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</div>
<div class="bottom">bottom</div>
flex布局
<style>
body,html{
height: 100%;
font-size:10px;
padding: 0;
margin: 0;
}
.wrap{
display: flex;
flex-direction: column;
height: 100%;
}
.top{
width: 100%;
height:100px;
background: red;
font-size: 2rem;
}
.center{
display: flex;
width: 100%;
flex: 1;
}
.center .left{
width: 100px;
background: blueviolet;
}
.center .middle{
flex: 1;
background: blue;
}
.center .right{
width: 100px;
background: green;
}
.bottom{
width: 100%;
height:100px;
background: yellow;
}
</style>
<div class="wrap">
<div class="top">top</div>
<div class="center">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
<div class="bottom">bottom</div>
</div>
5.元素居中
- 元素已知宽高
<div class="wrap">
<div class="box"></div>
</div>
<style>
.wrap{
width: 500px;
height: 500px;
position: relative;
border: 1px solid yellow;
}
.box{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top:50%;
margin-left: -50px;
margin-top: -50px;
background: red;
}
</style>
- 元素未知宽高(利用translate)
<div class="wrap">
<div class="box">box</div>
</div>
<style>
.wrap{
width: 500px;
height: 400px;
position: relative;
border: 1px solid yellow;
}
.box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: red;
}
</style>
- 利用flex
<div class="wrap">
<div class="box">box</div>
</div>
<style>
.wrap{
width: 500px;
height: 400px;
display: flex;
align-items: center; /* 交叉轴对齐方式（单行）*/
justify-content:center;/* 主轴对齐方式*/
border: 1px solid yellow;
}
.box{
background: red;
}
</style>
或者
.wrap{
width: 500px;
height: 400px;
display: flex;
justify-content:center;
border: 1px solid yellow;
}
.box{
align-self: center;/* 单独为某元素设置对齐方式*/
background: red;
}
超简单居中方法
<style>
.wrap{
width: 500px;
height: 400px;
display: flex;
}
.box{
background: red;
margin: auto;
}
</style>
<div class="wrap">
<div class="box">box</div>
</div>
这里介绍一下flex弹性盒子几个属性：
1.jpeg
2.jpeg
3.jpeg
详细介绍可以参考30分钟彻底弄懂flex布局
6.BFC
BFC，块级格式化上下文,就是一个块级元素的渲染显示规则。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
- 哪些会触发BFC呢？
1.浮动元素：float 不为none的属性值；
2.绝对定位元素：position (absolute、fixed)
3.display为： inline-block、table-cells、flex
4.overflow 除了visible以外的值 (hidden、auto、scroll)
- 实际用处
1.margin边距重叠
<style>
.box1{
width: 100px;
height: 100px;
background: red;
margin-bottom: 20px;
}
.box2{
width: 100px;
height: 100px;
background: yellow;
margin-top: 30px;
}
.wrap{
overflow: hidden;/*触发BFC*/
}
</style>
<div class="box1"></div>
<div class="wrap">
<div class="box2"></div>
</div>
2.BFC清除浮动
<div style="border: 1px solid #000;overflow: hidden;">
<!-- overflow: hidden;触发BFC -->
<div style="width: 50px; height: 50px; background: #eee;float: left;"></div>
</div>
3.两列自适应布局
<style>
.left{
width: 100px;
background: red;
float: left;
}
.right{
background: green;
height: 400px;
/* margin-left: 100px;*/
overflow: hidden;/*触发BFC*/
}
</style>
<div class="left">left</div>
<div class="right">right</div>
正常情况下我们会用margin处理，这里用BFC就不用margin了。
7.清除浮动
- 子类添加额外空标签
<div style="clear:both;"></div>
- 父级div定义 伪类
.clear:after {visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
.clear{zoom:1;}
8.display:none和visibility:hidden区别
1.display:none的元素不占用空间，而visibility: hidden的元素空间保留；
2.display: none会影响css3的transition过渡效果，visibility: hidden不会；
3.display: none隐藏产生重绘 ( repaint ) 和回流 ( relfow )，visibility: hidden只会触发重绘；
4.株连性：display: none的节点和子孙节点元素全都不可见，visibility: hidden的节点的子孙节点元素可以设置 visibility: visible显示。visibility: hidden属性值具有继承性，所以子孙元素默认继承了hidden而隐藏，但是当子孙元素重置为visibility: visible就不会被隐藏。
