html进阶css(5)
css定位机制
css有三种基本的定位机制：普通流，浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在html中的位置决定。
块级框从上到下一个接一个的排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使水平内边距，边框和外边距调整它们的间距。但是，垂直内边距。边框和外边框不影响行内框的高度。由一行形成的水平框称为行框。行框的高度总是足以容纳它包含的所有行内框。不过设置行高可以增加这个框的高度。
css绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对 定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
绝对定位的元素位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，（祖元素必须包裹在绝对定位元素的外部，不一定需要最近的也可以是远处的。）那么它的位置相对于最初的包含块（html）。
对于定位的主要问题是要记住每种定位的意义。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style type="text/css">
.pos_abs{
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2 class="pos_abs">带有决对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面标题距离页面左侧100px，距离页面顶部150px。</p>
</body>
</html>
css相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它的起点进行移动。
如果top设置为20px，那么框将在原位置顶部下面20像素的地方。如果left设置为30像素，那么会在元素左边创建30像素的空间，也就是将元素向右移动。但它原来所处的地方也将被保留对于配合绝对定位来讲这是一对好的搭档。
css固定定位
固定定位也属于绝对对定位的一种，使用起来非常简单。但测量需要花时间练习的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style type="text/css">
.one{
position:fixed;
left:25px;
top:30px;
}
.two{
position:fixed;
top:30px;
right:80px;
}
</style>
</head>
<body>
<p class="one">一个段落</p>
<P class="two">两个段落</p>
</body>
</html>
html进阶css(5)的更多相关文章
- html进阶css（４）
盒子模型-边框 首先请看下图 <!doctype html> <html> <head> <meta charset="utf-8"> ...
- html进阶css（3）
css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许格式不仅应用于某个特定html标签元素,而且应用于其后代. <!doctype html> <html> ...
- html进阶css（2）
选择器的类型 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...
- html进阶css（1）
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- HTML5总结整理
(仅供大家学习分享交流) 一.简介 1.前端开发最核心技术 我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最 主要由3部分组成:结构.表现和行为.网页现在新的标准 ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 【CSS进阶】试试酷炫的 3D 视角
写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
随机推荐
- (转)js正则表达式之中文验证
今天做表单提交的输入框条件验证,验证是否包含中文:网上搜了一圈基于js正则表达式的验证基本不好用,而且大多都是出自一两篇原文的转帖!到底什么才是拿来主义呢.根据搜索结果,本文取精华,告诉大家一个好用的 ...
- Android与JS混编（js调用android相机扫描二维码）
参考demo http://www.cnblogs.com/mythou/p/3280023.html 项目源码: https://github.com/weifengzz/Androi ...
- C++中cin输入类型不匹配解决方法
#include <iostream> #include <set> using namespace std; int main() { int a; cin>>a ...
- 03--理解HelloWorld结构
作为程序猿还是要代码来说事的,现在开始进入到具体的代码中来.国际惯例HelloWorld打头阵,我也不能免这个俗. Win32入口函数中主要代码如下: main.cpp // 创建应用实例 AppDe ...
- 史上最全前端面试题(含答案) - Web开发面试题
HTML+CSS 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用 ...
- Java学习笔记--泛型
一个泛型类就是具有一个或者多个类型变量的类. 我们可以只关注泛型,而不会为数据存储的细节而烦恼 . java泛型(一).泛型的基本介绍和使用 http://blog.csdn.net/lonelyro ...
- hasOwnProperty方法的使用
JavaScript中hasOwnProperty函数方法是返回一个布尔值,指出一个对象是否具有指定名称的属性. 使用方法: object.hasOwnProperty(proName)其中参数obj ...
- php跨服务器传递对象
最近因为研究跨域名,跨服务器的问题,所以无聊,就想到了一个跨服务器传递对象的问题. 想要跨服务器传递数据,那么就要使用到get或者post提交. 我这里的方法有点复杂,但是因为平时工作时,有封装相应的 ...
- QThread居然有一个setEventDispatcher函数
http://doc.qt.io/qt-5/qthread.html#setEventDispatcher 难道QtService里不能执行tr函数,是需要手动安装事件发送器?
- bitmap 内存溢出OOM的解决办法分享
昨天遇到这个问题就是从一个输入流里调用BitmapFactory.decodeStream(this.getContentResolver().openInputStream(uri))得到一个bit ...