HTML+CSS基础篇7----详解页面布局
页面布局是非常非常重要的内容，如果对布局的相关知识点掌握的不够好，在设计页面时将会出现一系列的问题。
在本章的内容里，主要介绍浮动，绝对定位，相对定位，固定定位这四种定位。表格布局在下一章的内容中再来详细介绍。
1.HTML网页的默认布局方式是什么？
HTML网页的默认布局是流动布局。
流动布局有以下特点：
1）对于块元素来说自上而下垂直分布，默认的宽度都是浏览器的宽度。
2）对于内联元素来说从左到右水平显示，（直到占满该行又从左右往右排列）
2.什么是浮动？如何正确的使用浮动？
浮动是一种布局方式。
浮动元素的页面流向：1）块元素从上往下，内联元素从左上往右下依次布局
2）2.遇到浮动元素，尽可能的放在最左边or最右边，然后从流中删除这个段落
3）按照1）的步骤依次执行，不过内联元素定位时，会考虑到浮动元素的边界，因此会绕着浮动元素走
如何浮动一个元素： 1）为元素指定一个标识（可以是类也可以是id属性）
2）为该元素指定一个宽度（如：width:200px;）
3）为想要浮动的元素增加float样式（如：float: right;）
图解可以参考图解浮动。
3.如何修正（当主内容区和浮动元素区下面扩展，会导致页面不美观）主内容区与浮动元素的两栏问题？
1）计算浮动页面的边栏宽度=（内+外边距+边框）*2+width（内容宽度）
2）让内容区的外边距宽度与浮动页面的边栏宽度相等
4.如何解决使用浮动元素所引起的页面重叠问题？
选择重叠区域的元素，使用clear属性来禁止左边，右边，或者两边有浮动元素存在。clear可选的值有：left,right,both。
5.什么是绝对定位？如何使用绝对定位？
绝对定位的定位方式是将使用绝对定位的元素完全中正常的HTML文档流中删除，内联元素也不会绕着绝对定位的元素走，完全就像没有这个元素一样处理。
对一个元素使用绝对定位：1）先确定绝对定位的元素是相对于什么元素定位的，定位原则是最近的已经定位的祖先元素。
2）确定定位元素想要移动的位置（top bottom,left,right）以及元素的宽度（width）
3) 将元素的的布局方式设置为： position:absolute；
图解可以参考图解绝对定位。
6.什么是相对定位？如何使用相对定位？
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
对一个元素使用相对定位：1）相对定位是相对于自身元素本身的位置进行定位的。
2）确定元素想要移动的位置（top bottom,left,right）以及元素的宽度（width）
3）将元素的布局方式设置为：position：relative；
图解可以参考图解相对定位。
7.什么是固定定位？固定定位如何使用？
固定定位是不随页面滚动而改变位置，是相对于浏览器定位的。
对一个元素使用固定定位：1）固定定位是相对于浏览器位置进行定位的。
2）确定元素想要移动的位置（top bottom,left,right）以及元素的宽度（width）
3）将元素的布局方式设置为：position：fixed;
8.浮动，绝对定位，相对定位，固定定位这四种方式的不同点有哪些？
首先，使用好这些布局方式的一个前提是：知道每一种布局是相对于什么元素进行定位的！！1(非常重要)
浮动与绝对定位：同样是将元素从流中删除，但是浮动定位时，普通流的内联元素是会绕开浮动元素的，但是不会绕开绝对定位元素。
绝对定位和相对定位（固定定位）：绝对定位不占据页面空间，相对定位保留本来元素的空间，绝对定位相对于最近的已定位的祖先元素进行定位，相对定位是相对于元素本身的位置进行定位（或者说发生偏移），而固定定位是相对于浏览器进行定位的。
本博客由博主原创，如需转载需说明出处！谢谢支持！