2020-12-01

学习内容：

学习时间：

1、 周二

---

学习产出：

1、解决高度塌陷问题方法一：
页面元素有一个隐藏的属性:block formatting context简称BFC
开启BFC之后，元素有以下属性：
（1）父元素的垂直外边距不会和子元素重叠
（2）开启BFC的元素不会被浮动元素覆盖
（3）开启BFC的原速度可以包含浮动的子元素
开启BFC的方法：
1.设置元素浮动【可以撑开父元素，会导致父元素宽度丢失，下边的元素上移】
2.设置元素的绝对定位
3.设置元素为inline-block【可以解决，但是父元素宽度丢失】
4.将元素的overflow设置为一个非visible的值，将overflow设置为hidden 【最小副作用开启BFC的方式】

2、导航条练习：完成
3、4解决高度塌陷的最终办法：
方法二：
clear：清除其他浮动元素对当前元素的影响

清除浮动之后，当前元素会回到原来的位置
both：清除影响最大的
解决高度塌陷的方法三：
直接在父元素的里面，添加一个空白的div，并且给该元素设置clear，这样这个空白的div可以撑开父元素。

通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样达到和div一样的效果，但是不会增加多于的div【最推荐的方式】
.box1:after{
content: “”;
display: block;
clear: both;
}
8、定位
【div.box$*3】
定位：将指定元素放到页面的任意位置
position

relative：【position:relative】
（1）开启相对定位后【不为static】，但不设置偏移量时，不会发生任何变化
（2）可以设置上下左右来是设置元素的偏移量
left：元素相对于其定位位置的左侧偏移量
（3）相对定位是相对于自身原来的位置定位
（4）相对定位的元素不会脱离文档流
（5）相对定位会使元素提升一个层级
通常偏移量只需要使用两个，就可以定位
（6）相对定位不会改变元素的性质，块还是块，内联还是内联

absolute：【position:absolute】
(1)开启绝对定位，会使元素脱离文档流
(2)如果不设置偏移量，元素位置不变化
(3)绝对定位是相对于离他最近的开启定位的祖先元素进行定位的，如果所有祖先元素都么有开启定位，那么相对于浏览器窗口定位。【一般开启了子元素的绝对定位，都回开启父元素的相对定位】
(4)绝对定位会使元素提升一个层级
(5)绝对定位会改变元素的性质，块元素的高度和宽度会被内容撑开，内联元素变为块元素

fixed:【position:fixed】
(1)固定定位永远相对于浏览器窗口定位
(2)固定在浏览器窗口的某个位置，不会随滚动条滚动
其余的和绝对定位一样

完成情况：完成
问题：有点混乱，明天再捋一捋