8-17 钟诚

一.隐藏

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

二.弹性布局,代替浮动float
float用于网页布局
flex 用于移动端布局 灵活性更高

三.项目

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

· order

• 取值

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

2.定义项目的放大比例

· flex-grow

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

• 取值

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

3 定义项目的缩小比例

· 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"]

标签

评论

this is is footer