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. （十）WebGIS中地理坐标与屏幕坐标间的转换原理

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 地图本身是拥有坐标的,一般可以大致分为平面坐标和经纬度坐标, ...

  2. 【JUC】JUC线程池框架综述

    一.前言 在分析完了JUC的锁和集合框架后,下面进入JUC线程池框架的分析,下面给出JUC线程池的总体框架,之后再逐一进行分析. 二.JUC线程池框架图 说明:从上图可知,JUC线程池框架中的其他接口 ...

  3. mousewheel事件的兼容方法

    在垂直方向上滚动页面时,会触发mousewheel事件,这个事件会在任何元素上触发,最终都会冒泡到document(IE8)或window(IE9+及其他主流现代浏览器)对象. 在给元素指定mouse ...

  4. UWP开发入门（二十二）——Storyboard和Animation

    微博上有同学问我MyerSplash是如何实现那个很炫的图片点亮,然后移动到屏幕中央的效果.惭愧啊,我又不是作者哪里会知道.硬着头皮去GitHub拜读了高手的代码,自愧弗如,比我不知道高到哪里去了…… ...

  5. [WCF编程]13.并发：服务并发模式

    一.概述 传入的客户端调用消息会分发给Windows I/O线程池(线程默认为1000)上的服务实例.多个客户端可以发起多个并发的调用,并且服务可以在多个线程上处理这些请求.如果传入的调用分发给同一个 ...

  6. table中设置border的问题

    今天在修改table样式的时,想给tr加个border-bottom,一开始用的颜色比较浅,我还以为看电脑太久眼花,结果换了比较深的颜色后,border-bottom真的没有出来.   忽然想起在ht ...

  7. 数据结构：链表（python版） 续：增加比较函数

    题目: 基于元素相等操作"=="定义一个单链表的相等比较函数.另请基于字典序的概念,为链表定义大于,小于,大于等于,小于等于的判断 class LList: "" ...

  8. 第 31 章 项目实战-PC端固定布局[1]

    学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现 ...

  9. Thinking in Java——笔记(19)

    Enumerated Types Basic enum features When you create an enum, an associated class is produced for yo ...

  10. html 输入框 只能输入数字 只能输入字母数字组合

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...