W3School-CSS 定位 (Positioning) 实例
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) 实例的更多相关文章
- CSS 定位 (Positioning) 实例
CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...
- CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...
- (七)CSS定位(Positioning)
CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...
- CSS定位(Positioning)
CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 一切皆为框 div.h1 或 ...
- CSS 定位 (Positioning)概述
div.h1 或 p 元素常常被称为块级元素. 这意味着这些元素显示为一块内容,即“块框”. 与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. ...
- CSS 定位 (Positioning)学习
最近被css的定位要搞疯了...下面我总结一下最近学习东西. 先介绍几个概念: 块框:div.h1 或 p 元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”. 行内框:与之相反,sp ...
- HTML5学习笔记（八）：CSS定位
CSS 定位 (Positioning) 属性允许你对元素进行定位. 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠.定位的基本思想很简单 ...
- java基础57 css样式、选择器和css定位（网页知识）
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一个页面 ...
- CSS定位（postion）和移动(float)
5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...
随机推荐
- PHP中的__toString方法(实现JS里的链式操作)
_toString方法是在打印对象时自动调用的魔术方法,如果不声明会报以下错 Catchable fatal error: Object of class String could not be co ...
- Android测试提升效率批处理脚本
前言: APP测试过程中,经常需要用的一些命令,如adb,每次敲命令,虽可以加深印象,但个人认为那即繁琐又浪费时间.本文贴出一些我使用的批处理,以及一点点小小技巧. 目录 1.[查看APK文件信息.b ...
- 【Debug】Web开发中，Tomcat正常启动，访问欢迎页404，怎么办？
访问页面出现404是一个会经常遇到的问题.每次开发Web项目时总要掉这个坑里几次,而且还不长记性.今天来总结一下,开发时遇到这个问题的解决思路. 1. 查看访问地址是否正确,有无拼写错误. 越是低级的 ...
- 在新浪云SAE中使用smarty引擎模版
在新浪云上使用smarty时会发现又这样的错误信息: “SAE_Fatal_error: Uncaught exception 'SmartyException' with message 'unab ...
- 自定义UIButton
偶尔逛简书能看见很多值得记下来的东西,有的接触过有的没接触过,接触过的也可能过段时间就忘记了,再上手的时候可能手足无措,所以决定有些觉得值得记下来的东西还是记录一下.博客是个好地方,因为很多人都能搜索 ...
- iOS9的几个新关键字（nonnull、nullable、null_resettable、__null_unspecified）
1.nonnull:字面意思就能知道:不能为空(用来修饰属性,或者方法的参数,方法的返回值) 代码: //三种使用方式都可以 @property (nonatomic, copy, nonnull) ...
- Visual Studio 2008 Package Load Failure:未能正确加载包“Microsoft.VisualStudio.Xaml”
在安装好Visual Studio 2008后,启动Visual Studio 2008 发现如下提示: 包加载失败 未能正确加载包“Microsoft.VisualStudio.Xaml”( GUI ...
- 【MVC拾遗】MVC的单元测试简单学习总结
关于测试的必要性什么的已经在 重构与测试 里扯过了.倒也没必要说,写的代码多了自然就明白这个东西重要性. 当时说了坐等被推动去学习单元测试来着,然而等着被人推动的结果就是根本就没人来推你.o(∩_∩) ...
- DDD心得
使用DDD分层架构有哪些好处 帮你更集中的管理业务逻辑. 帮你降低各层间,以及各业务模块间的依赖关系. 帮你更方便的进行单元测试. 我的DDD分层架构使用经验 使用充血模型,将业务逻辑尽量放到领域实体 ...
- php调用COM组件
PHP 开启COM组件 1.先到PHP.INI中打开COM选项,com.allow_dcom = true 2.我这里的环境是PHP5.4.7,PHP 5.4.5后,com/dotnet 模块已经成了 ...