2020.8.17+王杉

学习内容：

页面布局：

1.定位分类：普通流定位（默认定位方式）、相对定位（不脱离文档流）、绝对定位（脱离文档流）、固定定位（脱离文档流、不占据页面空间 *固定是以浏览器为基准的）、

*浮动定位：脱离文档流不占据页面空间、后面未浮动元素自动往前补、显示不下自动换行、浮动能让多个块级元素在同一行显示；清除浮动：clear；

重点*高度坍塌问题：块级元素的高，如果不设置，默认靠内容撑开，如果没有设置高的块级元素，内部的所有子元素都浮动，这个块级元素认为自己内部没有元素，所以就没有高了，这种现象叫做高度坍塌。

解决方法：1.父元素设置高度；2.父元素也设置浮动；3.父元素设置（overflow：hidden；）；4.父元素设置（display：table）；5.父元素中加一个没高度空的div设置（clear：both）；6.使用内容生成的方式清除浮动：使用伪元素after设置（clear：both）；

元素堆叠z-inex：定位元素的丢跌顺序，主要用在显示上，默认-1~0，可设置最大值为1000最小值可以为负数。

定位的堆叠和浮动有什么关系？浮动和定位不是体系，不能比较，浮动永远只在一层，不能设置，而定位可以设置堆叠顺序。

2.弹性布局：（flex）弹性布局主要是为了解决某个元素中其子元素的布局，为布局提供了很大的灵活性

弹性布局取值：display：flex 块级、display：inline-flex行级。

其可以设置轴方向默认为x轴，对齐方式justify-content主轴、align-items交叉轴。

主轴上的排列顺序oder、放大比例、缩小比例、占用空间等。

区别：float网页布局；flex 多用于移动端的布局+网页

面试题：如果父元素没有高度，全是靠内容撑开的，那么当元素浮动以后，会发生高度坍塌浮动的元素在页面中是不占据位置

块级元素里面可以有块级块级元素和行内元素，但是行内元素里面，尽可能不要有块级元素

今天还讲了引用别人写的css reset 的问题，如果使用别人写的初始化代码，那么有可能你需要对一些特殊的标签再次进行初始化

心得：今天学习的布局需要时间去多练练结合之前学的知识就可以写静态页面了，今天写了一部分的小米网站的导航项，自己写的还有一些细节没有把控好，老师带着我们写了一遍学到了很多东西，这个是考验html和css学习的综合性，还是需要自己抽抽时间多写写完整一点的静态网页那就能更熟练掌握知识和面对不同的地方的使用方法。