l什么是布局

在制作html页面时，自然布局是没有任何修饰自动靠左，

这种方式编写页面整体比较简陋，而随着人们对需求量和要求越来越高，这是就衍生出布局的概念。

网页布局对改善网站的外观非常的重要。从而衍生出很多的布局方式，从最初的table布局，到现在常用的div+css布局方式。

而布局就是对整个web页面有全面的规划和安排，会让页面布局更加的合理和整洁。

l常用布局

•table布局 •

•div+css布局

        1.浮动布局

         2.定位布局

         3.弹性布局

前些年web页面布局主要使用table布局，但是现如今已经被div+css所取代

ltable布局

为什么现在不流行使用table布局？

缺点：

1、占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)

2、阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间。)

3、table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)

4、在某些浏览器中table里的文字的拷贝会出现问题。(这会让用户不悦。)

5、会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)(这会限制你页面设计的自由性。)

6、一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识，会省去你以后大量的时间。)

7、对于页面布局来说，从语义上看是不正确的。(它描述的是表现，而不是内容。)

8、代码阅读性较差者。(不但无法利用CSS，而且会你不知所云)

9、设计完成后修改较为困难，很难通过CSS让它展现新的面貌。

ldiv+css布局

1.浮动布局：

浮动布局可以使元素block块状化。可以使块元素同行排列。

2.定位布局：

定位布局可以指定元素到指定的位置，常用于弹框和移动端布局

3.弹性布局：

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。

这种布局方式在条目尺寸未知或动态时也能工作。这种布局方式已经被主流浏览器所支持，可以在Web 应用开发中使用