CSS定位布局相关

2019独角兽企业重金招聘Python工程师标准>>>

 

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

 

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

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

body 

  {

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

  background-repeat:no-repeat;

  background-attachment:fixed

  }

 

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

  background-position:center;

 

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

  body

  { 

  background-image: 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;}

 

<p class="spread">

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

</p>

 

<p class="tight">

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

</p>

 

 

字间隔

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

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

 

字母间隔

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

 

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

 

 

HTML列表

无序列表

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

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

浏览器显示如下：

.Coffee

.Milk

 

有序列表

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

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

浏览器显示如下：

Coffee

Milk

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

 

定义列表

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

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

浏览器显示如下：

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;

  }

 

本文出自 “走在未来的路上” 博客，请务必保留此出处http://wtf0313.blog.51cto.com/1093061/1193172

转载于:https://my.oschina.net/u/2457218/blog/534766