前端笔记(关于css盒模型知识整理)

我以前整理的文章可能也不是特别深入。所以现在开始尝试即使多花点时间收集整理,也不只发浅层知识,这样对技术的深入理解是很有帮助的。

废话不多说,我们现在开始。

说到css模型,这是大多面试基础中会经常面到的。

首先我们要知道,什么是盒模型盒模型分为两种:w3c盒模型IE盒模型

现在大多数浏览器默认情况下的盒模型就是w3c盒模型,由margin、border、padding、content、元素的width==content的width。也就是说w3c盒模型一般情况下会比设置的宽度要大,而IE盒模型则更为标准,元素的width==margin+border+padding+content。因此在w3c盒模型中加入了一个新的样式box-sizing。这个样式可以切换w3c盒模型和IE盒模型。我们来做个例子:

前端笔记(关于css盒模型知识整理)

我们想设置一个如此的样式,一个div内有5个div,横向排列。div宽度可变,平分的。

<div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyyzgx.html