1.6.CSS扩展选择器

1.6.1.后代选择器

选择父选择器选中得元素中符合子选择器得子孙元素，可以用此选择器。

例：

p{color:

#00FF00;}

pb{color:

#FF000;}

P标签刘德华段落样式

P标签段落

1.6.2.子元素选择器

选择父选择器选中得元素中符合子选择器得子元素，可以用此选择器。

与后代选择器相比，子元素选择器（Childselectors）只能选择作为某元素子元素得元素。

h1>strong{color:

red;}

这个规则会把第一个h1下面得两个strong元素变为红色，但就是第二个h1中得strong不受影响：

Thisisveryveryimportant、

Thisisreallyveryimportant、

1.6.3.分组选择器

对多个不同选择器进行相同样式设置得时候应用此选择器。

例：

p,div{color:

#FF0000;}

P标签显示段落。

注：

多个不同选择器要用逗号分隔开。

1.6.4.属性选择器

属性选择器可以根据元素得属性及属性值来选择元素。

如果您希望把包含属性（title）得所有元素变为红色，可以写作：

*[title]{color:

red;}

与上面类似，可以只对有href属性得锚（a元素）应用样式：

a[href]{color:

red;}

为了将同时有href与title属性得HTML超链接得文本设置为红色，可以这样写：

a[href][title]{color:

red;}

假设只希望选择moons属性值为1得那些planet元素：

planet[moons="1"]{color:

red;}

上面得代码会把以下标记中得第二个元素变成红色，但第一个与第三个元素不受影响：

Venus

Earth

Mars

1.6.5.相邻兄弟选择器

如果需要选择紧接在另一个元素后得元素，而且二者有相同得父元素，可以使用相邻兄弟选择器。

h1+p{margin-top:

50px;}

1.6.6.伪元素选择器

其实就在html中预先定义好得一些选择器。

称为伪元素。

就是因为CSS得术语。

格式：

标签名：

伪元素。

类名标签名。

类名：

伪元素。

都可以。

a:

link超链接未点击状态。

a:

visited被访问后得状态。

a:

hover光标移到超链接上得状态（未点击）。

a:

active点击超链接时得状态。

1.7.盒子模型

1.7.1.盒子模型概述

CSS盒子模型就就是在网页设计中经常用到得CSS技术所使用得一种思维模型。

如图-2所示：

图-2

1.7.2.Padding

padding属性定义元素得内边距。

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

如果设置一个值，则上下左右内边距都取该值。

如果设置两个值，则第一个值为上下边距，第二个值为左右边距。

如果设置三个值，则第一个值为上边距，第二个为左右边距，第三个为下边据。

如果设置四个值，则按照上右下左边距取值，即按顺时针方向取值。

可以为元素得内边距设置百分数值。

百分数值就是相对于其父元素得width计算得。

所以，如果父元素得width改变，它们也会改变。

也可以通过如下属性单独设置上右下左内边距。

padding-top：

上内边距

padding-right：

右内边距

padding-bottom：

下内边距

padding-left：

左内边距

1.7.3.Margin

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

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

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

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

可以设置为auto。

百分数就是相对于父元素得width计算得。

多值设置规则与Padding相同。

也可以通过如下属性当杜设置上右下左外边距。

margin-top：

上外边距

margin-right:

右外边距

margin-bottom:

下外边距

margin-left:

左外边距

1.7.4.Border

元素得边框（border）就是围绕元素内容与内边距得一条或多条线。

CSSborder属性允许您规定元素边框得样式、宽度与颜色。

Border-style:

定义边框样式

border-top-style

border-right-style

border-bottom-style

border-left-style

border-width：

边框宽度

border-top-width

border-right-width

border-bottom-width

border-left-width

border-color：

边框颜色

border-top-color

border-right-color

border-bottom-color

border-left-color

注意，如果边框样式设置为none，那么无论设置多少宽度真实值都为0，即不可见也不占用空间。

1.8.三种定位方式

1.8.1.三种定位方式

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

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

1.9.文档流定位

1.9.1.文档流定位概述

除非专门指定，否则所有框都在普通流中定位。

也就就是说，普通流中得元素得位置由元素在（X）HTML中得位置决定。

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

行内框在一行中水平布置。

可以使用水平内边距、边框与外边距调整它们得间距。

但就是，垂直内边距、边框与外边距不影响行内框得高度。

1.10.Float_浮动

1.10.1.浮动概述

浮动可以改变元素得布局方式。

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

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

浮动元素会生成一个块级框，而不论它本身就是何种元素。

如图-3所示：

图-3

1.10.2.浮动演示

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

如图-4所示：

图-4

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

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

如图-5所示：

图-5

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

如图-6所示：

图-6

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

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

图-7

1.10.3.Clear_清除浮动

由于浮动得元素脱离了文档流，对其她元素得产生了影响，可以通过clear禁止元素左右具有浮动元素，从而阻止这种影响。

Clear可以指定元素得左/右/左右边上不允许有浮动元素。

如图-8所示：

图-8

1.11.定位

1.11.1.CSSposition属性

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

position属性值得含义：

static

元素框正常生成。

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

relative

元素框偏移某个距离。

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

absolute

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

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

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

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

fixed

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

提示：

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

1.11.2.TOP　bottomleftright

在绝对定位时，通过这些属性指定当前元素基于最近得有定位得祖先元素定位位置关系。

在相对定位时，通过这些属性指定当前元素基于当前元素得初始位置得位移进行定位。

1.11.3.z-index

指定元素得堆叠顺序，数值越大离用户越近，数值越小离用户越远，此值可以为负数。

1.12.Display

1.12.1.Display属性详解

设置元素得显示方式。

我们知道元素分为行内元素与块级元素，而display属性可以修改元素得显示方式。

图-1

*visibility也可以实现隐藏，不同得就是display不显示，也不占用空间，而visibility隐藏，但就是空间仍然占用。

1.13.其她CSS属性

1.13.1.其她CSS属性

对齐方式

vertical-align

设置或检索对象内容得垂直对其方式。

text-align

设置或检索对象中文本得对齐方式。

列表属性

list-style

设置列表项目相关样式

list-style-position

设置或检索作为对象得列表项标记如何根据文本排列。

list-style-type

设置或检索对象得列表项所使用得预设标记。

字体设置

Font

字体设置

Color

字体颜色

Font-family

字体设置

Font-size

字体大小

Font-style

斜体设置

font-weight

字体粗细

text-decoration

字体下划线

text-underline-position

下划线位置

line-height

行高。

即字体最底端与字体内部顶端之间得距离。

宽高设置

Height

高度

Width

宽度

背景设置

Background

背景设置

background-color

背景色设置

background-image

背景图片设置

background-position

设置或检索对象得背景图像位置

background-repeat

设置或检索对象得背景图像就是否及如何铺排