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

  • 相关阅读:
    【转】 grep 文件报错 “Binary file ... matches”
    JS 将值插入数组中
    Vue 刷新当前页面,并重新加载页面数据
    Vue 获得所选中目标的状态(checked)以及对应目标的数据,并进行相应的操作
    JS --- 如何获取一个对象的类型
    vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
    VUE 处理文本框获焦点高亮
    VUE项目问题之:去掉url中的#/
    关于移动端终极适配解决方案
    VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法
  • 原文地址:https://www.cnblogs.com/Ly426/p/10242869.html
Copyright © 2011-2022 走看看