前端面试--css布局总结

最近遇到的面试题很多css布局的，回答的不太好，总结一下吧

1.一个满屏 品 字布局 如何设计?

上面的div宽100%，

下面的两个div分别宽50%，

然后用float或者inline使其不换行即可

品

品

2.让一个已知宽高(宽高皆200px)的DIV水平垂直居中

1.一个div

2.一个div

3.一个div（同2）

4.flex2个div

flex要指定height，实现比较简单，需要嵌套div

3.实现两列布局，右列200px固定宽度，左列宽度自适应

固定+自由

float+margin实现

一个固定布局，设置float，另一个设置margin-left即可

ps：div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度。

所以这个自定属性的div可以没有width，默认继承父亲

浮动部分，也可以用absolut来代替：right：0也可以

float+overflow

flex