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. Spinner控件

    首先在XML文件中声明一个Spinner控件: <Spinner android:id="@+id/spinnerId" android:layout_width=" ...

  2. 【JUC】JDK1.8源码分析之CyclicBarrier（四）

    一.前言 有了前面分析的基础,现在,接着分析CyclicBarrier源码,CyclicBarrier类在进行多线程编程时使用很多,比如,你希望创建一组任务,它们并行执行工作,然后在进行下一个步骤之前 ...

  3. linux全方位掌握一个命令--思路比方法更重要

    Linux命令众多,当不清楚一个命令的使用方法时,我们该怎样了解命令的属性和帮助?     1.用type命令了解一个命令的属性 [root@zejin240 testdir]# type cd cd ...

  4. 初入网络系列笔记（2）TCP和UDP

    一.借鉴说明,本博文借鉴以下博文 1.BlueTzar,TCP/IP四层模型, http://www.cnblogs.com/BlueTzar/articles/811160.html 2.叶剑峰,漫 ...

  5. repeater三级嵌套绑定

    <asp:Repeater ID="rpt1" runat="server" onitemdatabound="rpt1_ItemDataBou ...

  6. thinkphp验证码

    thinkphp自带验证码 前端页面: <div style="position:absolute;z-index:3;top:160px;left:180px;"> ...

  7. C程序范例（2）——学生管理系统”链表“实现

    1.对于学生管理系统,能够实现的方法有许多,但是今天我们用链表的方法来实现.虽然初学者很可能看不懂,但是不要紧,这是要在整体的系统的学习完C语言之后,我才编写出的程序.所以大家不必要担心.在这里与大家 ...

  8. Server Tomcat v7.0 Server at localhost was unable to&amp;nbs 报错问题解决

    在eclipse启动tomcat时遇到超时45秒的问题: Server Tomcat v7.0 Server at localhost was unable to start within 45 se ...

  9. java多线程-锁

    自 Java 5 开始,java.util.concurrent.locks 包中包含了一些锁的实现,因此你不用去实现自己的锁了.但是你仍然需要去了解怎样使用这些锁. 一个简单的锁 让我们从 java ...

  10. 网站banner无缝轮播

    网站banner无缝轮播 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...