学习知识

1.opacity=0，该元素隐藏起来了,但不会改变页面布局,并且，如果该元素已经绑定-些事件,如点击事件, 那么点击该区域,也能触发点击事件的
visibility: hidden;隐藏，该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件
display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉--样

浮动float

将元素排除在文档流之外即脱离文档流，元素不再占据页面空间(但依然会显示)，其他未
浮动元素要往前补位

浮动定位的特点：

​ ①元素一旦浮动，脱离文档流，便不再占据页面空间，后面未浮动元素上前补位
​ ②浮动元素会停靠在父元素的左边或者右边，或者其他已浮动元素的左边或者右边

​ ③浮动元素依然会在包含框内，元素只会在当前行浮动
​ ④父级元素横向显示不下所有的浮动元素，显示不下的元素会自动换行

​ ⑤浮动元素能够让多个块级元素在一行内显示

4.元素一旦浮动就回脱离文档流变为块级元素

5.文本、行内元素、行内块 遇到浮动元素的特殊情况：他们如果不浮动，是不会被浮动元素覆盖的，而是巧妙的避开环绕着浮动元素显示

高度坍塌

定义

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

解决高度坍塌

1. 父元素设置高度，弊端：不是每次都能明确知道具体高度
2. 父元素设置浮动，弊端：会影响父元素后续元素

3. 为父元素设置overflow属性，弊端：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏,，取值：hidden/auto

4. 父元素设置display:table，弊端：盒模型属性已经改变，会造成其他问题

5. 在父元素中追加一个空的，没有宽高的div，设置clear：both；

6. 使用内容生成的方式清除浮动：

   ​ .clear:after{
   ​ content:"";
   ​ display:block;
   ​ clear:both;
   ​ }

z-index

特点

1. 根据html代码，后定位的元素，丢叠顺序高
2. 只有已定位的元素，才有丢叠顺序
3. 定位的脱离文档流和浮动的脱离文档流不是一个体系
4. 父子元素都定位，都设置z-index，儿子永远在父亲上面显示

定位的堆叠和浮动有什么关系？

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

弹性布局

特点

1.元素设置弹性容器之后，该元素所有的子元素都变为弹性项目， 弹性项目将按照弹性布局的方式排列

2.元素设置为弹性容器之后，项目的float/clear失效，容器的vertical-align/text-align失效

3.父元素设置了宽高就没有项目根据尺寸变小的效果了

4.默认主轴为x轴，主轴起点在左边，主轴终点在右边

5.交叉轴是永远与主轴方向垂直的一根轴，项目在交叉轴上的对齐方式，称为交叉轴的起点和终点

设置主轴方向flex-direction

row 主轴是x轴，起点在左边

row-reverse主轴是x轴，起点在右边

column主轴是y轴，起点在顶端

column-reverse主轴在y轴，起点在低端

设置项目换行flex-wrap

nowrap默认值，空间不够，也不换行，顶部自动缩小

wrap空间不够就换行，顶部缩小

wrap-reverse空间不够，换行并反转

同时设置主轴方向和项目换行：flex-flow: 设置主轴方向 设置项目换行

定义项目在主轴上的对齐方式justify-content

flex-start默认值，主轴起点对齐

flex-end主轴终点对齐

center主轴中间对齐

space-between两端对齐，两端无空白

space-around两端对齐，两端有空白，每个空白距离相等

定义项目在交叉轴上的对齐方式align-items

flex-start交叉轴起点对齐

flex-end交叉轴终点对齐

center交叉轴居中对齐

baseline交叉轴基线对齐，就是交叉轴起点

stretch项目不写高，占满交叉轴所有空间

项目

定义

弹性布局的子元素们，称之为弹性项目，项目属性只能设置在某一个项目上，不影响其他项目效果

设置项目在主轴上的排列顺序order

无单位整数

注意：定义项目的排列顺序，值越小越靠近主轴起点，默认为0

定义项目的放大比例flex-grow

定义项目放大比例，如果容器有足够的剩余空间，项目将按比例放大

定义项目的缩小比例flex-shrink

定义项目的缩小比例，默认为1，取值越大，缩小的越快

设置每个项目的占主轴的空间flex-basis

1.默认值 auto，按照项目设置的尺寸显示

2.具体数值，设置了具体数字，就不听从之前设置的尺寸值了

3.%

简写：flex-grow flex-shrink flex-basis

设置项目在交叉轴上的位置align-self

flex-start交叉轴起点对齐

flex-end交叉轴终点对齐

center交叉轴居中对齐

baseline交叉轴基线对齐，就是交叉轴起点

stretch项目不写高，占满交叉轴所有空间

auto该项目使用容器的align-items的值

心得

​ 今天是浮动和弹性定位两个重点，也是之前最欠缺的两个点，

所以刚开始还有点懵，梳理了两遍好很多。