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>

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>

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>

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>

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>

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>

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>

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>

CSS 定位 (Positioning)总结

W3School-CSS 定位 (Positioning) 实例的更多相关文章

  1. CSS 定位 (Positioning) 实例

    CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...

  2. CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...

  3. (七)CSS定位(Positioning)

    CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...

  4. CSS定位(Positioning)

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

  5. CSS 定位 (Positioning)概述

    div.h1 或 p 元素常常被称为块级元素. 这意味着这些元素显示为一块内容,即“块框”. 与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. ...

  6. CSS 定位 (Positioning)学习

    最近被css的定位要搞疯了...下面我总结一下最近学习东西. 先介绍几个概念: 块框:div.h1 或 p 元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”. 行内框:与之相反,sp ...

  7. HTML5学习笔记（八）：CSS定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位. 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠.定位的基本思想很简单 ...

  8. java基础57 css样式、选择器和css定位（网页知识）

    本文知识点(目录): 1.CSS样式    2.选择器    3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构    2.css(层叠样式表)在一个页面中负责了一个页面 ...

  9. CSS定位（postion）和移动(float)

    5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...

随机推荐

  1. 使用fiddler的autoResponder及设置手机端代理实现远程调试，出现的问题及解决办法

    这是开通博客的第一篇随笔,好鸡冻哈哈o_O 首先是下载安装,我安装的是最新的v4.6.2.0版本,大家在百度上搜fidddler4在百度软件中心普通下载就可以了.或者直接用这个连接:http://dl ...

  2. 从Insider计划看Win10的发展

    Windows 10 Insider计划是微软为了更好的倾听用户的需求而推出的用户测试项目,参与该项目的 Insider可以免费使用Windows 10 预览版.同时这些用户还需要对 Windows ...

  3. [SL] Silverlight + WCF Demo项目

    I:项目描述:利用 Silverlight+WCF 技术,模拟资源管理器(如图1)功能,通过地址栏输入本地文件夹路径,然后将解析出来的该目录下所有文件(夹)存储到数据库中,然后再加载到界面上显示出来: ...

  4. 淡蓝风格的手机登录HTML模板

    查看效果:http://hovertree.com/texiao/mobile/10/ 或者手机扫描二维码查看效果: 效果图: 代码如下: <!DOCTYPE html> <html ...

  5. 【C#进阶系列】26 计算限制的异步操作

    什么是计算限制的异步操作,当线程在要使用CPU进行计算的时候,那么就叫计算限制. 而对应的IO限制就是线程交给IO设备(键鼠,网络,文件等). 第25章线程基础讲了用专用的线程进行计算限制的操作,但是 ...

  6. Android Permission 访问权限大全（转）

    程序执行需要读取到安全敏感项必需在androidmanifest.xml中声明相关权限请求, 完整列表如下: android.permission.ACCESS_CHECKIN_PROPERTIES允 ...

  7. swift相关

    1.界面上一个输入框,一个按钮,一个webview .点按钮,webview显示输入框中输入的url的页面. @IBOutlet var wv:UIWebView = nil          //定 ...

  8. 【算法】PHP实现冒泡排序和快速排序--防遗忘

    有没有这样的感觉,排序算法虽然简单,但是没看过一次,一会就又忘了,所以有必要 自己使用实际的代码运行实现,才记忆牢固,为此Mark //需求:将数组中元素,从大到小排列$a = array(11, 2 ...

  9. entityframework学习笔记--001

    最近想重新好好学习一下entityframework,于是在院子里找到了一篇不错的博客.下面把学习的过程记录下来,方便以后复习. 学习过程参考大神的博客:http://www.cnblogs.com/ ...

  10. hadoop基本命令

    1,hadoop job -list           列出Jobtracer上所有的作业 2,hadoop job -kill 任务    杀掉hadoop正在运行的任务 3,hadoop fs ...