Menu

转移定位BFC边距合并,html中的定位



html中的定位系统

1, 浮动成分有哪些特点?对父容器、其余浮动元素、普通成分、文字分别有如何影响?

 a,脱离文档流不占据文档流中的空间,因此浮动元素后面的文档流中的元素会占据浮动元素的位置
 b,多个浮动元素并行排列占据一行
 c,文本遇到浮动元素边框会另起一行排列,表现成围绕浮动元素。
 d,如果有其它元素有清除浮动,同一层的浮动元素则会另起一行放置

一、 分类

二,清除浮动指什么? 怎样破除浮动? 二种以上办法

解除浮动:借使某些成分因为周边的变通成分发生了震慑,清除浮动能够使该成分换成下壹行,清除浮动就排除那种影响

  1. clear:both right left
    二)使用父容器变成BFC

1、常规流static

3,有二种固定方式,分别是何等兑现稳固的,参考场是何许,使用意况是何许?

1)三种固定格局

a,inherit:从父成分承继position属性的值
b,static:静态文书档案流,暗中同意布局情势
c,raletive:相对固定,相对于成分原来的职位固定,原来的地方保留在原来的地方不动。一般用于微调度成分本人地方
d,absolute:相对定位,脱离符合规律文书档案流,相对于除了static的先世成分进行固化,假使未有,则相对于html定位。其它,如果父容器设置了padding则left,right,top,bottom那个属性的值是暗许的padding的值,auto。一般用于选拔相对地方的现象,在父元素上加个relative,在给子成分设定absolute进行相对偏移。
e,fixed:固定定位,相对于浏览器窗口定位。一般用来广告、一些定位提醒栏等你想要固定持续显示的始末
f,sticky:新属性,表现为position:relative和position:fixed合体的性情

2、浮动float

四.z-index 有啥样效力? 如何使用?

设置成分层叠顺序,值越高,则先行展现在上头

三、相对固化relative

5,position:relative和负margin都得以使成分地点爆发偏移?2者有哪些区别

有别于:relative只是把成分移开,该因素的坑还在原来静态文书档案流中的地方,不会潜移默化文书档案流中别的因素的布局,
负margin把成分移开,该因素移开之前的职责不会保留,会影响文书档案流中任何因素的布局。

四、相对定位absolute

陆,BFC 是怎么?怎么着生成 BFC?BFC 有哪些服从?例如表达

壹)BFC是“Box Formating
Context”指得是“块级格式化上下文”,它是一个单身的块级渲染区域,那个区域有所和煦的条条框框来约束块级盒子的布局,并且那种布局与区域外部非亲非故

a. 浮动,float的值不为none
b. position的值为absolute、fixed、flex
c. overflow 的性质值不为 visible
d. display的值为inline-block、table-cell、table-caption

a,防止外边距合并
b,幸免平常文书档案流八月素占领浮动成分的职责
c,消除文字围绕调换成分
d,消除浮动成分变成的万丈塌陷

五、固定定位fixed

七,在哪些景况下会油不过生外边距合并?怎么着联合?怎样不让相邻成非凡边距合并?给个父亲和儿子外边距合并的模范

一)只有在平时文书档案流中会出现外边距合并,脱离了文书档案流的不汇合世外边距合并

a,正数的情景下合并外边距最大的数
b,负数的气象下合并相对值最大的数
c,一正一负的图景下两数带符号相加

a,分歧BFC的要素不会外边距合并
b,假如是父亲和儿子关系,父成分设置了padding或边框也足以阻碍老爹和儿子外边距合并

图片 1

图片.png

贰、使用时的区分

代码

1,代码和功能

2,代码和作用

3,代码和功能

4,代码和功能

在网页布局中,平时都会动用到那5中定位方式,总体分为3大类:静态static、浮动float、相对定位(relative、absolute、fixed)。

1、默许值为static静态

2、float浮动

应用浮动布局时,供给留意一个难题

  1. float会导致父元素中度塌陷

  2. BFC 块格式化上下文

* BFC能消除中度塌陷难点,用clear或overflow 属性 来缓慢解决 
overflow不等于hidden  那么就能够创建2个BFC

clear:both 和overflow 的区别

clear 判别表面因素影响到自己布局

overflow 判别本人因素是不是影响到网页布局

3、相对定位

壹.针锋相对固化

争持固化会在常规流中保存地点,并在原本地点的相对牢固实际的坐标,使用相对牢固期,会对此外因素进行覆盖。

贰.绝对定位

纯属定位不会在常规流中保存地点,使用时只顾原点的职责(祖先成分position不等于static),若没有这么的要素,那么原点为html包括块的原点

3.稳固位置

恒定定位不会在常规流中保存地方,坐标为当前视口的起源为源点

叁、在平常网址布局中,种种布局都会有利用,依据自身的实际上情形具体接纳差别的布局。

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图