HTML+CSS : 笔记整理(2 常规流,BFC,固定定位,z-index)
BFC和常规流的关系是什么:常规流遵循BFC,IFC规则.
定位规则总体来说三种: 常规流,浮动,绝对定位(CSS3里面新加了一种flex)
其中常规流包括BFC,IFC等规则,块级元素一个一排地从上向下堆放,行内元素从左往右地堆放,这就是一个标准的流程.
(inline-block也属于常规流,暂且把它当作inline)
而浮动和绝对定位是脱离了常规流,改从左往右排,打破次元,从二维表面升起来了,跑到原来位置的上空了。
(其实是别的元素在按照标准流布局时会忽略脱离标准流的元素,说浮起来并不准确,但是容易理解)
至于为什么有inline-block的特性应该是因为不遵循常规流了,或者说就是做了inline-block设置了?(不明白)
浮动可以理解为让某个div元素脱离文档流,漂浮在标准流之上,和标准流不是一个层次。
假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边
(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,
那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。
利用浮动的这个特性可以做一些响应式的布局,虽然它当时的作用仅仅只是文字环绕图片....
绝对定位:和浮动比起来...蒙多想去哪就去哪= =(浮动只能left或者right)
值得一提的是浮动和绝对定位会让自身触发BFC的特性(可以理解为在自身新建了一个魔法盒),
即自身包裹的元素不会受到外界的干扰,也不会干扰外界的元素.
具体可以看下下面的BFC布局规则.原本整个页面只有html有这个魔法盒,里面的元素都在这一个盒子里面,相互影响,
相互干扰,即使是嵌套元素也不例外(所以才有了margin-top合并,塌陷),所以可以利用这个特性清除浮动.
(关于清除浮动以后再谈,清除浮动可以在父元素结尾加元素或伪元素并且让他们clear:both,
也可以让父元素触发BFC特性:计算BFC的高度时,浮动元素也参与计算)
BFC布局规则
1.内部的Box会在垂直方向,一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。
即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时,浮动元素也参与计算
只要元素满足下面任一条件即可触发 BFC 特性:
1.<html> 根元素
2.浮动元素:float 除 none 以外的值
3.绝对定位元素:position (absolute、fixed)
4.display 为 inline-block、table-cells、flex
5.overflow 除了 visible 以外的值 (hidden、auto、scroll)
https://blog.csdn.net/jiaojsun/article/details/76408215
固定定位:position:fixed;
固定定位,就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。
固定定位IE6不兼容。
4、关于z-index
z-index值表示谁压着谁。数值大的压盖住数值小的。
只有定位了的元素,才能有z-index值。
也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的东西不能用。
z-index值没有单位,就是一个正整数。默认的z-index值是0。
如果都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别的元素。
定位了的元素,永远能够压住没有定位的元素。
HTML+CSS : 笔记整理(2 常规流,BFC,固定定位,z-index)的更多相关文章
- HTML+CSS : 笔记整理(1)
meta:页面描述信息(可以在里面加入作者信息等,如: <meta name="description"content="HTML examples"&g ...
- CSS学习笔记10 相对定位,绝对定位与固定定位
文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...
- HTML+CSS : 笔记整理(3 移动端布局简单了解)
流体布局:宽度用百分比,计算真实宽度用函数 : width: calc(25% - 4px); box-sizing: 1.content-box:默认计算方式 ,宽度和高度分别应用到元素的内容框.在 ...
- CSS笔记(十)position属性与定位
参考:http://www.w3school.com.cn/cssref/pr_class_position.asp position属性规定了元素的定位类型.任何元素都可定位,其中,绝对或固定元素会 ...
- 大前端学习笔记【七】关于CSS再次整理
如果你在日常工作中使用 CSS,你的主要目标可能会重点围绕着使事情“看起来正确”.如何实现这一点经常是远不如最终结果那么重要.这意味着比起正确的语法和视觉结果来说,我们更少关心 CSS 的工作原理. ...
- html+css布局整理笔记
基本概念 布局模型 流动模型(Flow) 浮动模型(Float) 层模型(Layer) 流动模型 默认的网页布局模式,流动布局模型有两个比较典型的特征: 第一,块级元素都会在所处的包含元素内自上而下按 ...
- htm5 css学习笔记整理
点击链接后退页面: <a href="javascript:history.go(-1)">回到上一个网页</a> ——修改placeholder提示的样式 ...
- CSS学习(11)常规流
盒模型:规定单个盒子的规则 视觉格式化模型(布局规则):页面中多个盒子的排列规则 三种方式: 1.常规流 2.浮动 3.定位 常规流布局 常规流 也可以叫做 文档流.普通文档流.常规文档流 所 ...
- 大前端学习笔记整理【二】CSS视觉格式化模型
1. 概念 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 ...
随机推荐
- 斗鱼扩展--localStorage备份与导出(九)
之前我们都把数据 放在了 localStorage 里,但扩展一旦卸载,数据就会被清空, 在Console里备份,一次只能输出一条,小白操作起来很不方便,所以能不能 导入,导出文件来进行备份还原呢? ...
- ADO.NET的主要对象
ADO.NET主要分为五个对象: 1)Connection对象:用来连接程序与数据库.没有利用连接对象将数据库打开,是无法从数据库中取得数据的.Close和Dispose的区别,Close之后还可以用 ...
- IntelliJ IDEA详细配置和使用教程(转)
http://blog.csdn.net/m_m254282520/article/details/78900238 关闭Intellij IDEA自动更新 在File->Settings-&g ...
- Mysql慢查询 [第一篇]
一.简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. 二.参数说明 slow_query_log 慢查询开启状态slow_q ...
- Quartz Cron表达式的二三事
最近在解决产品上的一个需求,就是定期生成报告(Report),我们叫做Scheduled Report. 原理:UI获取用户输入的时间信息,后台使用Spring框架设置定时任务,这里定时任务用的就是 ...
- [原创]Centos7 安装配置ASP.NET Core+Nginx+Supervisor
序言 此教程安装的都是最新版本的. 一键安装 有了这个神器,下面的教程就不用做了!只需运行几行代码,直接打开浏览器就可以访问! cd /home/ wget https://files.cnblogs ...
- mysql自增ID
InnoDB引擎的表,执行清空操作之后,表的auto_increment值不会受到影响:一旦重启MySQL,auto_increment值将变成1. MyISAM引擎的表,执行清空操作之后,表的aut ...
- Element-ui(el-table、el-pagination)实现表格分页
HTML代码:(重点关注el-table中:data数据的绑定) el-pagination中: layout代表组件布局,子组件名用逗号分隔 属性: total代表总条目数 事件: current- ...
- 2018年Linux运维人员必会开源运维工具体系总结
操作系统:Centos,Ubuntu,Redhat,suse,Freebsd 网站服务:nginx,apache,lighttpd,php,tomcat,resin数据库:MySQL,MariaDB, ...
- hbase的coprocessor使用(转)
http://www.360doc.com/content/13/0320/09/4675893_272623864.shtml