CSS和div布局页面

CSS和div布局页面
一、什么是布局
- 网页布局
- 页面元素定位机制
二、布局属性
- 浮动
- 清除浮动
- 定位
- - 绝对定位
  - 相对定位
  - 固定定位

一、什么是布局

网页实质是块与块之间的位置，块挨着块，块嵌套块，块叠着块。css网页布局指的是利用css对网页内容的布局进行规划，将主次内容进行归纳和区分；以最适合浏览的方式，将图片、文字等内容遵循一定的原则，放置到页面不同的位量给用户良好的浏览阅读体验。DIV+CSS布局就是网页html通过DIV标签+CSS样式表代码开发制作的（html）网页的统称。

网页布局

进行网页布局的目的是为了使页面结构清晰，易读，更有条理性。网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

这里大概总结网络布局的一般步骤：
1、确定版心：网页的主体内容,在页面中水平居中显示
2、分析页面中的模块：头部(header)、导航(nav)、焦点图(banner)、内容(content)、页面底部(footer)。
3、控制页面中各个模块：通过盒子模型，使用DIV+CSS进行模块的控制。

页面元素定位机制

1、普通流方式：由元素在html文件中的位置决定(由标签在文件中的位置来决定)。
这种方式是按标准文档流进行布局的，也是默认的布局方式，这种布局方案，是最简单的一种布局方案。
所以它也存在比较明显的缺点：就是功能太弱。如果只使用流式布局，并不能完成复杂页面的开发。因为复杂页面中有很多的盒子，需要并排显示。

2、浮动方式：元素在页面中可以左右移动,直到碰到包含框或其他浮动框。浮动发明的原因，刚开始是让文字环绕浮动的元素，形成字围效果，可以这么说，浮动就是元素脱离原有的标准文档流,移动到其父元素中指定的位置。

3、绝对定位：直接将元素定位到页面的任何位置(设置元素在页面中的位置坐标)。
这种方式的运用场景很多，比如说让块级元素水平垂直居中。
在写一些效果时，绝对定位使用的还是比较多，如：轮播图…
在写动画时，会也使用到绝对定位。

二、布局属性

浮动

1、浮动：元素脱离原有的标准文档流,移动到其父元素中指定的位置
2、浮动的实现：在元素的CSS中添加float属性

（注意，浮动元素不占据空间，以两个div为例，正常是俩都显示出来，占据2空间，加浮动后，div就会叠加显示在一个位置, 此时要想让两个div正常显示一般使用到margin-left：浮动div的宽度,或者也是使用浮动。如果不设置，div叠加在一个位置时，只是位置叠加，但div中的内容不会被覆盖,如果后面的div没有指定宽度则自动横向填充完整，文字过多则会跑到第一个div下面形成文字环绕效果。如果指定宽度则去掉被覆盖的宽度显示，其它的文字到浮动div下面显示，即产生文字环绕效果。）

使用浮动的目的是为了让块级元素可以并排显示。然而浮动的元素会以它后面的兄弟元素以及父元素造成影响，因此我们需要清除浮动。

清除浮动

1、原因：浮动的元素离开了原有的文档流,它会对页面中其他元素的排版产生影响。为了消除这种影响，可以使用clear属性消除浮动。
clear属性：

2、对父元素造成影响
当父元素中的所有元素都浮动了，并且父元素没有设置高度，父元素的高度就会变成0，也叫父元素高度塌陷。如果造成了影响，我们需要清除这种影响，清除这种影响，我们叫也清除浮动。
解决办法有：
（1）加高法。手动给父元素加上高度用的不多。在写页面时，如果说盒子的高度就是靠内容撑起来的，此时，使用加高法，就不适合。
（2）overflow:hidden ：它的本意并不是用来清除浮动，但是它有这么一个作用，可以清除浮动元素对父元素造成的影响。
（3）伪元素法：创建一个伪元素 ::after表示在father内部的最后面创建一个元素这个元素就是一个伪元素。
3、对兄弟元素造成影响
解决办法：
用clear的相关属性消除对应的浮动。

定位

浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在CSS中，通过定位属性可以实现网页中元素的精确定位。

绝对定位

1、决定定位：可以把元素精确定位到页面中的某个地方。

position: absolute;
top:30px;
left: 45px;

2、运用场景：
①让块级元素水平垂直居中。
②在写一些效果时，绝对定位使用的还是比较多，如：轮播图。
③在写动画时，会也使用到绝对定位。
3、注意：
①元素绝对定位后，它与普通文档流就没有关系，不占据普通文档流的空间。
②绝对定位也需要设置偏移量，有两个方向: left right 另一个方向是top bottom，设置偏移量，一般是两个方向选其一。
③定位完，还可以通过margin调整它的位置。
④绝对定位的元素的位置是相对于最近的父元素而言的，因此可以简记：子绝父相。

相对定位

1、相对定位：元素以它所在的普通流中的位置为起始点进行定位(设置坐标)。

 position: relative; /*相对定位*/top:150px;left: 150px;

2、运用场景：在原本的位置基本上，进行偏移时，可以使用相对定位。
①对一个盒子的位置进行微调。
②position:relative 这一行代码还有一个作用，设置绝对定位的参数点。
3、注意：
①相对定位的元素脱离标准文档流，但是它原本的位置还是被自己占用着，别人无法占用。
②当进行了相对定位，基本上都要通过top, left, bottom, right来设置偏移量。
③如果设置了margin也会影响位置。

固定定位

1、固定定位是参考与整个浏览器的窗口。也需要设置偏移量：top right bottom left。

 position: fixed; /*固定定位*/

2、注意：
①完全脱离标准文档流。
②固定定位的参考点是浏览器的窗口，不会随着内容的滚动而滚动。
③对于固定定位，有些低版本浏览器支持并不好，使用的时候，需要考虑兼容性问题。