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. 微信小程序——代码构成

    通过上一章讲解,我们了解到如何初始化一个小程序项目,这里是官方给到demo地址,通过demo来看教程更方便于我们理解项目架构. 由四种文件构成: .json 后缀的 JSON 配置文件 .wxml 后 ...

  2. css best practice for big team and project

    推荐查看以下文章: https://segmentfault.com/a/1190000000704006 关于BEM,SMACSS,OOCSS的通俗易懂的介绍 http://philipwalton ...

  3. 面对IBM与亚马逊的犄角攻势,微软云如何招架?

    亚马逊AWS和微软Azure是全球公有云的焦点.不就前公布的财报不久前公布的财报,这两家公司云计算的收入越来越接近,从数据显示来看,亚马逊的利润比微软稍高,有人称微软云的高增长来自于捆绑销售,背后真正 ...

  4. 路由协议RIP、EIGRP、OSPF

    前提 在网络拓扑中,我们经常多个路由连接不同子网,路由之间要转发不同子网的包,前提是路由之间要知道对方路由的存在. 因此这次我要写的是有关维护路由之间存在的协议,RIP.EIGRP和OSPF,静态路由 ...

  5. yii2.0数据库查询修改等方法

    yii2.0学习有一段时间了,给大家分享一下一些简单的查询等如何操作. 查询:(这里最前面的Test是引用的模型名) Test::find()->all();    此方法返回所有数据: Tes ...

  6. ZT ANDROID jni 中的事件回调机制JNIenv的使用 2012-09-10 12:53:01

    ANDROID jni 中的事件回调机制JNIenv的使用 2012-09-10 12:53:01 分类: 嵌入式 android framework 里java调用native,使用JNI机制,ja ...

  7. 如何在SAP里创建configurable material物料主数据

    (1) 使用tcode CT04创建characteristic: assign 所有可能的color value: (2) 使用tcode CL02创建class. 类型选择300- variant ...

  8. U-Mail邮件群发:邮件营销最全建议

    U-Mail专注于邮件营销平台研发工作多年了,服务企业数千家,拥有上万IP,在国内外基础设施建设上投资巨大,技术团队精湛.客服人员热情,赢 得了业界的好评和用户信任.有一些用户给我们发来邮件或来电咨询 ...

  9. OC 指向指针的指针

    #import <Foundation/Foundation.h> void changeC(char *d) { *d = ; } void changeStr(NSString **s ...

  10. JAVA二叉树递归构造、二叉树普通遍历及递归遍历

    二叉树类: package com.antis.tree; public class BinaryTree { int data; //根节点数据 BinaryTree left; //左子树 Bin ...