HTML初学笔记（第六章）

1.浮动

所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素的排版产生影响。如果要避免这种影响，就需要对元素清除浮动。

基本语法格式：

选择器{float:属性值;}

2.清除浮动

基本语法格式：

选择器{clear:属性值;}

使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。

after{                              /*对父元素应用after伪对象样式*/     

                display:block;     

                clear:both;     

                content:"";     

                visibility:hidden;             

                height:0;

}

3.overflow属性

运用clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，经常会遇到一些特殊的浮动影响，这时就需要使用overflow属性清除浮动。

基本语法格式：

选择器{overflow:属性值;}

4.定位属性

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

在CSS中，通过CSS定位（CSS position）可以实现网页元素的精确定位。元素的定位属性主要包括定位模式和边偏移两部分。

position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值；}

5.边偏移

静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

6.相对定位和绝对定位

1、如果仅对标签设置绝对定位，不设置边偏移，则标签的位置不变，但该标签不再占用标准文档流中的空间，会与上移的后续标签重叠。

2、定义多个边偏移属性时，如果left和right参数值冲突，以left参数值为准；如果top和bottom参数值冲突，以top参数值为准。

7.z-index层叠等级属性

小提醒：当分析完页面模块后，就可以运用盒子模型的原理，通过div+css布局来控制网页的各个模块。初学者在制作网页时，一定要养成分析页面布局的习惯，这样可以提高网页制作的效率。

8.网页模块命名规范

如果没有统一的命名规范进行必要的约束，随意地命名，就会使整个网站的后续工作很难进行。

网页中，常用的命名方式：

1.驼峰式：除了第一个单词外后面的单词首写字母都要大写（例如：partOne）。

2.帕斯卡：每一个单词之间用“_”连接（例如：content_one）。