hmtl 中的定位
1.绝对定位:
position:sbsolute;
作用:将元素从文档流中拖出来,然后使用 left,right,top,bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
若不存在这样的包含块,则相对于Body元素,即相对于浏览器窗口。
2.相对定位:
position:relative;
作用:通过 left,right,top,bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程,是首先按(static)方式生成一个
元素。并且元素层一样浮动起来,然后相对于以前的位置移动,偏移的方向和幅度由left,right,top,bottom属性确定,偏移前的
位置保留不变。
3.相对定位与绝对定位的组合使用:
参照定位元素必需是相对定位元素的前辈元素。参照定位的元素必需加入position:relative。定位元素加入 position:sbsolute,可以
用top,bottom,left,right进行定位。
HTML文档流解释:
HTML元素可分为两大类;内联元素和块级元素.二者在显示方式上是不同的. 内联是在水平方向上一个拦一个元素排列的,元素前后不产生换行,元素间的水平间距可以通过水平方向上的填充,边框和间距来控制,觉的strong,span等就属于内联元素,需要注意的是,竖直方向上的填充,边框和间距对控制内联元素的高度是不起作用的,水平方向的一行将构成一个所谓的line box,这是一个逻辑上的概念,line box是一个虚拟的矩形区域,包含了组成这行的所有内联元素,其高度本行内所有内联元素内容完全显示出来,尽管浏览器自动计算内联元素高度,我们还是可以通过设置line-height属性的值来改变元素的高度. 块级元素是在竖址方向上一个接一排列的,元素前后均产生换行,竖直方向上元素之间的距离可以用上下边距来控制,注意竖直方向的边距会产生重叠,其间距值取相邻元素中边距较大的那一个,常见p,div等都是块级元素,这些元素的内容都 是以块的形式显示在浏览器中, 内联元素和块级元素各自遵循着不同的显示方式,这就构成了html的文档, 文流档的内容被比喻为流,文档中的元素可以随波流,也可以脱离流,漂浮在其上,如果你没有为元素设定附加css属性,那么元素将按照它在html代码中出现的顺序一个挨着一地排列.hmtl 中的定位的更多相关文章
- 物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)
物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载) 2015年11月14日| by: nbboy| Category: 系统设计, 缓存设计, 高性能系统 摘要 ...
- html中div定位练习
html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定, ...
- jQuery ZeroClipboard中Flash定位不准确的解决方案
转自波斯马,原文地址<jQuery ZeroClipboard中Flash定位不准确的解决方案> jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板,IE.Fire ...
- css中的定位
上一篇博客,我大概介绍了下浮动的使用及行为.其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当. 一.定位分类: a.静态定位 position:static; ...
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
- 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)
关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html 前言:最近在 ...
- MySQL 5.6中如何定位DDL被阻塞的问题
在上一篇文章<MySQL 5.7中如何定位DDL被阻塞的问题>中,对于DDL被阻塞问题的定位,我们主要是基于MySQL 5.7新引入的performance_schema.metadata ...
- MySQL 5.7中如何定位DDL被阻塞的问题
在上篇文章<MySQL表结构变更,不可不知的Metadata Lock>中,我们介绍了MDL引入的背景,及基本概念,从“道”的层面知道了什么是MDL.下面就从“术”的层面看看如何定位MDL ...
- 【基础】selenium中元素定位的常用方法(三)
一.Selenium中元素定位共有八种 id name className tagName linkText partialLinkText xpath cssSelector 其中前六种都比较简单, ...
随机推荐
- HDU-4534 郑厂长系列故事——新闻净化 AC自动机+DP
题意:给定一些单词,这些单词必须要是一个目标串的子串,同时给定一些串,这些串不能够出现在目标串中,其余一些串只会带来不同附加值.现在问满足前两者的情况下,要求附加值最大.数据给定一个原始串,现在要求在 ...
- HTML5/CSS3hack
以下兼容技术我只测试了IE8+ Media Query 媒体查询 <script src="respond.min.js"></script> respon ...
- python的ujson与simplejson
一.使用了simplejson import simplejson as json 二.使用ujson import ujson as json 参考链接:下载win下的:ujson
- Window 常用文件
*.msm ntwdblib.dll是一款用于PHP连接MSSQL2005或2008的驱动文件,如果连接BDE的时候出现“cannot load an idapi service liabray fi ...
- MFC编程入门之十六(对话框:消息对话框)
前面几节讲了属性页对话框,我们可以根据所讲内容方便的建立自己的属性页对话框.本节讲解Windows系统中最常用最简单的一类对话框--消息对话框. 我们在使用Windows系统的过程中经常会见到消息对话 ...
- sentence patterns
第四部分 推理题 1.世界上每个角落的每个人都有立场,都有背景,都有推理性,能推理出一个人语言的真意,才成就了真正的推理能力: 2.换言之,如果你能通过一个人的说话推理出其身份职业,你的推理能 ...
- css做三角形
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- ThreadLocal工作原理
原文出处: imzoer 在这篇文章中,总结了一下面试过程中遇到的关于ThreadLocal的内容.总体上说,这样回答,面试算是过得去了.但是,这样的回答,明显仅仅是背会了答案,而没有去研究Threa ...
- python中列表的常用方法
s=[1,2,3] s[3]=12#列表长度小于3时无法给列表赋值 len(s)#列表长 s+s s*5#l列表重复5次 5 in s#判断元素是否在列表中,返回true or false max(s ...
- LINQ to Entities 不支持 LINQ 表达式节点类型“Invoke”(笔记)
今天使用使用动态查询的时候出现出现错误“LINQ to Entities 不支持 LINQ 表达式节点类型‘Invoke’.”,代码如下: IQueryable<CUSTOMER> que ...