20200817 岳浩天

学习知识

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的值

心得

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

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1