8-17 笔记 高度坍塌 解决方法 隐藏方式 及弹性布局

一.隐藏

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

二.弹性布局，代替浮动float

​ float用于网页布局
​ flex 用于移动端布局 灵活性更高

三.项目

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

· order

• 取值

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

三.定义项目的放大比例

· flex-grow

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

• 取值

无单位数字，默认值0不放大

定义项目的缩小比例

· flex-shrink

定义项目的缩小比例，默认为1

• 取值

• 1. 无单位数字，默认值为1， 取值越大，缩小的越快

• 2. 取值为0，不缩小

4 设置每个项目的占主轴的空间

· flex-basis

• 取值

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

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

• 3. %

5 设置项目在交叉轴上的位置

· align-self

• flex-start

交叉轴起点对齐

• flex-end

交叉轴终点对齐

• center

交叉轴居中对齐

• baseline

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

• stretch

前提，项目不写高，占满交叉轴上所有空间

• auto

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

• align-self属性取值

浮动引发特殊情况

• 1. 浮动元素的占位问题

当父元素一行显示不下所有元素，最后显示不下的元素会换行。但是，已浮动元素会根据自己的浮动方向占据位置，导致被挤下去的浮动，需要在更下面的位置显示，即换行的浮动元素不能去占据已经被占的位置显示

• 2. 浮动元素的宽度问题

元素一旦浮动，如果元素没有定义宽度，那么浮动元素的宽度以内容为准

• 3. 元素一旦浮动，会变为块级元素

可以设置尺寸，可以设置上下外边距

• 4. 脱离文档流

元素一旦脱硫文档流，会发生四件事，1：元素在页面不占空间；2：后续元素上前补位；3：元素不设置宽度，脱离文档流后，宽度以内容为准；4：元素脱离文档流，变为块级元素

• 文本、行内元素、行内块 遇到浮动元素的特殊情况

他们如果不浮动，是不会被浮动元素覆盖的，而是巧妙的避开环绕着浮动元素显示

• 清除浮动

• clear

作用：清除之前浮动元素给当前元素带来的影响。之前元素浮动，后面元素补位。清除了这个影响，后面元素不再去补位

（面试 高度坍塌）

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

• 由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0

• 解决高度坍塌

• 1. 父元素设置高度，弊端：不是每次都能明确知道具体高度

• 2. 父元素设置浮动，弊端：会影响父元素后续元素

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

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

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

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

• .clear:after{

content:"";

display:block;

clear:both;

}

面试题：

页面当中的隐藏，display:none; visibility:hidden; opacity:0 ; input[type=“hidden”]，哪种方法是让元素在页面中真正隐藏？

隐藏后占据空间visibility:hidden;opacity:0;

影藏后不占据空间display:none;input[type=“hidden”]