html css中的定位static,float,relative,absolute,fixed
时间:2018-08-20
本文章向大家介绍html css中的定位static,float,relative,absolute,fixed,需要的朋友可以参考一下。
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.固定位置
固定定位不会在常规流中保留位置,坐标为当前视口的起点为起点
三、在正常网站布局中,各种布局都会有使用,根据自己的实际情况具体使用不同的布局。
- 关于Android PullTorefreshScrollview回到顶部实例
- 《笨办法学Python》 第2课手记
- 《笨办法学Python》 第1课手记
- 《笨办法学Python》 第40课手记
- 很经典的GDB调试命令,包括查看变量,查看内存
- 《笨办法学Python》 第39课手记
- 《笨办法学Python》 第38课手记
- 01背包及其变种(物品无限背包、恰好装满背包)
- 《笨办法学Python》 第35课手记
- github pages + Hexo + 域名绑定搭建个人博客增强版
- 责任链模式
- 《笨办法学Python》 第33课手记
- 《笨办法学Python》 第32课手记
- 《笨办法学Python》 第31课手记
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 图解一致性哈希算法,全网(小区局域网)最通俗易懂
- 「高并发通信框架Netty4 源码解读(六)」NIO通道之Socket通道
- 「高并发通信框架Netty4 源码解读(番外篇)」NIO实现大文件传输
- 「高并发通信框架Netty4 源码解读(七)」NIO通道之Selector选择器
- Python与seo工具脚本,360/搜狗相关搜索词采集源码参考
- 逐行阅读Spring5.X源码(八)Mybatis是如何利用MapperScan完成扫描的?
- KEDA|Kubernetes中基于事件驱动的自动伸缩
- 「高并发通信框架Netty4 源码解读(八)」NIO应用——聊天案例及Reactor线程模式
- 「kafka」kafka-clients,java编写生产者客户端及原理剖析
- 「kafka」kafka-clients,java编写消费者客户端及原理剖析
- Kubernetes:如何自动检测和处理弃用的API
- 逐行阅读Spring5.X源码(九)spring利用CGLIB实现动态代理原理剖析
- 逐行阅读Spring5.X源码(十)spring如何解决循环引用,bean实例化过程源码详解
- 逐行阅读Spring5.X源码(十一)AOP概念、应用、原理
- java当中的线程和操作系统的线程是什么关系?