markdown 定位和边距

Posted 2021-05-05

position：static，默认，一般没什么实际的作用

position：relative,相对定位 ，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bottom/left来改变框的位置

position：absolute，绝对定位，脱离文档流，可以理解为跟其他的元素不在一个次元中，可以用top/right/bottom/left来控制位置，absolute以父级元素中第一个relative或absolute定位的元素进行定位

当父级元素没有设置长宽时，可以采用相对定位的方式：

.class {
  position: absolute;
  top: 50%; //top left 是相对父元素的左上角进行偏移
  left: 50%;
  transform: translate(-50%, -50%); /*将元素的定位点从左上角移动到中点*/ //相对于本元素的左上角进行偏移
}

这里要求父级元素拥有absolute或者relative属性：
position:absolute是相对于它的包含块中第一个有position:absolute或者position:relative属性的父级元素
如果都没有，就是相对于body

元素是以“最近的已定位的祖先元素”来确定大小和定位的，如果都没定位, 则以body定位

当父级元素设置了长宽时，可以采用绝对定位的方式：

.class {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /*将元素的定位点从左上角移动到中点*/
}

如果父级元素没有设置长高，使用绝对定位方式不会生效

## 对齐方式

>行内或块级元素

```
top
right
bottom
left
```

>行内元素

```
vertical-align
text-align
```

### 区别

>text-align是设置子元素的左中右对齐方式

属性应用在父元素, 子元素 display:inline-block 或 display:inline

>vertical-align是设置元素的上中下垂直对齐方式


>块级元素

```
margin
margin-top
margin-right
margin-bottom
margin-left
```

```
padding
padding-top
padding-right
padding-bottom
padding-left
```

## 应用场景

>块级元素设置居中

```
margin: auto
```