20200817冯强_日志

一、定位(改变元素在页面的样子)

1.position:static可以清除已有的布局

2.若取值是relative/absolute/fixed的一种用 top left right bottom调位置

3.relative是相对自己原来的位置做偏移 不脱离文档

4.absolute的父级元素一般来说都是relative 绝对定位的元素都会变成块级元素 会脱离文档

5.fixed不随滚动而滚动 一直固定在可视化区域 脱离文档 会变成块级元素

6.浮动定位特点:

(1)一旦浮动,会脱离文档流
(2)浮动在父级元素左边或右边 或者已浮动元素左边或右边
(3)浮动元素依然会在包含框内,元素只会在当前行浮动
(4)父级元素横向显示不下所有的浮动元素,显示不下的元素会自动换行
(5)浮动元素能够让多个块级元素在一行内显示

7.浮动定位的属性值 left right none

8.浮动引发的特殊情况

(1)浮动元素的占位问题
当父元素一行显示不下所有元素,最后显示不下的元素会换行。但是,已浮动元素会根据自己的浮动方向占据位置,导致被挤下去的浮动,需要在更下面的位置显示,即换行的浮动元素不能去占据已经被占的位置显示
(2)浮动元素的宽度问题
元素一旦浮动,如果元素没有定义宽度,那么浮动元素的宽度以内容为准
(3) 元素一旦浮动,会变为块级元素
可以设置尺寸,可以设置上下外边距
(4)脱离文档流

9.清除浮动 clear 属性 left right both

10.高度坍塌

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

11.解决高度坍塌:

1.若已知块级元素高度,可设置他的高度
2.父元素设置浮动 但是会影响后续元素
3.为父元素设置overflow 但是内容溢出的属性会一并隐藏
4.父元素设置display:table 盒子模型改变 不推荐使用
5.在父元素追加一个空的 没有宽高的div 设置 clear:both
6.为父元素最后添加伪元素 div:after{ content:""; display:block;clear:both;}

二、常用属性

1.display 显示方式 inline行内 none不显示 block块级 inline-block行内块 table具有table一样的样式

2.display:none和visibility区别

display是脱离文档的 不占空间 后者是不脱离文档 只是隐藏

3.透明度:

opacity 会连同背景一起隐藏 rgba只隐藏文字

三、布局(弹性布局主要是为了解决某个元素中其子元素的布局,为布局提供了很大的灵活性)

1.弹性容器特点

(1)元素设置弹性容器之后,该元素所有的子元素都变为弹性项目,弹性项目将按照弹性布局的方式排列,默认情况下,弹性项目是按照x轴的方向,进行排列,此时的x轴就是我们的主轴
(2)元素设置为弹性容器之后,项目的float/clear失效,容器的vertical-align/text-align失效
(3)父元素设置了宽高就没有项目根据尺寸变小的效果了

2.块级元素设置为弹性容器 display:flex 行内元素 display:inline-flex;

3.flex-direction设置主轴方向 row x轴为主 row-reverse(右侧开始) colum y 轴为主

4.flex-wrap设置项目换行 默认nowrap空间不够也不换行 wrap空间不够就换行

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

6.justify-content定义对在主轴上对齐方式 flex-start 主轴起点flex-end主轴终点 center中部对齐

space-around 两端有空白 空白间隙相同 space-between 两端空白 间隙相同

7.定义在交叉轴上的对齐方式 与主轴相似

8.项目

1.order:定义项目的排列顺序,值越小越靠近主轴起点,默认为0
2.flex-grow:定义项目放大比例,如果容器有足够的剩余空间,项目将按比例放大无单位数字,默认值0不放大
3.flex-shrink:定义项目的缩小比例,默认为1无单位数字,默认值为1, 取值越大,缩小的越快,取值为0,不缩小
4.flex-basis 设置每个项目占主轴的空间
5.简写:flex-grow flex-shrink flex-basis

标签

评论

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