CSS基础内容总结（五）

CSS Margin(外边距)

---

CSS Margin(外边距)属性定义元素周围的空间。

CSS Margin属性接受任何长度单位、百分数值甚至负值。

---

Margin

margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的

margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

可能的值

值	说明
auto	设置浏览器边距。 这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

Margin可以使用负值，重叠的内容。

CSS Padding（填充）

---

CSS Padding（填充）属性定义元素边框与元素内容之间的空间。

---

Padding（填充）

当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

可能的值

值	说明
length	定义一个固定的填充(像素, pt, em,等)
%	使用百分比值定义一个填充

提示：CSS padding 属性可以使用长度值或百分比值，但与 margin 属性不同，它不允许使用负值。

---

内边距的百分比数值

CSS padding 属性的百分比数值是相对于其父元素的 width 计算的，如果改变了父元素的 width，则它们也会改变。

以下是将段落的内边距设置为父元素 width 的 20% 的示例：

p {padding: 20%;}

假设一个段落的父元素是 div 元素，那么它的 padding 的 width 计算是根据 div 进行的：

<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>

注意：上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

 

---

填充- 单边内边距属性

在CSS中，它可以指定不同的侧面不同的填充：

实例

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

尝试一下 »

 

---

填充 - 简写属性

为了缩短代码，它可以在一个属性中指定的所有填充属性。

这就是所谓的缩写属性。所有的填充属性的缩写属性是"padding":

实例

padding:25px 50px;

尝试一下 »

Padding属性，可以有一到四个值。

padding:25px 50px 75px 100px;

• 上填充为25px
• 右填充为50px
• 下填充为75px
• 左填充为100px

padding:25px 50px 75px;

• 上填充为25px
• 左右填充为50px
• 下填充为75px

padding:25px 50px;

• 上下填充为25px
• 左右填充为50px

padding:25px;

• 所有的填充都是25px

---

更多实例

在一个声明中的所有填充属性
这个例子演示了使用缩写属性设置在一个声明中的所有填充属性，可以有一到四个值。

设置左部填充
这个例子演示了如何设置元素左填充。

设置右部填充
这个例子演示了如何设置元素右填充。.

设置上部填充
这个例子演示了如何设置元素上填充。

设置下部填充
这个例子演示了如何设置元素下填充。

---

所有的CSS填充属性

属性	说明
padding	使用缩写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-left	设置元素的左部填充
padding-right	设置元素的右部填充
padding-top	设置元素的顶部填充

SS 分组 和 嵌套 选择器

CSS 分组可以将具有相同样式的选择器进行分组，减少代码量。

CSS 嵌套适用于选择器内部的选择器的样式。

---

Grouping Selectors

在样式表中有很多具有相同样式的元素。

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

为了尽量减少代码，你可以使用分组选择器。

每个选择器用逗号分隔.

在下面的例子中，我们对以上代码使用分组选择器：

实例

h1,h2,p
{
color:green;
}

尝试一下 »

提示：您可以对任意多个选择器进行分组，CSS 对此没有任何限制。

 

---

嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子，为所有p元素指定一个样式，为所有元素指定一个class="marked"的样式，并仅用于class="标记"，类内的p元素指定第三个样式：

实例

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

尝试一下 »

 

CSS 尺寸 (Dimension)

---

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

---

更多实例

设置元素的高度

这个例子演示了如何设置不同元素的高度。

使用百分比设置图像的高度

这个例子演示了如何使用百分比值设置元素的高度。

使用像素值来设置元素的宽度

本例演示如何使用像素值来设置元素的宽度。

设置元素的最大高度

此示例演示如何设置元素的最大高度。

使用百分比来设置元素的最大宽度

本例演示如何使用百分比值来设置元素的最大宽度。

设置元素的最低高度

此示例演示如何设置元素的最小高度。

使用像素值设置元素的最小宽度

这个例子演示了如何使用像素值设置元素的最小宽度。

---

所有CSS 尺寸 (Dimension)属性

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

CSS Display(显示) 与 Visibility（可见性）

CSS display 属性和 visibility属性都可以用来隐藏某个元素，但是这两个属性有不同的定义，请详细阅读以下内容。

---

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

Box 1

Box 2

Box 3

---

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

实例

h1.hidden {visibility:hidden;}

尝试一下 »

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

实例

h1.hidden {display:none;}

尝试一下 »

 

---

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

• <h1>
• <p>
• <div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

• <span>
• <a>

---

如何改变一个元素显示

可以更改内联元素为块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

下面的示例把列表项显示为内联元素：

实例

li {display:inline;}

尝试一下 »

下面的示例把span元素作为块元素：

实例

span {display:block;}

尝试一下 »

注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

---

更多实例

如何显示元素的内联元素。

这个例子演示了如何显示一个元素的内联元素。

如何显示元素的块元素。

这个例子演示了如何显示一个元素的块元素。

如何使用一个表的collapse属性。

这个例子演示了如何使用表的collapse属性。

CSS Positioning(定位)

CSS position 属性，允许您将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

---

定位有时很棘手！

决定显示在前面的元素！

元素可以重叠！

---

Positioning(定位)

CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定position属性。他们也有不同的工作方式，这取决于定位方法.

有四种不同的定位方法。

---

Static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。

---

Fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

实例

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

尝试一下 »

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.

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

Fixed定位的元素和其他元素重叠。

---

Relative 定位

相对定位元素的定位是相对其正常位置。

实例

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

尝试一下 »

可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

实例

h2.pos_top
{
position:relative;
top:-50px;
}

尝试一下 »

相对定位元素经常被用来作为绝对定位元素的容器块。

---

Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

实例

h2
{
position:absolute;
left:100px;
top:150px;
}

尝试一下 »

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

Absolutely定位的元素和其他元素重叠。

---

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

实例

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

尝试一下 »

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

---

更多实例

裁剪元素的外形

此示例演示如何设置元素的外形。该元素被剪裁成这种形状，并显示出来。

如何使用滚动条来显示元素内溢出的内容

这个例子演示了overflow属性创建一个滚动条，当一个元素的内容在指定的区域过大时如何设置以适应。

如何设置浏览器自动溢出处理

这个例子演示了如何设置浏览器来自动处理溢出。

更改光标

这个例子演示了如何改变光标。

---

所有的CSS定位属性

"CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。

属性	说明	值	CSS
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。	auto length % inherit	2
clip	剪辑一个绝对定位的元素	shape auto inherit	2
cursor	显示光标移动到指定的类型	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	2
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。	auto length % inherit	2
overflow	设置当元素的内容溢出其区域时发生的事情。	auto hidden scroll visible inherit	2
position	指定元素的定位类型	absolute fixed relative static inherit	2
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。	auto length % inherit	2
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。	auto length % inherit	2
z-index	设置元素的堆叠顺序	number auto inherit	2

相关文章

CSS 参考手册：CSS position 属性

CSS Float(浮动)

CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

---

什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

---

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

实例

img
{
float:right;
}

尝试一下 »

 

---

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

实例

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

尝试一下 »

 

---

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

实例

.text_line
{
clear:both;
}

尝试一下 »

提示：如果您想要了解更多有关 clear 属性的知识，请访问本站的CSS参考手册：CSS clear 属性。

---

更多实例

为图像添加边框和边距并浮动到段落的右侧

让我们为图像添加边框和边距并浮动到段落的右侧

标题和图片向右侧浮动

让标题和图片向右侧浮动。

让段落的第一个字母浮动到左侧

改变样式，让段落的第一个字母浮动到左侧。

创建一个没有表格的网页

使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。

---

CSS 中所有的浮动属性

"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。

属性	描述	值	CSS
clear	指定不允许元素周围有浮动元素。	left right both none inherit	1
float	指定一个盒子（元素）是否可以浮动。	left right none inherit	1

---

相关文章

CSS 参考手册：CSS float 属性 

CSS 水平对齐(Horizontal Align)

关于 CSS 中元素的水平对齐(Horizontal Align)，你可以使用多种属性来进行设置。

---

在CSS中，有几个属性用于元素水平对齐。

---

块元素对齐

块元素是一个元素，占用了全宽，前后都是换行符。

块元素的例子：

• <h1>
• <p>
• <div>

文本对齐，请参阅 CSS文本 章节。.

在这一章中，我们会告诉你块元素如何水平对齐布局。

---

中心对齐,使用margin属性

块元素可以把左，右页边距设置为"自动"对齐。

Note: 在IE8中使用margin:auto属性无法正常工作，除非声明 !DOCTYPE

margin属性可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素：

实例

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

尝试一下 »

提示: 如果宽度是100％，对齐是没有效果的。

注意：IE5中块元素有一个margin处理BUG。为了使上述例子能工作，在IE5中，需要添加一些额外的代码。 实例

---

使用position属性设置左，右对齐

元素对齐的方法之一是使用绝对定位：

实例

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

尝试一下 »

注意：绝对定位与文档流无关，所以它们可以覆盖页面上的其它元素。

 

---

使用float属性设置左，右对齐

使用float属性是对齐元素的方法之一：

实例

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

尝试一下 »

 

---

使用Padding设置垂直居中对齐

CSS 中一个简单的设置垂直居中对齐的方式就是头部顶部使用 padding:

.center { padding: 70px 0; border: 3px solid green; }

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

.center { padding: 70px 0; border: 3px solid green; text-align: center; }

---

Crossbrowser兼容性问题

类似这样的元素对齐时，预先确定margin和元素的填充，始终是一个好主意。这是为了避免在不同的浏览器中的可视化差异。

IE8和早期有一个问题，当使用float属性时。如果一个容器元素（在本例中<div class="container">）指定的宽度，!DOCTYPE声明缺失，IE8和早期版本会在右边增添17px的margin。这似乎是一个滚动的预留空间。使用float属性始终设置在DOCTYPE声明中！

实例

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

尝试一下 »

CSS 组合选择符

CSS 组合选择符可以让你直观的明白选择器与选择器之间的关系。

---

CSS 组合选择符

组合选择符说明了两个选择器直接的关系。

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

• 后代选取器(以空格分隔)
• 子元素选择器(以大于号分隔）
• 相邻兄弟选择器（以加号分隔）
• 普通兄弟选择器（以波浪号分隔）

---

后代选取器

后代选取器匹配所有指定元素的后代元素。

以下实例选取所有 <p> 元素插入到 <div> 元素中: 

实例

div p
{
background-color:yellow;
}

尝试一下 »

 

---

子元素选择器

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

以下实例选择了<div>元素中所有直接子元素 <p> ：

实例

div>p
{
background-color:yellow;
}

尝试一下 »

---

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

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

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

实例

div+p
{
background-color:yellow;
}

尝试一下 »

---

普通相邻兄弟选择器

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> : 

实例

div~p
{
background-color:yellow;
}

尝试一下 »

CSS 伪类(Pseudo-classes)

---

CSS伪类是用来添加一些选择器的特殊效果。

由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

---

语法

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

 

---

anchor伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

实例

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

尝试一下 »

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

---

伪类和CSS类

伪类可以与 CSS 类配合使用：

a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS Syntax</a>

如果在上面的例子的链接已被访问，它会显示为红色。

---

CSS - :first - child伪类

您可以使用 :first-child 伪类来选择元素的第一个子元素

注意：在IE8的之前版本必须声明<!DOCTYPE> ，这样 :first-child 才能生效。

匹配第一个 <p> 元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：

实例

<html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>

尝试一下 »

---

匹配所有<p> 元素中的第一个 <i> 元素

在下面的例子中，选择相匹配的所有<p>元素的第一个 <i>元素：

实例

<html>
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

尝试一下 »

---

匹配所有作为第一个子元素的<p> 元素中的所有 <i> 元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的<p> 元素中的所有 <i> 元素：

实例

<html>
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

尝试一下 »

---

CSS - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则

注意：IE8必须声明<!DOCTYPE>才能支持;lang伪类。

在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：

实例

<html>
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

尝试一下 »

---

更多实例

为超链接添加不同样式
这个例子演示了如何为超链接添加其他样式。

使用 :focus
这个例子演示了如何使用 :focus伪类。

---

所有CSS伪类/元素

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始值

---

扩展阅读

CSS拾遗系列：浅谈CSS中的伪元素和伪类