css位置布局,CSS定位布局相关

本文档包括CSS的 样式 定位 框模型

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-p_w_upload 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的(fixed)，因此不会受到滚动的影响：

body

{

background-p_w_picpath:url(/i/eg_bg_02.gif);

background-repeat:no-repeat;

background-p_w_upload:fixed

}

可以利用 background-position 属性改变图像在背景中的位置

background-position:center;

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

body

{

background-p_w_picpath: url(/i/eg_bg_03.gif);

background-repeat: repeat-y;

}

缩进文本

把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果

CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

p {text-indent: 5em;}

字间隔

word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

p.spread {word-spacing: 30px;}

p.tight {word-spacing: -0.5em;}

This is a paragraph. The spaces between words will be increased.

This is a paragraph. The spaces between words will be decreased.

字间隔

word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

字母间隔

letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。

但是对于汉字来说word-spacing不起作用，letter-spacing属性才能控制两个汉字之间的距离

HTML列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于

• 标签。每个列表项始于
• 。
  • Coffee
  • Milk

  浏览器显示如下：

  .Coffee

  .Milk

  有序列表

  同样，有序列表也是一列项目，列表项目使用数字进行标记。

  有序列表始于

  1. 标签。每个列表项始于
  2. 标签。
     1. Coffee
     2. Milk

     浏览器显示如下：

     Coffee

     Milk

     列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

     定义列表

     自定义列表不仅仅是一列项目，而是项目及其注释的组合。

     自定义列表以

     开始。每个自定义列表项的定义以

     开始。

     Coffee

     Black hot drink

     Milk

     White cold drink

     浏览器显示如下：

     Coffee

     Black hot drink

     Milk

     White cold drink

     定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

     CSS 定位机制

     CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

     除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

     块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

     行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box)，行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

     CSS position 属性

     通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

     position 属性值的含义：

     static

     元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

     relative

     元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

     absolute

     元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

     fixed

     元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

     提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

     position：relative

     相对定位回按照元素的原始位置对该元素进行移动

     position：absolute

     通过绝对定位，元素可以放置到页面上的任何位置。

     position:fixed

     固定定位，滚动条无论如何滚动，它始终位于窗口的某一个地方

     如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为

     overflow：scroll 用滚动条显示，出现滚动条

     overflow:hidden 隐藏超出部分内容

     clear 属性规定元素的哪一侧不允许其他浮动元素

     图像的左侧和右侧均不允许出现浮动元素：

     img

     {

     float:left;

     clear:both;

     }