布局方式

发表于 | 分类于

flex

flex很实用的属性
  • align-self(控制子项自己在侧轴上的排列方式)
    • align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
  • order(属性定义项目的排列顺序)
    • 数值越小，排列越靠前，默认为0。注意：和 z-index 不一样
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      <style>
        .wrapper {
          display: flex;
          width: 80%;
          height: 300px;
          background: #ff9400;
        }
        .item {
          width: 100px;
          height: 100px;
          background: #c40;
          margin-right: 5px;
        }
        .item:nth-child(3) {
          align-self: flex-end;
          order: -1;
        }
      </style>
      <div class="wrapper">
        <span class="item">1</span>
        <span class="item">2</span>
        <span class="item">3</span>
      </div>

css3特殊样式（webkit）

1
2
3
4
5
6
7
8
9
10
11
/*CSS3盒子模型*/
-webkit-box-sizing: border-box;

/*点击高亮我们需要清除清除  设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;

/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;

/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }