margin-top传递的现象与解决方案
现象：为子元素设置margin-top后，会把父元素一块带下来
<div class="box1">
<div class="box2"></div>
</div>
.box1{
width: 200px;
height: 200px;
background: pink;
}
.box2{
width: 100px;
height: 100px;
background: skyblue;
margin-top: 30px;
}
解决方案1： 为父元素加边框
解决方案2：格式化上下文BFC
解决方案3：使用padding替代margin
自适应盒模型的特性
当子盒子不写宽度的时候，添加padding，margin，border等，向内缩
标准盒模型和怪异盒模型
- 标准盒模型content-box：width，height=content
- 怪异盒模型border-box：width，height=content+padding+border
常见清除浮动的方案
clear属性 清除上下
BFC 清除父组件塌陷
空标签
.clearfix::after{}
.clearfix::after{
content:"";
clear:both;
display:block;
}
浮动特性注意点
-
只会影响后面的元素
-
文本不会被浮动元素覆盖
-
具备内联盒子特性：宽度由内容决定
-
具备块级盒子特性：支持所有样式
-
浮动放不下，会自动换行
定位
相对定位position：ralative
-
相对定位的元素是在文档中的正常位置偏移给定的值
-
不影响其他元素布局
-
相对于自身进行偏移
绝对定位position：absolute
-
脱离标准文档流，不占据空间
-
具备内联盒子特性：宽度由内容决定
-
具备块级盒子特性：支持所有样式
-
绝对定位元素相对于最近的非static祖先元素定位，当这样的祖先元素不存在时，则相对于可视区定位
固定定位position：fixed
粘性定位position：sticky
- 粘性定位可以被认为是相对定位和固定定位的混合，元素在跨越特定阈值前为相对定位，之后为固定定位
详解display属性
display-outside外部值
定义自身元素的外部表现，而不影响其内的子元素
- block：表示块级盒子
- inline：表示内联盒子
display-inside内部值
定义子元素布局的
-
table：带有内部表格布局的块级盒子
-
flex：带有内部弹性布局的块级盒子
-
grid：带有内部网格布局的块级盒子
global全局值
-
inherit：继承父元素的display属性
-
initial：不管父元素怎么设定，恢复到浏览器最初时的display属性
-
unset：unset混合了inherit和initial，如果父元素设值了，就用父元素的设定，如果父元素没有设值，就用浏览器的缺省设定
书写模式与逻辑属性
writing-mode书写模式
-
horizontal-tb：水平方向自上而下的书写方式
-
vertical-lr：垂直方向自左而右的书写方式
-
vertical-rl：垂直方向自右而左的书写方式
BFC块级格式化上下文
概念：
- 可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何，都不会影响到外部
触发条件：
-
float的值不是none
-
position的值不是static或relative
-
display的值是inline-block、table-cel、flex、table-caption或inline-flex
-
overflow的值不是visible
BFC的应用：
-
解决margin-top传递问题 在父元素上加
-
解决纵向margin重叠问题
-
-
解决浮动高度塌陷 在父元素上加
