html中的定位体系

一、 分类

1、常规流static

2、浮动float

3、相对定位relative

4、绝对定位absolute

5、固定定位fixed

二、使用时的区分

在网页布局中,常常都会使用到这5中定位方式 ,总体分为三大类:静态static、浮动float、绝对定位(relative、absolute、fixed)。

1、默认值为static静态

2、float浮动

使用浮动布局时,需要注意2个问题

1. float会导致父元素高度塌陷

2. BFC 块格式化上下文

* BFC能解决高度塌陷问题,用clear或overflow 属性 来解决  overflow不等于hidden  那么就会创建一个BFC

clear:both 和overflow 的区别

clear 判断外部元素影响到自身布局

overflow 判断自身元素是否影响到网页布局

3、绝对定位

1.相对定位

相对定位会在常规流中保留位置,并在原本位置的相对定位实际的坐标,使用相对定位时,会对其他元素进行覆盖。

2.绝对定位

绝对定位不会在常规流中保留位置,使用时注意原点的位置(祖先元素position不等于static),若没有这样的元素,那么原点为html包含块的原点

3.固定位置

固定定位不会在常规流中保留位置,坐标为当前视口的起点为起点

三、在正常网站布局中,各种布局都会有使用,根据自己的实际情况具体使用不同的布局。

html中的定位的更多相关文章

  1. 物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)

    物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)   2015年11月14日|    by: nbboy|    Category: 系统设计, 缓存设计, 高性能系统 摘要 ...

  2. html中div定位练习

    html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定, ...

  3. jQuery ZeroClipboard中Flash定位不准确的解决方案

    转自波斯马,原文地址<jQuery ZeroClipboard中Flash定位不准确的解决方案> jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板,IE.Fire ...

  4. css中的定位

    上一篇博客,我大概介绍了下浮动的使用及行为.其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当. 一.定位分类: a.静态定位  position:static;   ...

  5. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  6. 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  7. MySQL 5.6中如何定位DDL被阻塞的问题

    在上一篇文章<MySQL 5.7中如何定位DDL被阻塞的问题>中,对于DDL被阻塞问题的定位,我们主要是基于MySQL 5.7新引入的performance_schema.metadata ...

  8. MySQL 5.7中如何定位DDL被阻塞的问题

    在上篇文章<MySQL表结构变更,不可不知的Metadata Lock>中,我们介绍了MDL引入的背景,及基本概念,从“道”的层面知道了什么是MDL.下面就从“术”的层面看看如何定位MDL ...

  9. 【基础】selenium中元素定位的常用方法(三)

    一.Selenium中元素定位共有八种 id name className tagName linkText partialLinkText xpath cssSelector 其中前六种都比较简单, ...

  10. oracle 中如何定位重要(消耗资源多)的SQL

    链接:http://www.xifenfei.com/699.html 标题:oracle 中如何定位重要(消耗资源多)的SQL 作者:惜分飞©版权所有[文章允许转载,但必须以链接方式注明源地址,否则 ...

随机推荐

  1. 微信小程序现实问题之低素质客户需求问题

    ·微信小程序已经在市场摸爬滚打很久了,但是真正是否可用以及是否真正满足客户需求,市场是否真正到了火热的程度,值得怀疑. 根据本人从事小程序开发的经验,短时间内,小程序市场依然会不温不火,而此时客户的满 ...

  2. Dapper 批量操作sql

    static void Main(string[] args) { private static readonly string sqlconnection =""; //遍历循环 ...

  3. centos 开机执行的命令

    centos开机执行的命令-------待验证,因为有可能涉及到root问题,没想明白怎么输入密码 1.增加rc.local可执行权限 chmod +x /etc/rc.d/rc.local 2.在里 ...

  4. Web API 2 入门——Web API 2(C#)入门(谷歌翻译)

    ASP.NET Web API 2(C#)入门 在这篇文章中 本教程中使用的软件版本 创建一个Web API项目 添加模型 添加控制器 使用Javascript和jQuery调用Web API 运行应 ...

  5. Docker Toolbox在window 10 home 下挂载宿主机目录到容器的正确操作

    由于我是window 10 home 而不是 pro版本,只能使用Docker Toolbox,其实docker for window对windows的支持更好,还有GUI,home版本安装Docke ...

  6. python数据处理——numpy

    标准安装的Python中用列表(list)保存一组值,可以用来当作数组使用,不过由于列表的元素可以是任何对象,因此列表中所保存的是对象的指针.这样为了保存一个简单的[1,2,3],需要有3个指针和三个 ...

  7. Shodan搜索引擎介绍

    from:http://www.exploit-db.com/wp-content/themes/exploit/docs/33859.pdf 0x00 概要 这篇文章可以作为渗透测试人员和安全工作者 ...

  8. StringUtils工具类介绍

    1 abbreviate方法缩写一段文字 StringUtils.abbreviate("abcdefghijklmno", -1, 10) = "abcdefg...& ...

  9. 【转】Android开发:shape和selector和layer-list的(详细说明)

    <shape>和<selector>在Android UI设计中经常用到.比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到<shape> ...

  10. 快速理解Event事件

    浏览器事件是所有web程序的核心.javascript与HTML之间的交互是通过事件实现的.通过这些事件我们定义将要发生的行为.事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信. 1. ...