资讯专栏INFORMATION COLUMN

总结下常见布局解决方案

newtrek / 2337人阅读

摘要:总结了几种常见的页面架构布局方案居中布局水平居中垂直居中水平垂直多列布局自适应布局等宽布局等高布局居中布局水平居中水平居中布局垂直居中水平垂直居中多列布局自适应布局定宽自适应

总结了几种常见的页面架构布局方案
1.居中布局

</>复制代码

  1. a.水平居中
  2. b.垂直居中
  3. c.水平垂直

2.多列布局

</>复制代码

  1. a.自适应布局
  2. b.等宽布局
  3. c.等高布局
居中布局 水平居中

</>复制代码

  1. demo

1. inline-block + text-align

</>复制代码

  1. .parent{
  2. text-align:center;
  3. }
  4. .children{
  5. display:inline-block;
  6. }

2. table + margin

</>复制代码

  1. .children{
  2. display: table;
  3. margin:0 auto;
  4. }

3. absolute + transform

</>复制代码

  1. .parent{
  2. position: relative;
  3. }
  4. .children{
  5. position: absolute;
  6. left: 50%;
  7. transform: translateX(-50%);
  8. }

4. flex + justify-content/margin

</>复制代码

  1. /* 4.flex + justify-content */
  2. .parent{
  3. display: flex;
  4. justify-content: center;
  5. }
  6. /* 5.flex + margin */
  7. .parent{
  8. display: flex;
  9. }
  10. .children{
  11. margin: 0 auto;
  12. }
垂直居中

1. table-cell + vertical-align

</>复制代码

  1. .parent{
  2. display: table-cell;
  3. vertical-align: middle;
  4. }

2. absolute + transform

</>复制代码

  1. .parent{
  2. position: relative;
  3. }
  4. .children{
  5. position: absolute;
  6. top: 50%;
  7. transform: translateY(-50%);
  8. }

3. flex + align-items

</>复制代码

  1. .parent{
  2. display: flex;
  3. }
  4. .children{
  5. align-items: center;
  6. }
水平垂直居中

1.inline-block + text-align + table-cell + vertical-algin

</>复制代码

  1. .parent{
  2. text-align: center;
  3. display: table-cell;
  4. vertical-align: middle;
  5. }
  6. .children{
  7. display: inline-block;
  8. }

2.absolute + transform

</>复制代码

  1. .parent{
  2. position: relative;
  3. }
  4. .children{
  5. position: absolute;
  6. top: 50%;
  7. height: 50%
  8. transform: translate(-50%, -50%);
  9. }

3. flex + justify-content + align-items

</>复制代码

  1. .parent{
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. }
多列布局 自适应布局

1. 定宽 + 自适应

</>复制代码

  1. /* 1. float + margin */
  2. .left{
  3. float: left;
  4. width: 100px;
  5. }
  6. .right{
  7. margin-left: 120px;
  8. }
  9. /* 2. float + overflow BFC */
  10. .left{
  11. float: left;
  12. width: 100px;
  13. margin-right: 20px;
  14. }
  15. .right{
  16. overflow: hidden;
  17. }
  18. /* 3.table */
  19. .parent{
  20. display: table;
  21. width: 100%;
  22. table-layout: fixed;
  23. }
  24. .left, .right{
  25. display: table-cell;
  26. }
  27. .left{
  28. width: 100px;
  29. padding-right: 20px;
  30. }
  31. /* 4. flex */
  32. .parent{
  33. display: flex;
  34. }
  35. .left{
  36. width: 100px;
  37. margin-right: 20px;
  38. }
  39. .right{
  40. flex: 1;
  41. }
  42. /* 5. 三列: 两列定宽 + 一列自适应 */
  43. .left, .center{
  44. width: 100px;
  45. float: left;
  46. }
  47. .right{
  48. overflow: hidden;
  49. }

2. 不定宽 + 自适应

</>复制代码

  1. /* float + overflow:hidden BFC */
  2. .left{
  3. float: left;
  4. margin-right: 20px;
  5. }
  6. .right{
  7. overflow: hidden;
  8. }
  9. .left p{
  10. width: 100px;
  11. }
  12. /* table */
  13. .parent{
  14. display: table;
  15. width: 100%;
  16. }
  17. .left, .right{
  18. display: table-cell;
  19. }
  20. .left{
  21. width: 0.1%;
  22. padding-right: 20px;
  23. }
  24. /* flex */
  25. .parent{
  26. display: flex;
  27. }
  28. .left{
  29. margin-right: 20px;
  30. }
  31. .right{
  32. flex: 1;
  33. }
  34. .left p{
  35. width: 100px;
  36. }
  37. /* 三列 */
  38. .left, .center{
  39. float: left;
  40. margin-right: 20px;
  41. }
  42. .right{
  43. overflow: hidden;
  44. }
  45. .left p, .center p{
  46. width: 100px;
  47. }
等宽布局

</>复制代码

  1. .column{ background-color: #2aabd2;}
  2. /* float */
  3. .parent{
  4. margin-left: -20px;
  5. }
  6. .column{
  7. width: 25%;
  8. float: left;
  9. padding-left: 20px;
  10. box-sizing: border-box;
  11. }
  12. /* table */
  13. .parent-fix{
  14. margin-left: -20px;
  15. }
  16. .parent{
  17. display: table;
  18. width: 100%;
  19. table-layout: fixed;
  20. }
  21. .column{
  22. display: table-cell;
  23. padding-left: 15px;
  24. }
  25. /* flex */
  26. .parent{
  27. display: flex;
  28. }
  29. .column{
  30. flex: 1;
  31. }
  32. .column+ .column{
  33. margin-left: 20px;
  34. }
等高布局

</>复制代码

  1. .left{ background-color: #2aabd2;}
  2. .right{ background-color: #00B83F;}
  3. /* flex */
  4. .parent{
  5. display: flex;
  6. }
  7. .left{
  8. width: 100px;
  9. margin-right: 15px;
  10. }
  11. .right{
  12. flex: 1;
  13. }
  14. /* table */
  15. .parent{
  16. display: table;
  17. width: 100%;
  18. table-layout: fixed;
  19. }
  20. .left, .right{
  21. display: table-cell;
  22. }
  23. .left{
  24. width: 100px;
  25. border-right: 15px solid transparent;
  26. background-clip: padding-box;
  27. }
  28. /*float 伪等高,不好*/
  29. .left{
  30. float: left;
  31. width: 100px;
  32. margin-right: 15px;
  33. }
  34. .right{
  35. overflow: hidden;
  36. }
  37. .left, .right{
  38. padding-bottom: 9999px;
  39. margin-bottom: -9999px;
  40. }
  41. .parent{
  42. overflow: hidden;
  43. }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116797.html

相关文章

  • 前端-CSS3&H5

    摘要:高度模型浅识为的简写,简称为块级格式化上下文,为浏览器渲染某一区域的机制,中只有和中还增加了和。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不...

    xiaolinbang 评论0 收藏0
  • 帝都寒冬一年经验前端面试总结

    摘要:不过幸运的是所有面试的公司都给了,在这里总结下经验吧。这里推荐下我当时看的一篇的面经,木易杨老师写的大厂高级前端面试题汇总。 前言 本人毕业一年,最近陆续面试了头条、瓜子、360、猿辅导、中信银行、老虎等公司,由于最近比较寒冬而且招1-3年的并不多,再加上自己对公司规模和位置有一定要求,所以最后合适的也就这几家了。不过幸运的是所有面试的公司都给了offer,在这里总结下经验吧。掘金:h...

    Scott 评论0 收藏0
  • 常见布局方法总结-居中布局

    摘要:常见布局方法总结水平居中布局使用场景页面整体水平居中,有具体宽度要求。 常见布局方法总结 水平居中布局 (1) width: (xxx)px; margin: 0 auto; 使用场景:页面整体水平居中,有具体宽度要求。 showImg(https://segmentfault.com/img/bVH7rO?w=1347&h=216); .content { width:...

    Wuv1Up 评论0 收藏0
  • 常见布局方法总结-居中布局

    摘要:常见布局方法总结水平居中布局使用场景页面整体水平居中,有具体宽度要求。 常见布局方法总结 水平居中布局 (1) width: (xxx)px; margin: 0 auto; 使用场景:页面整体水平居中,有具体宽度要求。 showImg(https://segmentfault.com/img/bVH7rO?w=1347&h=216); .content { width:...

    JowayYoung 评论0 收藏0

发表评论

0条评论

newtrek

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<