美文网首页
CSS浮动定位BFC边距合并

CSS浮动定位BFC边距合并

作者: 虚玩玩TT | 来源:发表于2017-04-12 16:23 被阅读0次

浮动元素有什么特征?对父容器,其他浮动元素,普通元素,文字分别有什么影响?

浮动的框可以随float的属性值左右移动,直到他的外边缘碰到包含框或另一个浮动框的外边缘。
浮动元素不在文档的普通流中。

如果父容器高度是随内容而改变的,设置内部一个元素为float后,父容器高度变小。并且可以和普通元素占同一个位置,并且遮蔽。但是普通元素中的文字不会被遮蔽,会围绕在浮动元素周围。

清除浮动指什么?如何清除浮动?

如果父容器中的所有子元素变为浮动元素,父容器的高度会为0,要让父容器在视觉上包围浮动元素,就要用到清除浮动。如果父容器的高度不为0,清除浮动后,无效果。

在父容器中加入一个空的块级元素子标签,并设置其样式clear=both/left/right/none,可以达到清除浮动。

在CSS中写入
.clearfix:after {
content:" ";
dispaly: block/table;
clear: both/left;
}
也可以清除浮动。

有几种定位方式?分别是怎样实现的?参考点是什么?使用场景是什么?

普通流,默认定位方式,一般不用设置。元素框的位置由元素在html中的位置决定,如果设置元素的position值为static或继承了static,就会按照普通流定位。

相对定位,实现:"position: relative; top: ; left: ;" 。相对于原位置的位移。元素在文档流中占据原来的空间,只是表现出位移。

绝对定位,实现:"position: absolute; top: ;left: ; right: ;bottom: ;"相对于其上级元素中有属性为非static元素的位置,如果没有,就相对于初始块html元素定位。

z-index有什么作用?如何使用?

控制叠放顺序。
用于定位元素,z-index:数值;,如position:absolute;z-index:-1;表示在下一层。

position:relative和负margin都可以使元素发生偏移,二者有什么区别?

position:relative相对定位,还是占据原来的空间,只是表现出位移,其父容器不变。
负margin是改变外边距,其父容器大小会改变。

BFC是什么?如何生成BFC?BFC有什么作用?举例说明。

BFC,Block Format Content,块级格式化上下文。

生成BFC的方法

  • float:left/right
  • position:absolute/fixed
  • display: inline-block/table-cell/table-caption
  • overflow: auto/hidden/scroll

BFC会合并两个相邻或嵌套的元素的垂直外边距。设置不同的BFC就不会合并。

10-1.png

BFC会使浮动元素对普通流元素不遮挡。

10-2.png

BFC可以包含浮动,可以利用这个清除浮动。

10-3.png

在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?举个父子外边距合并的例子。

改:
(同一个BFC下的两个相邻元素在垂直方向上会出现边距合并。
外边距合并,选其中数值大的为两个元素的外边距,若数值相等,取其中一个。对于负margin,负号只是表示方向。
让其中一个生成BFC就可以消除外边距合并)

原:
(两个相邻的有着相同BFC的元素会出现外边距合并。
外边距合并为二者中数值大的。
给其中一个设置BFC。)

10-4.png 10-5.png

代码

实现1:效果代码
实现2:效果代码
实现3:效果代码
实现4:效果代码

相关文章

  • CSS浮动、定位BFC边距合并

    1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素脱离普通文档流,浮动元素...

  • css浮动定位BFC边距合并

    1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素特征: 浮动元素会脱离正常...

  • CSS浮动,定位,BFC边距合并

    问答 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素脱离文档流,普通流中的块...

  • CSS浮动定位BFC边距合并

    浮动元素有什么特征?对父容器,其他浮动元素,普通元素,文字分别有什么影响? 浮动的框可以随float的属性值左右移...

  • CSS-浮动定位BFC边距合并

    1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征 浮动的框可以左右移动(根据f...

  • CSS浮动定位和BFC边距合并

    一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...

  • 浮动定位BFC边距合并

    1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型也是一种可视化模型,浮动的...

  • 浮动定位BFC边距合并

    1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素会脱离普通文档流,直到碰到...

  • 浮动定位BFC边距合并

    浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素也是一种可视化格式模型,浮动的...

  • 浮动定位BFC边距合并

    1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素的特征:首先脱离文档正常流...

网友评论

      本文标题:CSS浮动定位BFC边距合并

      本文链接:https://www.haomeiwen.com/subject/mcksattx.html