面试题笔记

最新推荐文章于 2024-07-15 16:33:04 发布

驴驴。

最新推荐文章于 2024-07-15 16:33:04 发布

阅读量81

点赞数

分类专栏：笔记文章标签：面试 html5 javascript

本文链接：https://blog.csdn.net/Hfffs/article/details/120543769

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.BFC(Block formatting context)

直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.

常见的定位方案

1.普通流

*元素按照其在HTML中的先后位置至上而下进行布局
*行内元素水平排列，直至当行被占满然后换行，块级元素则会被渲染为完整的一整行
*所有元素默认都是普通流定位

2.浮动

元素首先按照普通流的位置出现，然后根据浮动的方向尽可能向左或向右偏移

3.绝对定位

元素整体会脱离普通流，因此绝对定位的元素不会对兄弟元素造成影响

4.BFC属于普通流

把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。

如何触发BFC,如何为元素添加BFC这个属性呢

1.根元素 (<html>)
2.浮动元素(元素的float值不是none)
3.绝对定位(元素的position为absolute或fixed)
4.display为inline-block、table-cell、table-caption、table、table-row、table-row-group、
table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
5.overflow值不为visible的元素

BFC特性和作用

1.可以避免外边距重叠
        html代码
        <div class="cube"></div>
    	<div class="cube"></div>
		css代码
         .cube{
            width: 100px;
            height: 100px;
            background-color: cyan;
            margin: 100px;
        }
		本应该上面div的margin-bottom和下面div的margin-top都为100px，呈现200px的外边距，但是块的上外边距和下外边距会合并为单个边距，取最大值，如果margin相等，则仅为一个，这就是外边距重叠。
### 解决办法
		把两个div包裹在两个不同container容器中，用over-hidden触发container的BFC
                .container{
                    overflow: hidden;
                }

2.清除浮动  高度塌陷
   		正常我们希望的是看到一圈红色边框包裹着一个天蓝色方块，但是父元素失去了高度支撑；因为我们添加了浮动，使得子元素脱离了文档流，所以只剩下20px边距高度，同样，我们可以通过overflow属性触发父容器的BFC，从而达到清除浮动效果。
        ### css代码：
        .parent{
            border: 10px solid red;
            
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: cyan;
            float: left;
        }	
		### html代码
        <div class="parent">
            <div class="child"></div>
        </div>
	### 解决办法 给父元素设置overflow属性触发父容器的BFC
    	 .parent{
            border: 10px solid red;
            overflow: hidden;
        }

3.阻止元素被浮动元素覆盖
		给一个元素添加浮动属性，覆盖了另一个元素；如果不要覆盖，触发被覆盖元素的BFC属性
	  ### css代码
	  .cube1{
            width: 100px;
            height:100px;
            background-color: cyan;
            float: left;
        }
        .cube2{
            width: 200px;
            height:200px;
            background-color: red;
        }
		### html代码
		 <div class="cube1"></div>
   		 <div class="cube2"></div>
		解决办法
         .cube2{
            width: 200px;
            height:200px;
            background-color: red;
            overflow: hidden;
        }

驴驴。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试题笔记

1.BFC(Block formatting context)直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.常见的定位方案1.普通流*元素按照其在HTML中的先后位置至上而下进行布局*行内元素水平排列，直至当行被占满然后换行，块级元素则会被渲染为完整的一整行*所有元素默认都是普通流定位2.浮动元素首先按照普通流的位置出现，然后根据浮动的方向.
复制链接

扫一扫