美文网首页面试题让前端飞
前端面试--css布局总结

前端面试--css布局总结

作者: M_Jehol | 来源:发表于2017-05-19 19:16 被阅读0次

    最近遇到的面试题很多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

    相关文章

      网友评论

        本文标题:前端面试--css布局总结

        本文链接:https://www.haomeiwen.com/subject/tqeyxxtx.html