浅谈html的布局

浅谈html的布局

我也是一个前端渣渣，只会玩简单的一些html标签。每次看到别人网页构造的如此精妙，我都好羡慕，什么时候我也有这个能力。这不，又来强化html的布局方案。

大致来说，css有三个阶段。

其中:

• 第一个阶段就是我们基于盒状模型，依赖 display属性 + position属性 + float属性来定位一些容器的布局，想写一个自适应的界面非常的麻烦。
• 第二个阶段便是 进阶到 flex布局，
• 第三个阶段 进阶到 grid布局，俗称栅格布局。

一、flex 布局

1.1 flex简介

采用Flex布局的元素，称为Flex容器，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目，简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（可以理解为Y轴）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴（可以理解为Y轴）的开始位置叫做cross start，结束位置叫做cross end。

1.2 flex属性介绍

1.2.1 flex-direction：

可以设置主轴方向，默认水平方向为主轴。它的取值如下：

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

1.2.2 flex-wrap:

默认情况下，我们使用flex布局，元素是不会换行的。他会自动调整每个元素的宽度用以容纳子元素。

• nowrap（默认值）: 不换行
• wrap：第一行在上方
• wrap-reverse：第一行在下方。通过reverse也不难看出。就是翻转的意思。

1.2.3 flex-flow：

flex 属性是flex-direction属性和flex-wrap属性的简写形式，其默认值为row nowrap即可以把两个属性放在一起用。flex-flow: row wrap

即等价于：

flex-direction: row;
flex-wrap: wrap;

1.2.4 justify-content：

justify-content属性定义了项目在主轴上的对齐方式，注意是主轴！！！

其取值如下：

• flex-start：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端贴边，中间间隔相同。
• space-around： 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

1.2.5 align-items：（单行时才有效）

align-items属性定义项目在侧轴（可以理解成Y轴）如何对齐。注意是Y轴！！！

其取值如下：

• flex-start：Y轴上方水平线对齐
• flex-end：Y轴底水平线对齐
• center：项目的上下边距离 容器 边界距离相等
• baseline：项目的第一行文字的基线对齐。
• stretch： 拉伸。如果项目未设置高度或设为auto，将占满整个容器的高度。

1.2.6 align-content：(多行)

​ 设置侧轴上的子元素的排列方式。注意和上个属性的区别。如果是单行，那么该属性将失效

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

1.3 项目的属性

• order：项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
• align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

栅格布局

首先，谈谈我理解的bootstrap栅格布局。所谓的栅格布局，就是可以随着设备或视口大小的增加而适当地扩展到 12 列。

写一段示例代码：

<div class="container">
 	<div class="row">
      <div class="col-md-8">.col-md-1</div>
      <div class="col-md-4">.col-md-1</div>
    </div>
</div>
</div>

以上代码的意思是：栅格的一行，第一个div 占有8份，也就是屏幕宽度的 8/12。第二个div占有容器的4份。也就是屏幕宽度的4/12。
注意类前缀分别适用于不同的机型屏幕。

栅格布局后面再更新。目前我项目用到的技术还没有接触到该布局。等以后接触到了再深入学习。

再总结一下关于元素定位的吧。
绝对定位：
position:absolute,可以设置当前元素为绝对定位。

• 绝对定位不会占据原来的物理位置。
• 绝对定位的参考点元素是外层设置过定位属性的元素，如果没有则一直往父元素找，直到body。

相对定位：
position:relative,可以设置当前元素为相对定位。使用相对定位时，被定位的元素会占据原来的位置。