menu
more_vert

CSS学习(三)

作者:dayu

技术分享
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>WENG</title> 
<style>
p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
</style>
</head>

<body>
<p>这个段落是蓝色文本,居中对齐。</p>
<div class="marked">
<p>--------------这个段落不是蓝色文本。---------------</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式,但有不同的文本颜色。</p>
</body>
</html>

View Code

技术分享

尺寸 (Dimension)

尺寸属性

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

Positioning(定位)

position 属性指定了元素的定位类型。

position 属性的四个值:

  • static
  • relative
  • fixed
  • absolute

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

static 定位

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

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

fixed 定位

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

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

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

relative 定位

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

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

absolute 定位

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

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

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

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

重叠的元素

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

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

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

所有的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
overflow-y
指定如何处理顶部/底部边缘的内容溢出元素的内容区域 auto
hidden
scroll
visible
no-display
no-content
2
overflow-x
指定如何处理右边/左边边缘的内容溢出元素的内容区域 auto
hidden
scroll
visible
no-display
no-content
2
position 指定元素的定位类型 absolute
fixed
relative
static
inherit
2
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 auto
length
%
inherit
2
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 auto
length
%
inherit
2
z-index 设置元素的堆叠顺序 number
auto

inherit
2

Float(浮动)

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

Float(浮动),往往是用于图像,但它在布局时一样非常有用。

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

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

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

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

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

技术分享技术分享
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>WENG</title> 
<style>
.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

View Code

技术分享

CSS 中所有的浮动属性

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

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

水平对齐(Horizontal Align)

中心对齐,使用margin属性

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

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

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

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

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

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

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

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

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

组合选择符

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

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

后代选取器

后代选取器匹配所有值得元素的后代元素。

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

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学习(三)

原文地址:http://www.cnblogs.com/arxive/p/7203343.html