CSS3:盒子模型box-sizing

box-sizing:content-box(默认)/border-box/inherit

content-box:标准盒模型,CSS定义的宽高只包含content的宽高
border-box:IE盒模型,CSS定义的宽高包括了content,padding和border
inherit:继承其父元素的盒模型

说一个cvte的一个面试题:写一个四栏布局,然后每两个中间间隔为20px;
当时很紧张,想到了用flex,但是结果都不太理想,然后面试官给我写了一个方法,当时真的是很佩服,感觉虽然不难,但是人家考虑的很周到。大概代码是这个样子的

<div class="wrap">
  <div>DIV1</div>
  <div>DIV2</div>
  <div>DIV3</div>
  <div>DIV4</div>
  <div>DIV5</div>
</div>
<style type="text/css">
*{margin:0;padding:0;}
  .wrap{
  background-color:red;
  margin-right:-20px;
}
.wrap div{
  box-sizing:border-box;
  backgroud-color:green;
  width:25%;
  height:100px;
  border-right:20px;
}
</style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,528评论 5 15
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 1, 时间管理。 一个人要获得成功,不仅需要信心和勇气,还需要投入时间、精力和金钱。合理安排学习时间格外重要。空闲...
    微笑的流光飞舞阅读 213评论 0 0
  • 1. 最近可能流行吃蜜,说话都是这么的甜。大家都跟上了流行,我也要努力啦 哈哈,不过还是要控制量啦。长蛀牙可不好。...
    柚丠丠阅读 164评论 4 4
  • 想起来昨天中午在楼下小树林里练习,温度适宜,和风习习,站桩 蹲起 打拳架一套下来真的非常舒服,希望5/6月份多来几...
    弯月长虹阅读 125评论 0 0