蓝鸥广州HTML5培训助你搞懂CSS布局技巧

蓝鸥广州HTML5培训助你搞懂CSS布局技巧大纲：浮动、inline-block、display:table、Flexbox以及其他一些布局上的知识点

浮动

优点：

目前应用还是很广泛，前人把路踩的也很宽啦。哈哈~

缺点：

清除浮动！清除浮动！清除浮动！

没有垂直居中，没有等高，也没有顺序无关性。

应用场景：确定现在不需要，以后也不需要垂直居中和等高的布局。

inline-block

优点：

能垂直居中，当然不需要多个断点一次次的清除浮动。

缺点：

空白！空白！空白！

没有等高，也没有顺序无关性。

应用场景：

需要垂直居中，但是不需要等高；找到让你的团队不抓狂的对付空白的方法。

display:table

优点：

能垂直居中，还能等高！

缺点：

没有顺序无关性；

边框问题费劲；

应对响应式布局能力有限，从 n 列变1 列ok，但是从 3 列变 2 列就无法做到。

应用场景：

不能用 flexbox，又需要垂直居中 + 等高 + 从 n 列变 1 列的响应式布局。

Flexbox

优点：

顺序无关性，对响应式布局能力爆表。

有垂直居中，还有等高。

可以在沿 X 轴排列和沿 Y 轴排列间互相转换

可缩可放，可行可列，还有自适应空间能力

同一效果可以有多种实现写法

缺点：

学着有点费劲！

ie9以下都用不了！

应用场景：

不需要兼容ie9以下，需要缩放的时候表现很牛！

其他一些布局上的知识点

1.使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。在移动设备上显得尤为重要。

2.当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

3.为了制作更多复杂的布局，需要用到定位 position 属性。

4.百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。

5.媒体查询是“响应式设计（Responsive Design）” 的强大工具！可以让网站在任何情况下显示的很棒！

6.使用 meta 视口 可以让你的布局在移动浏览器上显示的更好。

7.新的CSS属性：column，可以轻松的实现文字的多列布局。

选择蓝鸥广州HTML5培训机构，让你成为一名优秀的程序员！

广州HTML5培训：http://gz.lanou3g.com/