一、定位（改变元素在页面的样子）

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