一、由外到内

margin-border-padding-content

二、属性讲解

1. 盒子border属性

细节说明:

要想给四条边赋值且在一个语句内，给值的顺序是上、右、下、左

可以在一行内同时设置宽度、颜色、样式

2.盒子的padding属性（边框到Content）

值得一提的是设置三个属性值，分别表示上、左右、下

3.盒子的margin属性（与父级元素的边界宽）

参数同padding

三、盒子的浮动和定位⭐

两个概念:块级元素、行内元素

块级元素？

• 总是在新行上开始；

• 高度，行高以及外边距和内边距都可控制；

• 宽度缺省是它的容器的100%，除非设定一个宽度。

• 它可以容纳内联元素和其他块元素

行内元素？

• 和其他元素都在一行上；

• 高，行高及外边距和内边距不可改变；

• 宽度就是它的文字或图片的宽度，不可改变

• 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下：

• 设置宽度width 无效。

• 设置高度height 无效，可以通过line-height来设置。

• 设置margin 只有左右margin有效，上下无效。

• 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

行内元素有：heda meat title lable span br a style em b i strong

块级元素有：body from select textarea h1-h6 html table button hr p ol ul dl cnter div

行内块元素常见的有： img input td

盒子的浮动

盒子是块级元素，在默认情况下会垂直向下分布而且宽度会追随父级元素而变化，设置float使不同的盒子同行放置，且宽高自适应content

盒子的定位

1. 静态位置(position：static)也就是默认值：

每一个元素在没有float值的时候，都有position值，就是static，可以直接理解它在是默认值的时候就是常规流，所有规则与常规流一样；

2. 相对位置（position：relative）：

相对定位：相对于自己原来的位置进行移动。 实际代码操作：对于标签样式先声明 position:relative; 再描述移动方向与像素大小 left带正数向右移，以此类推，正数情况下方向相反，那么在这种情况下对于初学的我们，这种定位可以以带负数形式就与标签头方向相同了。 以相对定位移动盒子后盒子时不脱离标准流的，所移动的是一个“虚影”，并非整个盒子往那边移动，所以盒子移动之后，周围的盒子是不会发生变化的。 相对定位在实战中用得比较少，一般用于盒子微调。

3. 固定位置（position：fixed）：

固定定位，顾名思义就是固定盒子不随网页滑动而移动

实际代码：position:fixed;

可以通过top、bottom、left、right设置像素值来固定位置；

一般用于导航栏或者网页角落的广告；

4. 绝对位置（position：absolute）：

绝对定位使元素的位置与文档流无关，也就是脱离文档流，因此不占据空间，比如说有三个纵向排列的三个元素盒子，尺寸宽高都为100px，如果给中间的盒子设置了position：absolute；那么他就会脱离出来，它下面的那个盒子就会向上浮，绝对定位盒子的包含块主要看他父级或祖先级里面有没有定义了position值的，如果有，就是他的包含块；