<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
1.盒子模型
盒子模型的特殊情况取值
1）兄弟关系元素之间的外边距
垂直排列的兄弟
给上面的盒子添加下外边距（margin-bottom）：30px
给下面的盒子添加上外边距（margin-top):50px
问题：他们之间的距离====是以最大值为主的
考察的点：默认会有边距重合
如果想要实现一个具体的数值的话，建议兄弟元素==只添加一个方向的外边距即可
横向排列的兄弟
给左侧的盒子添加右外边距（margin-right）：30px
给右侧的盒子添加左外边距（margin-left）：50px
问题：两个盒子之间的距离====距离相加
使用了浮动====直接触发了BFC，形成了独立的区域，谁都不会进行互相的干扰不会重合
2）父子关系
父子元素，子元素和父元素的上面产生一点间距===给子元素添加margin-top
总结：如果是父子关系的话，上面产生间距，给子元素添加上外边距，默认会作用到父元素上面
1）给父元素添加1px透明的上边框
2）给父元素添加float：left=====让父元素触发BFC（形成独立的区域，不会干扰到外界）
3）给子元素添加float：left=====让子元素触发BFC（形成独立的区域，不会影响父元素）
4）给父元素添加overflow：hidden=让父元素形成一个独立的BFC区域，不会干扰到外界
5）给父元素和子元素添加position：absolute/fixed==触发了BFC
6）转换角度，margin-top：作用到父元素上面了==有问题出现了===不适用了
产生距离：转换==给父元素添加padding-top；父元素会被撑大==解决++触发怪异盒子
7）不要背景颜色 不要边框 直接给子元素添加padding-top
BFC
含义：BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。 也就是说，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫做 Flow Root）
形成条件：1、浮动元素，float 除 none 以外的值；
2、绝对定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）
常见作用：
1、包含浮动元素
问题案例：高度塌陷问题：在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合。这时就可以用bfc来清除浮动了。
2、不被浮动元素覆盖
问题案例： div浮动兄弟遮盖问题：由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给蓝色块加 overflow: hidden，触发bfc来解决遮挡问题。
3、 BFC 会阻止外边距折叠
问题案例：margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决。
-->
</body>
</html>
扫一扫
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
