前端布局属性以及基础布局方式

随着各种UI框架的出现，现在写前端除了一些非常定制化的需求，直接用UI*，便可以解决很多布局、兼容性问题。几乎很少自己手写布局，前几年很流行的一些布局方式也忘得差不多了，从新梳理下，加深记忆。

常用的布局属性

---

• float
• position
• display相关属性: block、inline、inline-block、none、flex、grid、table
• padding、margin、width、height、top、bottom、left、 right…

基础布局方式

---

• 固定布局（static）
• 表格布局（table）
• 浮动布局（float）
• 定位布局（position）
• 弹性布局（flex）
• 栅格布局（gird）

1. 固定布局

   固定布局又被成为静态布局，是一种比较原始、古老的布局方案，出生在css2时代，就是按照设计稿像素1：1进行coding，不用考虑兼容多种设备的问题，页面上超出用滚动条滚动查看（变相的完美兼容多设备，但是不兼容用户的习惯）。几乎不可用于移动端。现代开发中几乎不会独立出现

2. 表格布局（table）

   一种天然的布局标签，但是由于布局比较死板，缺乏语义化，冗余的td,tr标签，table标签渲染导致重绘带来了一些性能问题，有可能会造成页面延迟。现在也几乎不会独立用到。

   table布局现在常用在页面某一小块的垂直居中处理。

   .table-wrap{
      width: 200px;
      height: 200px;
      background-color: pink;
      display: table-cell;
      vertical-align: middle;
   }
   .table-left{
      float: left;
      width: 50px;
      height: 50px;
      background-color: yellow;
    }
   .table-right{
      float: right;
      width: 50px;
      height: 50px;
      background-color: blue;
    }
   

   <div class="table-wrap">
       <div class="table-left"></div>
       <div class="table-right"></div>
   </div>
   

   效果演示
   在实际使用过程中，vertical-align存在太多历史遗留的问题，导致对不齐、无法居中等问题。实际项目中推荐flex代替，深入研究vertical-align请查看张鑫旭大神的文章链接

3. 浮动布局和定位布局

   借助浮动或者定位的属性的组合完成需要的布局，很基础的布局不在多聊。浮动布局时需要注意清除浮动带来的影响

4. flex布局

   弹性布局，CSS3引入的新的布局方式，面对轴线布局，算是一维布局， PC端兼容到IE9，移动端已普及。

   flex布局相关属性简介

   /* 容器属性 */
   display:flex; /* 定义一个弹性盒子作为容器 */
   flex-direction: row | row-reverse | column | column-reverse; /* 定义主轴方向 */
   flex-wrap: nowrap | wrap | wrap-reverse; /* 定义flex项目是否换行 */
   flex-flow: <flex-direction> <flex-wrap>; /* 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*/
   justify-content: flex-start | flex-end | center | space-between | space-around; /* 定义了项目在主轴上的对齐方式。*/
   align-items: flex-start | flex-end | center | baseline | stretch; /* 定义项目在交叉轴上如何对齐。*/
   align-content: flex-start | flex-end | center | space-between | space-around | stretch; /* 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*/
   
   /* 项目属性 */
   order: <integer>; /* 定义项目的排列顺序。数值越小，排列越靠前，默认为0。*/
   flex-grow: <number>; /* 默认 0 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。*/
   flex-shrink: <number>; /* 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 */
   flex-basis: <length> | auto; /* 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 */
   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /* 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 */
   align-self: auto | flex-start | flex-end | center | baseline | stretch; /* 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 */
   

5. 栅格布局

   目前最强大的二维布局方式，能实现复杂UI框架实现的布局效果。兼容到IE10，也是设置容器元素，在设置项目属性，完成布局，grid属性太多，以后单独复习。

   gird布局学习请参考阮一峰老师博客链接

简单的梳理下布局相关的内容。备查