最新消息:本站所有跳转向bbs.ykit.cn的附件将全面停止,附件已转移到https://www.qingsj.com

CSS3弹性盒模型

CSS3 有客 827浏览 0评论

    1. 弹性盒模型,在使用弹性盒模型时,父元素必须要加:display:box; 或display: inline-box; box-orient定义盒模型的布局方向,horizontal水平显示,vertical垂直显示
      • 复制代码
        <style>
          .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical;}
          .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}
        </style>
        <body>
            <div class="box">
                <div>1</div>
                <div>2</div>
                <div>3</div>
            </div>
        </body>
        复制代码
    2. 元素排列顺序box-direction: Normal, reverse(反序)
      • 复制代码
        <style>
          .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-direction: reverse;}
          .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}
        </style>
        <body>
            <div class="box">
                <div>1</div>
                <div>2</div>
                <div>3</div>
            </div>
        </body>
        复制代码
      • 元素排列顺序,box-ordinal-group:123….. 设置元素的具体的排列顺序
        • 复制代码
          <style>
            .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical;}
            .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}
              .box div:nth-of-type(1) {-webkit-box-ordinal-group: 2;}
              .box div:nth-of-type(2) {-webkit-box-ordinal-group: 3;}
              .box div:nth-of-type(3) {-webkit-box-ordinal-group: 1;}
          </style>
          <body>
              <div class="box">
                  <div>1</div>
                  <div>2</div>
                  <div>3</div>
              </div>
          </body>
          复制代码
    3. 弹性盒模型(2),box-flex定义盒子的弹性空间,定义盒子中每个div所占的份数,类似于定义百分比,子元素的尺寸 = 盒子的尺寸 * 子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
      • 复制代码
        <style>
          .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical;}
          .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}
            .box div:nth-of-type(1) {-webkit-box-flex: 1;}
            .box div:nth-of-type(2) {-webkit-box-flex: 2;}
            .box div:nth-of-type(3) {-webkit-box-flex: 3;}
        </style>
        <body>
            <div class="box">
                <div>1</div>
                <div>2</div>
                <div>3</div>
            </div>
        </body>
        复制代码
    4. box-pack在水平方向上对盒子富裕的空间进行管理,属性值有:start(富裕空间在右侧), end(富裕空间在左侧), center(富裕空间在两侧), justify(富裕空间平均分配到元素之间的间隙)
      • 复制代码
        <style>
          .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-box-pack: end;}
          .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}
        </style>
        <body>
            <div class="box">
                <div>1</div>
                <div>2</div>
                <div>3</div>
            </div>
        </body>
        复制代码
    5. box-align在垂直方向上对元素的位置进行管理,有三个属性值:start(富裕空间在底部), end(富裕空间在顶部), center(垂直居中)
    6. 盒 模型阴影box-shadow: [inset] x, y, blur, [spread], color; inset: 投影方式(内投影); x, y: 阴影偏移; blur: 模糊半径; spread: 扩展阴影半径(先扩展一定像素再模糊); color: 阴影颜色;
      • <style>
            .box {width: 100px; height: 100px; margin: 100px; background: red; box-shadow: 10px 10px 30px blue;}
        </style>
        <body>
            <div class="box"></div>
        </body>
    7. box-reflect倒影,有四个属性,表示四个方向分别是: above, below, left, right;
      • 复制代码
        <style>
            // reflect表示倒影和元素之间的距离
            img { display: block; margin: 200px auto; -webkit-box-reflect: below 10px;}
        </style>
        <body>
            <img src="" />
        </body>
        复制代码
    8. 渐变: -webkit-linear-gradient(red 0, blue 100%);
    9. resize: both(上下左右均可拖动),horizontal(水平可拖动),vertical(垂直可拖动); 一定要配合overflow:auto使用
      • 复制代码
        <style>
            // 水平方向上可以拖动
            .box {width: 100px; height: 100px; background: url(1.png); border: 5px solid #000; resize: horizontal; overflow: auto;}
        </style>
        <body>
            <div class="box"></div>
        </body>
        复制代码
    10. box-sizing盒模型的解析模式
      • content-box 标准盒模型 width/height = content
      • border-box 怪异盒模型 width/height = border + padding + content

转载请注明:有客帮 » CSS3弹性盒模型

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址