网页布局

网页布局设计

常用选择器分为标签选择器，类选择器和id选择器。
css中常用的属性样式包括：文本和字体属性，背景属性以及盒子模型相关的属性。
样式有三种使用方式，分别是：行内样式，内嵌样式和外部样式。
样式的选择器优先级别是：ID选择器>类选择器>标签选择器。
样式的三种使用方式的优先级是：行内样式>内嵌样式>外部样式

1.盒子的定位
-HTML中每个元素都是一个盒子。
-浏览器对HTML文档进行解析，根据盒子的属性对其进行排列。
-每个元素默认使用标准文档流定位。

1）.标准文档流
改变行类样式标签与块级标签默认的显示特征
-通过display属性可以将行内元素按块级方式来显示，并可以设置width和height。也可以将块级元素行内显示。
-display的取值有：bloc，inline和none。

2.盒子的浮动

1). 如何将多个块级元素放置于同一行内，并设置其高度和属性?

-在HTML中可通过float属性将块级元素向左向右浮动，直至其边缘碰到包含它的元素或另一个浮动元素的边框为止。
-多个浮动的元素可以显示在同一行内，浮动元素会脱离标准文档流，不占标准文档流中的位置

2).盒子的浮动实际时通过设置的float属性来完成的，其属性主要取值有none，left，right。

-当float取值为 none 时表示不浮动，此时元素会按照默认的标准文档流的方式来处理。
-当float取值为 left 时表示向左浮动，此时元素会脱离标准文档流，不占文档流中的位置空间。
-当float取值为 right 时表示向右浮动，此时元素也会脱离标准文档流。

3.盒子的定位

-广义的"定位"是指将某个元素放置于某个位置。

-HTML 中的定位通过position属性来实现。

-定位按照position的取值分类固定定位。
1）. static:静态定位
2）. relative:相对定位
3）. absolute:绝对定位
4）. fixed：

-静态定位
1）.当position的取值为static时，为静态定位，该取值是position的默认值
2）.使用静态定位的标签将按照标准文档流的组织方式在页面中排列

-相对定位
1）.当position属性设为relative时，即相对定位
2）.设置为相对定位的元素按照标准文档流的规则在网页中排列，但是相对定位的元素可以设置其left，right，top和bottom属性来进行偏移
3）.偏移时参照该元素在标准文档流中的原位置，偏移后仅在显示上出现了坐标变化，但其在标准文档流中的位置的位置没有发生任何变化

-绝对定位
1）.当position取值设置为a’bsolute时，代表绝对定位，绝对定位的元素将脱离标准文档流，不受标准文档流的限制
2）.元素可以通过设置left，right，top，bottom属性并以页面为参照来进行偏移，绝对定位的元素在标准文档流中不占用其空间，不影响标准文档流中的元素，看似悬浮在页面之上
3）.如果多个绝对元素出现了重叠，则可以通过设置z-index属性修改他们显示的层次关系，z-index取值大的层会压住z-index取值最小的层

-固定定位
1）.当position取值为fixed时，即为固定定位，固定定位与绝对定位类似，均会脱离标准文档流
2）.与绝对定位的参照不同，固定定位参照浏览器窗口或其他显示设备的窗口，当用户拖动浏览器窗口的滚动条时，固定定位的元素将保持相对于浏览器窗口不变的位置

举例

相对定位

固定定位

4 .页面整体布局

1）.使用表格布局的弊端
-灵活性差
-可维护性差

2）.使用css布局则完全不同，其将页面在整体上用 div标签进行分块，然后对各块进行排列，最后在各块中添加相对应的内容

3）.使用css布局先从页面的内容组织逻辑出发，区分出内容的层次结构与区域，这样即使是一个很复杂的网页，也可以通过一个一个模块逐步搭建起来

5.总结
-页面默认按照标准文档流来排列网页内容，块级元素默认从上至下排列
-在HTML中，元素的定位通过position属性来设置，该属性的取值包括：static（静态定位），relative（相对定位），absolute（绝对定位）以及fixed（固定定位）
-float属性常用的三个取值为left，right和none‘
-浮动布局可以使块级元素横向紧挨排列或实现其他特殊排列，而非独占一行
-clear属性可以yong’yu清楚浮动