布局方式以及一些布局常用方法

     前端页面的布局方式常用到的大概有三种方式分别为普通文档流布局、浮动布局和绝对布局。下面将分别介绍着三类布局。

　　a、普通布局：前端中用到的标签主要分为块级标签（display：blcok）和行级标签(display:inline)。块级标签为必须占一行的标签元素，后面的元素必须在下一行显示；行级标签是显示时后面的行级元素紧跟着前一个行级标签显示。普通布局是在按照这些元素的特性进行界面的布局，从左到右，从上到下的顺序进行。另：普通元素的position为static。

　　b、浮动布局：浮动布局包括左右浮动，即相对于普通布局，该布局元素会脱离普通布局也是流布局，相当于浮动元素会在普通布局之上进行界面的布局，会导致的问题就是会有普通布局的部分被浮动布局元素给遮挡，解决办法为清除浮动，即在被遮挡的普通元素上添加clear：both进行浮动的清除，使得普通布局的元素不会跟浮动元素在一行显示并另起一行进行dom文档的渲染，清除浮动还有其他办法请自行查询。另：浮动布局中浮动的范围是根据父元素的位置进行浮动位置定位。

　　c、绝对布局：常用的position为absolute时的元素会进行绝对布局。绝对定位的参考位置为其祖先元素中position为非static的第一个元素。所以一般将参考位置元素设置为position：relative。

     除了以上三种布局方式，还有常使用的布局办法：

     横向布局：竖向布局相对容易，只需要进行块状元素的上下堆叠，横向布局一般采用浮动的方式进行布局，即多个块状元素进行元素的浮动并按照浮动的方向进行堆叠；另横向布局还可以采用display：inline-block的方式进行，另ie6下可以使用_display：inline的hack实现，可以实现区域块在父级元素宽度能容纳 的情况下横向堆叠。

     居中方法：居中是布局中常用方法，其中居中的方法分为限制宽度的块状元素和行级元素。前者使用常规办法margin：0 auto实现；后者使用text-align：center实现行级元素在其所在的块级区域中的居中，另 ie6将块级元素设置为行级后也使用该办法是实现居中。

     界面自适应：布局的自适应其实主要是宽度的自适应，对于常见的分辨率的pc显示器屏界面都能友好的适应，不出现混乱和叠压的情况，但是对于非pc显示器的适应就要通过响应式进行，此处不讨论。自适应办法：对于界面整体布局的区域宽度采用百分比宽度设置，例如”前端html文档的基本布局“中界面的区域块的宽度采用百分比布局，具体定位到什么级别大小的区域块具体看页面自定。对于相对细级别的区域块或者说是内容块可以使用绝对大小px进行布局，以上基本实现自适应。

     以上为当前项目中常用到的一些方法，为了兼容ie低版本所以使用的都是比较传统的办法，随着现代浏览器的发展以及ie低版本的放弃，更好的布局方式未在本文罗列。以上为个人项目总结，没有涉及之处以及其中存在的问题请包涵并指出。

 

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/ynchuan/p/4638662.html