css学习

一、flex 布局

.site {
    display: flex;
    flex-direction: column;
}

main {
    flex:1;
    flex-direction: row;
    display: flex;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-content: flex-start;
}

 

二、position:relative 和position:absolute的区别

    position:relative相对定位
    1. 如何定位？
        每一个元素在页面的普通流中会“占有”一个位置，这个位置能够理解为默认值，而相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置。（在父级节点的content-box区定位，父级节点有文字的话，元素的默认位置则是紧随文字）
    2. 不会改变行内元素的display属性。
    3. 并无脱离普通流，只是视觉上发生的偏移。

    position:absolute绝对定位

     1. 如何定位浮动？

• 设置了TRBL
  相对最近的设定了position:relative/absolute的父（祖先）节点的padding-box的区进行定位（忽略文字），找不到符合条件的父（祖先）节点，则相对浏览器窗口进行定位。

• 没有设置了TRBL
  则默认浮动，默认浮动在父级节点的content-box区。

    2. 无论是块级元素仍是行内元素，应用了position:absolute以后，display为block：

• 能够设置width和height

• 没有设置的话，width默认为auto

3. 脱离文档流，容器（父）元素将得不到脱离普通流的子元素高度