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. android中ProgressBar和ListView

    ProgressBar进度条的使用情况: 进度条的.xml声明:如果不声明格式,则默认格式为转圆圈的形式,声明进度条的visibility为不可见. <ProgressBar android:i ...

  2. PHP连接SQL Server相关配置及说明

     关于php怎么连接数据库,大家肯定有不同的看法,有的用wamp,有的用xamp,他们都是集成环境,方便操作.但有时,数据库的类型不同,要连接不同的数据库.今天和大家分享一下如何连接sql2000,服 ...

  3. 小白Linux入门 三

    环境变量 shell 变量: 内存空间 ,命名的内存空间 echo $SHELL 其中SHELL是变量 里面是/bin/bash sudo su  进入root printenv 命令 命令: 内部命 ...

  4. do{...}while(0)的妙用

    在学习第一门编程语言时,就已经介绍了顺序分支.条件分支.循环分支.比如循环分支有for.while.do-while语句.在随后的学校及工作中,如果手工循环一般使用for.while,很少使用do-w ...

  5. https问答篇

    https问答 SSL和TLS有什么区别? 可以说,TLS是SSL的升级版本,SSL是网景公司设计的,为了最早期的网络安全而生,它的全名叫做"安全套接层".后来,IETF在1999 ...

  6. JavaScript 控制字体大小设置

    在做公司的官网的时候,新闻内页会有一个让浏览者自己调整文字大小的功能,因此在这个空闲时间,把这个功能整理下来: function setFontSize (id,content,params){ va ...

  7. SQL高性能查询优化语句（总结）

    SQL 高性能查询优化语句,一些经验总结 1.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,如:select id from t where ...

  8. 好的Ui界面地址

    http://121.40.148.178:8080/http://www.uimaker.com/http://www.uimaker.com/uimakerhtml/bshtml/124261.h ...

  9. 实用的CSS3属性和使用技巧

    CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...

  10. Oracle学习总结_day06_视图&序列&索引

    本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! day 06 视图,索引,序列 视图 什么是视图: 视 ...