CSS讲解第二节.docx

CSS讲解第二节.docx

《CSS讲解第二节.docx》由会员分享，可在线阅读，更多相关《CSS讲解第二节.docx（27页珍藏版）》请在冰豆网上搜索。

CSS讲解第二节

CSS框模型概述

CSS框模型（BoxModel）规定了元素框处理元素内容、内边距、边框和外边距的方式。

术语翻译

∙element:

元素。

∙padding:

内边距，也有资料将其翻译为填充。

∙border:

边框。

∙margin:

外边距，也有资料将其翻译为空白或空白边。

在CSS中，width和height指的是内容区域的宽度和高度。

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设框的每个边上有10个像素的外边距和5个像素的内边距。

如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素，请看下图：

#box{

width:

70px;

margin:

10px;

padding:

5px;

}

提示：

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

提示：

外边距可以是负值，而且在很多情况下都要使用负值的外边距。

CSS内边距

元素的内边距在边框和内容区之间。

控制该区域最简单的属性是padding属性。

CSSpadding属性定义元素边框与元素内容之间的空白区域。

CSSpadding属性

CSSpadding属性定义元素的内边距。

padding属性接受长度值或百分比值，但不允许使用负值。

例如，如果您希望所有h1元素的各边都有10像素的内边距，只需要这样：

h1{padding:

10px;}

或

h1{padding:

10px0.25em2ex20%;}

顺序：

上—>右—>下—>左

单边内边距属性

也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

∙padding-top

∙padding-right

∙padding-bottom

∙padding-left

CSS边框

元素的边框（border）是围绕元素内容和内边距的一条或多条线。

CSSborder属性允许你规定元素边框的样式、宽度和颜色。

边框的样式

样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

CSS的border-style属性定义了10个不同的非inherit样式，包括none。

例如，您可以为把一幅图片的边框定义为outset，使之看上去像是“凸起按钮”：

a:

linkimg{border-style:

outset;}

定义多种样式

您可以为一个边框定义多个样式，例如：

p.aside{border-style:

soliddotteddasheddouble;}

上面这条规则为类名为aside的段落定义了四种边框样式：

实线上边框、点线右边框、虚线下边框和一个双线左边框。

定义单边样式

如果您希望为元素框的某一个边设置边框样式，而不是设置所有4个边的边框样式，可以使用下面的单边边框样式属性：

∙border-top-style

∙border-right-style

∙border-bottom-style

∙border-left-style

p{border-style:

solidsolidsolidnone;}

p{border-style:

solid;border-left-style:

none;}

注意：

如果要使用第二种方法，必须把单边属性放在简写属性之后。

因为如果把单边属性放在border-style之前，简写属性的值就会覆盖单边值none。

边框的宽度

您可以通过border-width属性为边框指定宽度。

为边框指定宽度有两种方法：

可以指定长度值，比如2px或0.1em；或者使用3个关键字之一，它们分别是thin、medium（默认值）和thick。

定义单边宽度

您可以按照top-right-bottom-left的顺序设置元素的各边边框：

p{border-style:

solid;border-width:

15px5px15px5px;}

上面的例子也可以简写为（这样写法称为值复制）：

p{border-style:

solid;border-width:

15px5px;}

利用这个简单的机制，您只需指定必要的值，而不必全部都应用4个值，例如：

h1{margin:

0.25em1em0.5em;}/*等价于0.25em1em0.5em1em*/

h2{margin:

0.5em1em;}/*等价于0.5em1em0.5em1em*/

p{margin:

1px;}/*等价于1px1px1px1px*/

您也可以通过下列属性分别设置边框各边的宽度：

∙border-top-width

∙border-right-width

∙border-bottom-width

∙border-left-width

框的颜色

设置边框颜色非常简单。

CSS使用一个简单的border-color属性，它一次可以接受最多4个颜色值。

p{

border-style:

solid;

border-color:

bluergb（25%,35%,45%）#909090red;

}

定义单边颜色

还有一些单边边框颜色属性。

它们的原理与单边样式和宽度属性相同：

∙border-top-color

∙border-right-color

∙border-bottom-color

∙border-left-color

透明边框

我们刚才讲过，如果边框没有样式，就没有宽度。

不过有些情况下您可能希望创建一个不可见的边框。

CSS2引入了边框颜色值transparent。

这个值用于创建有宽度的不可见边框。

请看下面的例子：

CSS外边距

围绕在元素边框的空白区域是外边距。

设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值。

CSSmargin属性

设置外边距的最简单的方法就是使用margin属性。

margin属性接受任何长度单位，可以是像素、英寸、毫米或em。

单边外边距属性

您可以使用单边外边距属性为元素单边上的外边距设置值。

假设您希望把p元素的左外边距设置为20px。

不必使用margin（需要键入很多auto），而是可以采用以下方法：

p{margin-left:

20px;}

您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：

∙margin-top

∙margin-right

∙margin-bottom

∙margin-left

当然，对于这种情况，使用margin可能更容易一些：

p{margin:

20px30px30px20px;}

CSS外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

请看下图：

CSS定位（Positioning）

CSS定位和浮动

CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

一切皆为框

div、h1或p元素常常被称为块级元素。

这意味着这些元素显示为一块内容，即“块框”。

与之相反，span和strong等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

CSS定位机制

CSS有三种基本的定位机制：

普通流、浮动和绝对定位。

CSSposition属性

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

position属性值的含义：

static

元素框正常生成。

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

relative

元素框偏移某个距离。

元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。

包含块可能是文档中的另一个元素或者是初始包含块。

元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。

元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

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

提示：

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

相对定位

设置为相对定位的元素框会偏移某个距离。

元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

相对定位是一个非常容易掌握的概念。

如果对一个元素进行相对定位，它将出现在它所在的位置上。

然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将top设置为20px，那么框将在原位置顶部下面20像素的地方。

如果left设置为30像素，那么会在元素左边创建30像素的空间，也就是将元素向右移动。

#box_relative{

position:

relative;

left:

30px;

top:

20px;

}

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。

因此，移动元素会导致它覆盖其它框。

绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。

元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。

元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位使元素的位置与文档流无关，因此不占据空间。

这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative{

position:

absolute;

left:

30px;

top:

20px;

}

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

固定定位

p.one

{

position:

relative;

left:

150px;

top:

5px;

}

p.two

{

position:

fixed;

top:

300px;

right:

5px;

}

一些文本。

更多的文本。

注意：

position：

fixed；将文本位置固定，设置属性值也无法改变。

滚动条显示元素内溢出的内容

overflow:

hidden隐藏溢出内容

overflow:

auto自动处理溢出内容

*设置元素形状

控制元素上下层

z-index:

1

垂直排列图像：

注意：

默认情况下，图片底部与文本对齐。

Vertical-align包含属性text-top，text-bottom。

没有设为中间这一属性。

CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样

CSS浮动

请看下图，当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。

因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。

如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。

如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

行框和清理

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

因此，创建浮动框可以使文本围绕图像：

要想阻止行框围绕浮动框，需要对该框应用clear属性。

clear属性的值可以是left、right、both或none，它表示框的哪些边不应该挨着浮动框。

为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

这是一个有用的工具，它让周围的元素为浮动元素留出空间。

假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。

您可能编写下面的代码：

.news{

background-color:

gray;

border:

solid1pxblack;

}

.newsimg{

float:

left;

}

.newsp{

float:

right;

}

sometext