一.隐藏
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”]