html布局面试问题,css常见布局面试题集

1.左列定宽，右列自适应

浮动：

left

right

.left{

width: 100px;

background: red;

float: left;

}

.right{

background: yellow;

}

绝对定位

left

right

.wraper{

width: 100%;

position: relative;

}

.left{

width: 100px;

background: red;

}

.right{

position:absolute;

background: yellow;

left:100px;

right:0;

top:0;

}

left

right

.wraper{

width: 100%;

position: relative;

}

.left{

width: 100px;

background: red;

position:absolute;

}

.right{

margin-left:100px;

background: yellow;

}

flex

left

right

.wrap{

display: flex;

}

.left{

width: 200px;

background: red;

}

.right{

flex:1;

background: yellow;

}

2.两侧定宽，中栏自适应

left

right

middle

.left{

width: 200px;

float: left;

background: red;

}

.right{

width: 200px;

float:right;

background: red;

}

.middle{

margin:0 200px;

background: yellow;

}

flex

left

middle

right

.wrap{

display: flex;

}

.left,.right{

width: 200px;

background: red;

}

.middle{

flex:1;

background: yellow;

}

3.右侧定宽，左侧自适应

right

left

.left{

margin-right: 200px;

background: red;

}

.right{

float: right;

width: 200px;

background: yellow

}

flex布局

left

right

.wrap{

display: flex;

}

.left{

flex:1;

background: red;

}

.right{

width: 200px;

background: yellow;

}

4.上中下，左中右

.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;

}

top

left

right

middle

bottom

flex布局

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;

}

top

left

middle

right

bottom

5.元素居中

元素已知宽高

.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;

}

元素未知宽高(利用translate)

box

.wrap{

width: 500px;

height: 400px;

position: relative;

border: 1px solid yellow;

}

.box{

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

background: red;

}

利用flex

box

.wrap{

width: 500px;

height: 400px;

display: flex;

align-items: center; /* 交叉轴对齐方式(单行)*/

justify-content:center;/* 主轴对齐方式*/

border: 1px solid yellow;

}

.box{

background: red;

}

或者

.wrap{

width: 500px;

height: 400px;

display: flex;

justify-content:center;

border: 1px solid yellow;

}

.box{

align-self: center;/* 单独为某元素设置对齐方式*/

background: red;

}

超简单居中方法

.wrap{

width: 500px;

height: 400px;

display: flex;

}

.box{

background: red;

margin: auto;

}

box

这里介绍一下flex弹性盒子几个属性：

1.jpeg

2.jpeg

3.jpeg

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边距重叠

.box1{

width: 100px;

height: 100px;

background: red;

margin-bottom: 20px;

}

.box2{

width: 100px;

height: 100px;

background: yellow;

margin-top: 30px;

}

.wrap{

overflow: hidden;/*触发BFC*/

}

2.BFC清除浮动

3.两列自适应布局

.left{

width: 100px;

background: red;

float: left;

}

.right{

background: green;

height: 400px;

/* margin-left: 100px;*/

overflow: hidden;/*触发BFC*/

}

left

right

正常情况下我们会用margin处理，这里用BFC就不用margin了。

7.清除浮动

子类添加额外空标签

父级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就不会被隐藏。