CSS 定位 (Positioning) 实例
CSS 实例
- CSS 背景实例
- CSS 文本实例
- CSS 字体(font)实例
- CSS 边框(border)实例
- CSS 外边距 (margin) 实例
- CSS 内边距 (padding) 实例
- CSS 列表实例
- CSS 表格实例
- 轮廓(Outline)实例
- CSS 尺寸 (Dimension) 实例
- CSS 分类 (Classification) 实例
CSS 定位 (Positioning) 实例
- CSS 伪类 (Pseudo-classes)实例
- CSS 伪元素 (Pseudo-elements)实例
01设置元素的形状
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>01设置元素的形状</title>
<style type="text/css">
img {
position:absolute;
clip: rect(0px 100px 300px 0px);
}
</style>
</head>
<body>
<img src="cc.jpg" width="510px" height="730px" />
</body>
</html>
![846157-20160119121423265-1022329671.png](https://i-blog.csdnimg.cn/blog_migrate/a129e3064f80af8fbbcc3456a3c2a430.png)
02如何使用滚动条来显示元素内溢出的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>02如何使用滚动条来显示元素内溢出的内容</title>
<style type="text/css">
div {
width: 250px;
height: 80px;
background-color: #cc9966;
overflow: scroll;
}
</style>
</head>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
</html>
![846157-20160119123926578-1941952482.gif](https://i-blog.csdnimg.cn/blog_migrate/304966cbc7d1477f582e836f6b5dd3d5.gif)
03如何隐藏溢出元素中溢出的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>03如何隐藏溢出元素中溢出的内容</title>
<style type="text/css">
div {
width: 250px;
height: 80px;
background-color: #cc9966;
overflow: hidden;
}
</style>
</head>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
</html>
![846157-20160119124807453-361508270.png](https://i-blog.csdnimg.cn/blog_migrate/6d85cd088a9f094e73d5791930bc78f8.png)
04如何设置浏览器来自动地处理溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04如何设置浏览器来自动地处理溢出</title>
<style type="text/css">
div {
width: 250px;
height: 80px;
background-color: #cc9966;
overflow: auto;
}
</style>
</head>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
</html>
![846157-20160119125106093-1316849994.gif](https://i-blog.csdnimg.cn/blog_migrate/f2825822c1f3c4d42841a7fa030a8d45.gif)
05垂直排列图象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>05垂直排列图象</title>
<style type="text/css">
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p>
这是一副<img class="top" border="1" src="55.jpg" />位于段落中的图像。
</p>
<p>
这是一副<img class="bottom" border="1" src="55.jpg" />位于段落中的图像。
</p>
</body>
</html>
![846157-20160119150057828-27814696.png](https://i-blog.csdnimg.cn/blog_migrate/0a74fd83e154c4d8c0568287b3b8a0d5.png)
06Z-index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>06Z-index</title>
<style type="text/css">
img.x {
position: absolute;
top: 30px;
left: 0px;
z-index: -1;
}
img.y {
position: absolute;
top: 150px;
left: 50px;
z-index: 1;
}
</style>
</head>
<body>
<h1>这是一标题</h1>
<img class="x" src="55.jpg" />
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
<h1>这是二标题</h1>
<img class="y" src="55.jpg" />
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
</body>
</body>
</html>
![846157-20160119152251109-1956722197.png](https://i-blog.csdnimg.cn/blog_migrate/4a8c775adcf4025bc6744e379ee3c41a.png)
07使用固定值设置图像的上右下左边缘
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>07使用固定值设置图像的上右下左边缘</title>
<style type="text/css">
img.top {
position: absolute;
top: 0px;
}
img.right {
position: absolute;
right: 0px;
}
img.bottom {
position: absolute;
bottom: 0px;
}
img.left {
position: absolute;
left: 100px;
}
</style>
</head>
<body>
<p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>
<img class="top" border="1" src="77.jpg" width="150px" height="100px" />
<img class="right" border="1" src="77.jpg" width="150px" height="100px" />
<img class="bottom" border="1" src="77.jpg" width="150px" height="100px" />
<img class="left" border="1" src="77.jpg" width="150px" height="100px" />
</body>
</html>
![846157-20160119165538953-1021003479.png](https://i-blog.csdnimg.cn/blog_migrate/f38a15e3c3211ded477d588aeb4dc05d.png)
08使用百分比设置图像的上右下左边缘
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>08使用百分比设置图像的上右下左边缘</title>
<style type="text/css">
img.top {
position: absolute;
top: 5%;
}
img.right {
position: absolute;
right: 5%;
}
img.bottom {
position: absolute;
bottom: 5%;
}
img.left {
position: absolute;
left: 20%;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<img class="top" border="1" src="77.jpg" width="150px" height="100px" />
<img class="right" border="1" src="77.jpg" width="150px" height="100px" />
<img class="bottom" border="1" src="77.jpg" width="150px" height="100px" />
<img class="left" border="1" src="77.jpg" width="150px" height="100px" />
</body>
</html>
![846157-20160119173500562-976515964.png](https://i-blog.csdnimg.cn/blog_migrate/0917a58b9ba19e98acfb229d2e6b70bf.png)
CSS 定位 (Positioning)总结
![846157-20160119173917297-763088914.png](https://i-blog.csdnimg.cn/blog_migrate/bd6fc6e308f39c38181bee8008c2a306.png)