谈谈自己平时使用的页面布局方法

作者:杨润炜
日期:2016/3/3 21:46

position相对布局

这种布局一般使用在一个元素相对于父元素的定位,如右下角,中间等。首先把父元素,即布局元素要参考的元素设置position为relative,然后自身设置absolute,这样就可以达到相对布局的效果了。这里会有一种特殊情况,即需要定位在中间,即元素是垂直且水平居中,首先设置定位元素top: 50%; right: 50%; 这时元素并不是被定位在参考元素的中间,这时要把需要定位的元素设置宽高,然后margin-left: 宽度一半;margin-top:高度一半;这样就能达到定位在中间的效果了。具体看下面代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. .wrap {
  8. border: 1px solid #aaaaaa;
  9. background-color: #eeeeee;
  10. width: 300px;
  11. height: 300px;
  12. position: relative;
  13. }
  14. .k1 {
  15. position: absolute;
  16. bottom: 0;
  17. right: 0;
  18. }
  19. .k2 {
  20. position: absolute;
  21. width: 20px;
  22. height: 20px;
  23. left: 50%;
  24. top: 50%;
  25. margin-left: -10px;
  26. margin-top: -10px;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div class="wrap">
  32. <div class="k1">1</div>
  33. <div class="k2">2</div>
  34. </div>
  35. </body>
  36. </html>

inline-block大法

inline-block可以使行内元素,如a,span,i等,可以设置宽高,也可以使div在同一行排列起来。缺点是元素间会有间隔,可以在父元素上设置

  1. font-size: 0;
  2. -webkit-text-size-adjust:none;

来消除这个间隔。

vertical-align: middle

这个样式我主要是使用在把图片与文字居中显示。如果我们要把img与span里的文字居中显示。只需要把img与span设置

  1. display: inline-block;
  2. vertical-align: middle;

checkbox与文字居中也可以用这种方式来实现。

兼容到ie8及以上的页面布局

最近需要做兼容到ie8及以上的页面,而且没有使用UI框架,全是需要自己用css来构建。通过参考一些大的门户网站(因为这些网站面向所有群体,所以兼容肯定做得不赖,虽然有些比较丑),发现了以下的布局方法。
接下来通过代码来演示

具体实现代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. .wrap {
  8. width: 610px;
  9. }
  10. .clearfix:after {
  11. content: ".";
  12. display: block;
  13. height: 0;
  14. clear: both;
  15. visibility: hidden;
  16. }
  17. .f-l {
  18. float: left;
  19. }
  20. .item {
  21. border: 1px solid #aaaaaa;
  22. background-color: #eeeeee;
  23. width: 200px;
  24. height: 200px;
  25. line-height: 200px;
  26. text-align: center;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div class="clearfix wrap">
  32. <div class="item f-l">块1</div>
  33. <div class="item f-l">块2</div>
  34. <div class="item f-l" style="height: 300px">块3</div>
  35. <div class="item f-l" style="height: 300px">块4</div>
  36. <div class="item f-l">块5</div>
  37. </div>
  38. </body>
  39. </html>

效果图如下:
布局效果图

表格布局

模拟表格的方式来对元素进行布局排列。因为表格的样式更符合布局的习惯,或者说更符合一些设计的需求。但因为表格元素有特定的语义,所以不建议直接使用表格元素布局,但display可以让我们满足表格形式的布局。具体看代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. .wrap {
  8. width: 610px;
  9. display: table;
  10. }
  11. .row {
  12. display: table-row;
  13. }
  14. .item {
  15. border: 1px solid #aaaaaa;
  16. background-color: #eeeeee;
  17. width: 200px;
  18. height: 200px;
  19. line-height: 200px;
  20. text-align: center;
  21. display: table-cell;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="wrap">
  27. <div class="row">
  28. <div class="item f-l">块1</div>
  29. <div class="item f-l">块2</div>
  30. <div class="item f-l">块3</div>
  31. </div>
  32. </div>
  33. </body>
  34. </html>

注:这种布局的特点时,在设置元素宽高的时候,可以不包括border。这也使得有时候更方便计算。

页面布局资源

CSS居中完整指南
六种实现元素水平居中
去除inline-block元素间间距的N种方法
CSS3圆角圆边 支持IE6-IE8浏览器

感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/37.html
邮箱:glowrypauky@gmail.com
QQ: 892413924