html中的定位
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中的定位的更多相关文章
- 物联网应用中实时定位与轨迹回放的解决方案 – 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 其中前六种都比较简单, ...
- oracle 中如何定位重要(消耗资源多)的SQL
链接:http://www.xifenfei.com/699.html 标题:oracle 中如何定位重要(消耗资源多)的SQL 作者:惜分飞©版权所有[文章允许转载,但必须以链接方式注明源地址,否则 ...
随机推荐
- 微信小程序——代码构成
通过上一章讲解,我们了解到如何初始化一个小程序项目,这里是官方给到demo地址,通过demo来看教程更方便于我们理解项目架构. 由四种文件构成: .json 后缀的 JSON 配置文件 .wxml 后 ...
- css best practice for big team and project
推荐查看以下文章: https://segmentfault.com/a/1190000000704006 关于BEM,SMACSS,OOCSS的通俗易懂的介绍 http://philipwalton ...
- 面对IBM与亚马逊的犄角攻势,微软云如何招架?
亚马逊AWS和微软Azure是全球公有云的焦点.不就前公布的财报不久前公布的财报,这两家公司云计算的收入越来越接近,从数据显示来看,亚马逊的利润比微软稍高,有人称微软云的高增长来自于捆绑销售,背后真正 ...
- 路由协议RIP、EIGRP、OSPF
前提 在网络拓扑中,我们经常多个路由连接不同子网,路由之间要转发不同子网的包,前提是路由之间要知道对方路由的存在. 因此这次我要写的是有关维护路由之间存在的协议,RIP.EIGRP和OSPF,静态路由 ...
- yii2.0数据库查询修改等方法
yii2.0学习有一段时间了,给大家分享一下一些简单的查询等如何操作. 查询:(这里最前面的Test是引用的模型名) Test::find()->all(); 此方法返回所有数据: Tes ...
- 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 ...
- 如何在SAP里创建configurable material物料主数据
(1) 使用tcode CT04创建characteristic: assign 所有可能的color value: (2) 使用tcode CL02创建class. 类型选择300- variant ...
- U-Mail邮件群发:邮件营销最全建议
U-Mail专注于邮件营销平台研发工作多年了,服务企业数千家,拥有上万IP,在国内外基础设施建设上投资巨大,技术团队精湛.客服人员热情,赢 得了业界的好评和用户信任.有一些用户给我们发来邮件或来电咨询 ...
- OC 指向指针的指针
#import <Foundation/Foundation.h> void changeC(char *d) { *d = ; } void changeStr(NSString **s ...
- JAVA二叉树递归构造、二叉树普通遍历及递归遍历
二叉树类: package com.antis.tree; public class BinaryTree { int data; //根节点数据 BinaryTree left; //左子树 Bin ...