iWeb 学院

前方有最简单、最实用CSS布局技巧总结!

本文目的:给你个大纲,让你快速又简单的搞懂css布局那些事儿!(图片只为女神!)

(一)浮动

优点:目前应用还是很广泛,前人把路踩的也很宽啦!哈哈~ 缺点:清除浮动!清除浮动!清除浮动! 没有垂直居中,没有等高,也没有顺序无关性。 应用场景:确定现在不需要,以后也不需要垂直居中和等高的布局。

(二)inline-block

优点:能垂直居中,当然不需要多个断点一次次的清除浮动。 缺点:空白!空白!空白! 没有等高,也没有顺序无关性。 应用场景:需要垂直居中,但是不需要等高; 找到让你的团队不抓狂的对付空白的方法。

(三)display:table

优点:能垂直居中,还能等高! 缺点:没有顺序无关性; 边框问题费劲; 应对响应式布局能力有限,从 n 列变 1 列ok,但是从 3 列变 2 列就无法做到。 应用场景:不能用 flexbox,又需要垂直居中 + 等高 + 从 n 列变 1 列的响应式布局。

(四)Flexbox

优点: 顺序无关性!对响应式布局能力爆表! 有垂直居中!还有等高! 可以在沿 X 轴排列和沿 Y 轴排列间互相转换 可缩可放,可行可列,还有自适应空间能力 同一效果可以有多种实现写法 缺点:学着有点费劲! ie9以下都用不了! 应用场景:不需要兼容ie9以下,需要缩放的时候表现很牛!

其他一些布局上的知识点:

使用 max-width 替代 width

  1. 可以使浏览器更好地处理小窗口的情况。在移动设备上显得尤为重要。
  2. 当你设置一个元素为 box-sizing: border-box;时,此元素的内边距和边框不再会增加它的宽度。
  3. 为了制作更多复杂的布局,需要用到定位 position 属性。
  4. 百分比是一种相对于包含块的计量单位。它对图片很有用:如下我们实现了图片宽度始终是容器宽度的50%。
  5. 媒体查询是“响应式设计(Responsive Design)” 的强大工具!可以让网站在任何情况下显示的很棒!
  6. 使用 meta 视口可以让你的布局在移动浏览器上显示的更好。
  7. 新的CSS属性:column,可以轻松的实现文字的多列布局。

好了,以上就是这次分享的全部,欢迎批评补充,么么哒!

400-710-1024
北京市昌平区禧乐汇商城5层(iWeb学院)