DIV、P、UL —— 诸如此类，它们为何而生？

在日常的前端开发中，当工程师需要搭建网页页面的时候，通常会过度的依赖UI框架，这会导致对基础知识掌握的不牢固，比如最基本的前端页面布局。
前端页面中的元素盒子模型通常分为三部分：分别是Content、Padding和Border。Content是指元素盒子内的内容区域，Padding是指Content的外边距，Border是指Padding的外边框。这三个部分构成了元素盒子的宽度和高度，这与日常页面搭建时，为元素设置Width和Height时是一样的。
前端的网页布局通常可以分为三大类：分别是普通流布局 、浮动布局 和定位布局 。

一、普通流布局

在普通流布局中，元素盒子会按照它们在HTML文档中的顺序从上到下、从左到右依次排列，就像在页面上摆放积木一样。在普通流布局中，元素盒子只能水平排列，不能垂直排列，如果要实现垂直排列，需要使用浮动布局或者定位布局。

二、浮动布局

浮动布局是通过给元素盒子设置float属性来实现的，float属性可以使元素盒子脱离普通流的限制，在页面上自由浮动。浮动布局可以使元素盒子水平排列或垂直排列，而且可以实现元素盒子之间的重叠。

三、定位布局

定位布局是通过给元素盒子设置position属性来实现的，position属性可以使元素盒子脱离普通流的限制，在页面上自由定位。定位布局可以使元素盒子出现在页面的任何位置，而且可以实现元素盒子之间的重叠。

四、选择哪种布局方式

在实际开发中，应该根据需求来选择合适的布局方式。对于大多数情况来说，普通流布局是最简单和最容易使用的。但是，如果需要实现一些特殊的效果，比如使元素盒子垂直排列、实现元素盒子之间的重叠，就需要使用浮动布局或定位布局。

五、display属性

display属性可以用来设置元素盒子的显示方式，其常用的值有inline、block和none。

• inline：使元素盒子在同一行上显示，就像一个单词中的字母一样。
• block：使元素盒子在单独的一行上显示，就像一个段落中的句子一样。
• none：使元素盒子不显示。

六、position属性

position属性可以用来设置元素盒子的定位方式，其常用的值有static、relative、absolute和fixed。

• static：元素盒子在普通流中显示。
• relative：元素盒子在普通流中显示，但是可以使用top、right、bottom和left属性来相对地调整其位置。
• absolute：元素盒子脱离普通流，并且可以使用top、right、bottom和left属性来绝对地调整其位置。
• fixed：元素盒子脱离普通流，并且相对于视口定位。

七、float属性

float属性可以用来设置元素盒子的浮动方式，其常用的值有left、right和none。

• left：使元素盒子浮动到左侧。
• right：使元素盒子浮动到右侧。
• none：使元素盒子不浮动。

在实际开发中，可以通过组合使用display、position和float属性来实现各种各样的布局效果。