盒子模型

Posted weidiao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了盒子模型相关的知识,希望对你有一定的参考价值。

比喻

盒子模型的比喻:一个鸡蛋放在盒子里

鸡蛋肯定无法充满盒子,鸡蛋与盒子之间的空隙叫做margin留白

鸡蛋皮叫border,边界,边界是可以有厚度的,也是可以有颜色的

鸡蛋皮里面就是鸡蛋清,鸡蛋清就是padding,衬垫,像海绵一样,向母亲的羊水一样保护着里面的鸡蛋黄

鸡蛋黄是核心,是事物的本身

backgroud-color:鸡蛋清和鸡蛋黄,也就是鸡蛋皮里面的东西

color:鸡蛋黄里面的文本颜色

width,height:鸡蛋黄的宽度高度

innerWidth,innerHeight:鸡蛋皮内侧的宽度高度

outerWidth,outerHeight:鸡蛋皮外侧的宽度高度

鸡蛋皮是有厚度的,是有颜色的,所以有:
border-width:鸡蛋皮的厚度
border-color:鸡蛋皮的颜色

margin是留白,是鸡蛋皮和盒子之间的空间,是不属于“鸡蛋”的部分。

一个实例

<html>

<head>
    <style>
        .simple {
            width: 500px;
            margin: 20px auto;
            border-color: aqua;
            background: rebeccapurple;
        }
        
        .fancy {
            width: 500px;
            margin: 20px auto;
            padding: 50px;
            border-width: 10px;
            border-color: aqua;
            background: rebeccapurple;
        }
    </style>
</head>

<body>
    <div class="simple">one</div>
    <div class="fancy">two</div>
</body>

</html>

当你设置了元素的宽度,实际展现的元素却超出你的设置:这是因为元素的边框和内边距会撑开元素。看下面的例子,两个相同宽度的元素显示的实际宽度却不一样。

以前有一个代代相传的解决方案是通过数学计算。CSS开发者需要用比他们实际想要的宽度小一点的宽度,需要减去内边距和边框的宽度。值得庆幸地是你不需要再这么做了......因为有了CSS有了box-sizing属性

box-sizing

人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了 box-sizing: border-box; :

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

既然没有比这更好的方法,一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

这样可以确保所有的元素都会用这种更直观的方式排版。

不过 box-sizing 是个很新的属性,目前你还应该像我上面例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。

参考资料

http://zh.learnlayout.com/box-model.html

以上是关于盒子模型的主要内容,如果未能解决你的问题,请参考以下文章

css 盒子阴影片段

初学css盒子模型,对于盒子的使用不是很明白,请问这样的盒子布局怎么写?

CSS课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )

css盒子模型及盒子模型的类型

CSS盒子模型

css,关于盒子模型