zoukankan      html  css  js  c++  java
  • css3 display:-webkit-box

    1、webkit-box

    1》.之前要实现横列的web布局,通常就是float或者display:inline-block;但是都不能做到真正的流体布局。至少width要自己去算百分比

    2》.box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

    提供的关于盒模型的几个属性

    box-orient

    子元素排列 vertical(竖排)orhorizontal(横排)

    1.1html

    <!DOCTYPE html>

    <html>

           <head>

                  <meta charset="UTF-8">

                  <title>css3中webkit-box的用法</title>

           </head>

           <style>

           .wrap {

            display:-moz-box;

              display:box;

                  display: -webkit-box;

                  -webkit-box-orient: horizontal;/* 横排显示*/

                  }

           .child {

                  min-height: 200px;

                  border: 2px solid orangered;

                  -webkit-box-flex: 1; /* 一比一*/

                  margin: 20px;

                  font-size: 100px;

                  font-weight: bold;

                  font-family: Georgia;

                  -webkit-box-align: center; /* 居中显示*/

                  }

    </style>

           <body>

                  <div class="wrap">

                         <div class="child">1</div>

                         <div class="child">2</div>      

                         <div class="child">3</div>

                         <div class="child">4</div>

                        

                  </div>

           </body>

    </html>

    1.2.     当一列定宽,其余两列分配不同比例即可(三列布局)

    html代码

    <head>

                  <meta charset="UTF-8">

                  <title>css3中webkit-box的用法</title>

           </head>

           <style>

           .wrap {

                  display: -webkit-box;

                  -webkit-box-orient: horizontal;/*横排*/

                  }

           .child {

                  min-height: 200px;

                  border: 2px solid orange;

                  -webkit-box-flex: 1;

                  margin: 10px;

                  font-size: 50px;

                  font-weight: bold;

                  font-family: Georgia;

                  -webkit-box-align: center;

                  }

           .w100 { 100px}

           .flex1 {-webkit-box-flex: 1}

           .flex2 {-webkit-box-flex: 2}

    </style>

           <body>

                  <div class="wrap">

                         <div class="child w200 ">100px</div>

                         <div class="child flex1">1</div>

                         <div class="child flex2">比例2</div>

                  </div>

           </body>

    https://blog.csdn.net/csdn_chenli/article/details/52946143

  • 相关阅读:
    overflow+文档流
    《大器晚成》读后感 读书笔记
    《指标陷阱》读后感 读书笔记
    《无限的游戏》读后感 读书笔记
    《最蓝的眼睛》读后感 读书笔记
    《正常人》读后感 读书笔记
    《玉米人》读后感 读书笔记
    《科举史》读后感 读书笔记
    《糖的故事》读后感 读书笔记
    《蒙克传》读后感 读书笔记
  • 原文地址:https://www.cnblogs.com/Ly426/p/10242869.html
Copyright © 2011-2022 走看看