菜鸟关于css的记录-绝对定位,弹性布局

169 阅读1分钟

固定定位 position: fixed

  • 固定定位相对于已定位的父元素,一层一层向上查找,找不到就相对于html定位
  • 固定定位脱离文档流。
  • 若宽度设为百分比针对的是可视化页面宽度100wh,在某容器内使用绝对定位并且需要按照父容器宽度比例设置宽度方法如下:
    • 父容器需要指定宽度,不能是百分比
    • 绝对定位元素使用继承宽度 width: inherit

弹性布局 display: flex

  • 弹性布局的常用数据 justify-ontent: center|space-between|space-around 指定主轴方向上的对齐方式; align-items: center;指定元素水平和垂直居中
  • flex-direction: row|column 指定布局方向,flex-wrap: nowrap|wrap|wrap-reverse 指定是否换行默认不换行,flex-flow是前面两个属性的简写方式
  • 项目的属性
    • flex-grow属性定义项目的放大比例,默认为0即存在空间也不放大,如果所有项目属性都为1则等分。
    • flex-shink属性定义了项目的缩小比例,默认为1,即空间不足该项目将缩小
    • flex-basis属性定义了在分配多余空间之前,项目占据了主轴空间,默认为auto即项目的本来大小
    • flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。