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. svn 几个常用命令（持续更新）

    1:获取某个版本号(3583)下的代码                                               svn co http://tech.yoai.com:8300/c ...

  2. Tomcat创建HTTPS访问，java访问https

    一 https和ssL HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的 ...

  3. MongoDB初学

    参考:MongoDB 教程 | 菜鸟教程 安装 1.下载安装,从官网下载winows安装包,安装到d盘(注意路径) 2.由于我安装在d盘,所以在d盘创建文件夹data,里面创建db文件夹 3.启动方法 ...

  4. SQL Server基础之存储过程

      简单来说,存储过程就是一条或者多条sql语句的集合,可视为批处理文件,但是其作用不仅限于批处理.本篇主要介绍变量的使用,存储过程和存储函数的创建,调用,查看,修改以及删除操作. 一:存储过程概述 ...

  5. jQuery-1.9.1源码分析系列（十二） 筛选操作

    在前面分析的时候也分析了部分筛选操作(详见),我们接着分析,把主要的几个分析一下. jQuery.fn.find( selector ) find接受一个参数表达式selector:选择器(字符串). ...

  6. 分享在winform下实现左右布局多窗口界面-续篇

    之前的这篇文章<分享在winform下实现左右布局多窗口界面>已经实现了左右布局多窗口界面,今天本来是研究基于winform的插件编程,没想到顺便又找到了另一种实现方案,这种实现方案更简单 ...

  7. WPF语音播放MediaPlayer

    private MediaPlayer player; public MainWindow() { InitializeComponent(); player = new MediaPlayer(); ...

  8. 【Win10开发】关于AutoSuggestBox

    其实看名字我们就知道,这个控件可以提供一些建议文本.我们在做搜索框时可以做一些文本来让用户选择. 这个控件有两个关键的事件QuerySubmitted和SuggestionChosen事件,当下拉列表 ...

  9. E - The Values You Can Make

    E - The Values You Can Make Description Pari wants to buy an expensive chocolate from Arya. She has ...

  10. c中使用gets() 提示warning: this program uses gets(), which is unsafe.

    今天在C代码中使用gets()时提示“warning: this program uses gets(), which is unsafe.”,然后这个程序还能运行,无聊的我开始查阅资料,为啥gets ...