美文网首页
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边距合并

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