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

  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    ddd
  • 原文地址:https://www.cnblogs.com/Ly426/p/10242869.html
Copyright © 2011-2022 走看看