html盒子模型怎么平移盒子,从头开始复习css之盒子模型

盒子模型这个名词来自英文里面的Box modelmodel。怎么理解盒子模型呢？我认为凡是里面可以盛装其他内容的标签，我们都可以称之为盒子。例如：div,p,span等等标签都可以往里面再添加元素，我们都可以称之为盒子模型，相反例如img，input等等 里面是无法盛装其他元素，我们就能称之为盒子。

关于盒子，主要有以下几个要点：

width/height：内容的宽高

padding：内边距

border：边框

margin：外边框

二、 现在存在的盒子模型标准

由于历史和技术遗留原因，现在存在的盒子模型主要有两种：

2.1、 标准盒子模型

2.2、 IE盒子模型：

由上图我们可以清楚的发现，ie盒子和标准盒子之间的区别，整理如下：

在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

IE盒子模型中，width 和 height 指的是内容区域+边框+内边距的宽度和高度。

其实这一点 Android 就好多了，一家独大，标准就一套。

三、 不同盒子模型的转化

ie盒子和标准盒子设计出来肯定有其设计出来的意义，众所周知，现代浏览器普遍使用的都是标准盒子，但是作为一个Android开发工程师，我很多情况下 还是会认同ie盒子的一些标准，那么是否在开发中一定要用标准盒子呢？首先来看下面一段代码：

// css

.son {

width: 100px;

height: 100px;

padding: 10px;

margin: 10px;

border: 5px solid blue;

background-color: red;

box-sizing: content-box;

}

.son2 {

width: 100px;

height: 100px;

padding: 10px;

margin: 10px;

border: 5px solid red;

background-color: blue;

box-sizing: border-box;

}

复制代码

效果如下：

从上面图上可以发现：界面上面出现了两种不同规则的盒子，查纠其代码，发现起作用的方式是：box-sizing属性。我们来看一看box-sizing吧：

box-sizing : content-box|border-box|inherit;

**content-box ：**默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

即总宽度=margin+border+padding+width

**border-box ：**设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容，即ie盒子

inherit：规定应从父元素继承 box-sizing 属性的值

四、 最后来谈谈我在实际开发中遇到的有关盒子的问题

4.1、 盒子内的第一个子元素和最后一个子元素的margin会印象父盒子的位置

首先我们在开发的时候经常会遇到这样的情况，来看下面一段代码：

// css

.son {

margin-top: 100px;

width: 100px;

height: 100px;

background-color: red;

}

// html

复制代码

按照我这个经常做Android的看法，应该是父布局不懂 然后子盒子对应父盒子向下平移100px才对呀。但是实际效果并没有。这种问题的解决办法是：

给父元素加边框border 代码如下：

.parent {

border-top: 1px solid;

}

复制代码

效果如下：

给父元素设置padding值 (这个就不再赘述了)

将父盒子设置成BFC

4.2、 一些默认的元素是带padding，margin的

这种情况比较常见，例如ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。针对这种情况，我们一般都添加一个：

*{

margin:0;

padding:0;

}

复制代码

来清除各个元素的默认margin，padding属性

4.3、 用盒子画三角形。

我看在面试里面经常考的一个点，我这里就简单的画一下，我之前也用伪类画过，我们现在盒子画一下：

.parent {

width : 0;

height: 0;

border : 100px solid transparent;

border-top : 100px solid red; /*方向自己定义*/

}

复制代码

效果如下：

说在最后

一个中午的时间也写不了多少文章，但是自从昨天写完了那篇BFC之后，就总感觉要写一篇文章来介绍一下盒子，正好今天中午不怎么想睡觉，就写了出来。 接下来，按照自己制定的轨迹来说，还有变换、动画、预处理器三个知识点。写完了就开始从头到尾复习js了，如果我在复习上面存在有什么遗漏的知识点，请以评论、私聊的方式联系我。