文档流相关

栏目: Html · 发布时间: 4年前

内容简介:标准文档流,元素默认会从左至右,上至下,块级元素独占一行,行内元素共享一行预留空间,出现在正常文档流,(忽略 top, bottom, left, right 或者 z-index 声明)预留空间,相对于之前的位置移动

文档流

标准文档流,元素默认会从左至右,上至下,块级元素独占一行,行内元素共享一行

position

  • static

预留空间,出现在正常文档流,(忽略 top, bottom, left, right 或者 z-index 声明)

  • relative

预留空间,相对于之前的位置移动

  • absoute

没有预留空间,相对于非static的位置移动,如果没有,就一路到根元素

  • fixed

没有预留空间,相对于屏幕视口的位置移动

  • sticky(兼容不好)

相对于第一个有滚动的父级块元素的位置移动,就是正常像relative,滚动时像fixed

z-index

层叠顺序,整数越大,越被层叠在上面,父子关系的话,一定是父在上子在下,同节点如果不按顺序来的话,就应该去查看其父元素,俗称“拼爹”

clear Float

如果子元素用了float,如果不清除浮动,父元素无法撑开子元素

clear: both
overflow: auto
.clearfix:after{
  content: '';
  display: block;
  clear: both;

BFC

直译为"块级格式化上下文",与外部区域毫不相关,是一个容器,用来管理块级元素

创建BFC

  • float为left|right
  • overflow为 hidden|auto|scroll
  • display为 table-cell|table-caption|inline-block|inline-flex|flex
  • position为 absolute|fixed
  • 根元素

BFC特性

特性1: BFC阻止margin重叠

属于同一个BFC时,margin会重叠,只要他们之间没有阻挡(比如边框、非空内容、padding等)就会发生margin重叠

  • 兄弟元素margin重叠,解决方案是,中间加个BFC
  • 子元素margin父元素不撑开,解决方案是,父元素BFC

特性2:BFC不会重叠浮动元素

就是把浮动元素和其他元素分开,行成自适应两拦布局

特性3:BFC可以包含浮动

子元素浮动,就脱离了文档流,父元素高度坍塌,解决方案是,把父元素变成一个BFC


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Swift语言实战入门

Swift语言实战入门

伍星、罗飞、刘志华、王浩力、刘蕾 / 人民邮电出版社 / 2014-10-23 / 79

《Swift语言实战入门》以Swift语言的基础知识和实战技巧为主要内容,佐以大量的实例和图片进行讲解。全书内容分为三大部分,共11章节。第一大部分讲述Swift语言的基础知识和语法,第二大部分讲解开发框架和库的相关内容,第三大部分集中讲解以2048游戏为例的实战演练,从入门到实战层层递进。本书注重实战,秉承着学以致用的原则,让读者真正看后能够实际操作。120个代码清单全部共享,配套教学视频在线收......一起来看看 《Swift语言实战入门》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

MD5 加密
MD5 加密

MD5 加密工具