浅谈网页布局

最近新接触了一下前端，深刻感受到作为一个Web前端网页布局的重要性，下面我总结一下自己看了慕课网上的教程后对于网页布局的一些学习方法和见解。
标准文档流，盒子模型，float属性，position属性这四种，其中float属性和position属性尤为重要。
今天涉及到的三种案例
1.自动居中——盒子模型
2.浮动布局——float属性
3.绝对定位布局——position属性

首先我讲讲
~块级元素：从左到右撑满一行，独占一行，触碰到页面边缘时会自动换行，（有时浏览器会为元素添加一个默认的样式，有外边距，所以有时元素并未撑满一行）(常见的块级元素有{div,ul,li,dl,dt,p}
~行级元素：能在同一行内显示，不会改变html文档结构（常见的行级元素有{span,img,strong,input}）,大部分的表单标签都是属于行级标签，但这也不是绝对的
最后，块级元素和行级元素都是盒子模型。
（PS：写样式有三种方式：行内样式，外部样式，内部样式，三个样式的优先级遵循就近重点内容原则，行内>内部>外部）

当浏览器为所有的网页标签设置一个默认的样式的时候，为了避免这种情况，进行一个代码初始化
*{margin:0; padding:0;}

111.自动居中——盒子模型：

1.盒子模型中的当没有为盒子设置高度的时候，盒子的高度会随着盒子内内容的变化而改变高度
2.当盒子模型中想使页面居中可以在盒子最外面添加一个包裹层wrap，我们为了在布局中更加灵活，通常情况下为它的父层设置一个宽度，子层宽度设置成100%，margin: 0 auto,0代表上下宽度，auto会根据浏览器的宽度自动的设置两边的外边距。

222.浮动布局——float属性
float属性：3个属性值：左浮动，右浮动，不浮动，特点是：元素会左移或右移，直至触碰到容器为止（设置了浮动的元素，仍旧处于标准文档流中）
注意
1.当元素没有设置宽度，而设置浮动属性，元素的宽度随内容的变化而变化
2.当元素设置了浮动属性后，会对相邻元素产生影响，相邻元素特指紧邻后面的元素
清除浮动的方法：
1.clear:both; 或者clear:right; 或者clear:left; (常用)
2.width:100%; overflow:hidden; (常用)
横向两列布局：

注意：
1.受到浮动影响的不仅仅是紧邻的元素，还有父包含块也会受到影响会缩成一条，当父包含块缩成一条时，用clear:both清除浮动无效，它一般用于紧邻后面的元素的清除浮动
2.DIV块的高度一般不需要设置

333.绝对定位布局

当我们需要一个祖先元素作为参照时，一般把祖先元素的定位设置为relative，这样比较稳定，而子级元素设置为absolute

有两种情况
1.

2.