搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 前端知识汇总 > 如何用css将盒子完美的等分

如何用css将盒子完美的等分

前端知识汇总 2019-11-08

假期结束了


今天开始你们都返回各自的岗位了吧

这一期来介绍下css的伸缩布局方式:


有这样一个简单的需求


现在你的手里有一个div,你需要把里面的内容分成不定的几等分,同时还具备伸缩的功能?


想想这个需求要怎么完成



有的同学就发言了,这还不简单,看我几分钟就实现


  
    
    
  
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1">     <title>三等分测试</title> <style type="text/css">      * {        padding: 0;        margin: 0;      }      section {        width: 80%;        height: 150px;        background-color: pink;        border: 1px solid #0000FF;      }      section div {        width: 33.33%;        height: 100%;        float: left;      }      div:nth-child(1) {        background-color: #FFC0CB;      }      div:nth-child(2) {        background-color: skyblue;      }      div:nth-child(3) {        background-color: chocolate;      } </style> </head> <body> <section>      <div>第一个盒子</div>      <div>第二个盒子</div>      <div>第三个盒子</div> </section> </body> </html>


这样写完全没有问题,可以任由缩放,来看看效果


如何用css将盒子完美的等分


但是这样写是存在问题的,你需要去计算百分比,这种传统的写法现在已经很少见了,但是很多网站还是用这种写法写的


再来看看我今天要介绍的这种写法


<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1">    <title>三等分测试</title><style type="text/css">      * {        padding: 0;        margin: 0;      }      section {        width: 80%;        height: 150px;        background-color: pink;        border: 1px solid #0000FF;        display: flex; /* 第一步先改变显示模式*/        min-width: 300px;/* 设置缩放的最小宽度 */        max-width: 1000px;/* 设置缩放的最大宽度 */        flex-direction: row;/* 以水平方式缩放 */        flex-direction: column; /* 以垂直方式缩放*/      }      section div {        width: 33.33%;        height: 100%;        float: left;        flex: 1;/* 第二步,设定每个框所占的份数 */      }      div:nth-child(1) {        flex2;/*占显示的两份*/        background-color: #FFC0CB;      }      div:nth-child(2) {        flex3;/*占显示的三分*/

       background-color: skyblue;

     }      div:nth-child(3) {        width: 200px;/* 这样设置了之后这个盒子就不会缩放了 */        background-color: chocolate;      }</style></head><body><section>      <div>第一个盒子</div>      <div>第二个盒子</div>      <div>第三个盒子</div></section></body></html>


这两种写法的效果稍微有点区别,第二种方式现在经常用到



再说说第二种方法需要注意的问题:


  • 一定要先在父级盒子里面改变显示的方式为flex
  • flex的值后面是数字,没有单位的
  • flex是写在子元素中的,不能给加到父级中
  • 一旦有盒子手动的添加width之后此盒子将不会再被缩放
  • flex-direction可以改变缩放是水平的还是垂直的


以后建议大家使用第二种,以为第二种还有哦一个巨大的优点,假如你用第一种给盒子添加margin值后,会因为父级盒子的宽度不够而使盒子掉下来,但是第二种就不会了,这在开发中很大的帮助了我们。


今天就先到这里了,更多的请关注后续的更新............



版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《如何用css将盒子完美的等分》的版权归原作者「前端知识汇总」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注前端知识汇总微信公众号

前端知识汇总微信公众号:lihesheng9

前端知识汇总

手机扫描上方二维码即可关注前端知识汇总微信公众号

前端知识汇总最新文章

精品公众号随机推荐