盒子模型，盒模型，框模型

定义及组成：

• css中所有的样式都是一个矩形盒子
• 布局就是将盒子放到合适的位置
• 盒子的组成包括：内容区（content），内边距（padding），边框（border），外边距（margin）

内容区（content）：

• 存放子元素和文本内容
• width 宽度， height：高度，backgrou-color：背景颜色
• 注意：width和height是设置内容区的大小，不是整个盒子的大小，但是可以通过设置box-sizing属性来指定width和height的值作用到哪，可选值：content-box：width作用于内容区；border-box：width作用于整个盒子

•           /* content */
              width: 100px;
              height: 100px;
              background-color: red;

边框（border）：

• 盒子的边框会影响盒子的大小，即不会改变盒子中内容区的大小
• 必须设置三个属性：border-width：边框宽度，border-color：边框颜色，border-style：边框样式
• 默认值：border-width：3px ，border-color为color的值，border-style为none
• 三个属性可以有多个值，空格隔开：

  一个值	上下左右
  两个值	上下     左右
  三个值	上    左右  下
  四个值	上  右   下   左（顺时针）

• border可以同时设置多个，boder-xxx可以设置指定的一边，border-top，border-right，border-bottom，border-left
• 简写样式：border：10px red solid；
•  border-style的值：solid：实线  ，dotted 点状虚线，doshed 虚线，double 双线  

•             /* border */
              border-width: 2px 3px 4px 5px;
              border-color: blue red purple;
              border-style: solid double;
              /* 简写 常用*/
              border:10px red soild;
              border-top:none;

  内边距（padding）：

• 四个方向的内边距：padding-top，padding-right，padding-bottom，padding-left
• 内边距可以影响盒子的大小，盒子可见框的大小由内容区，外边距，内边距共同决定
• 内边框的颜色是background背景颜色
• 其他规则同boeder-width类似。
• 注意只有大小一个属性，即padding就是width

• padding:100px,200px,150px,300px;

外边距（margin）：

• margin不会影响可见框的大小，但是它会影响盒子实际的大小，也会影响盒子的位置
• margin-top：盒子上外边距，正值，盒子自身下移动；负值，盒子自身上移动
• margin-right：默认为0；
• margin-bottom：盒子下外边距，正值，盒子下面的盒子下移动；负值，盒子下面的盒子上移动
• margin-right：盒子左外边距：正值，盒子自身右移动；负值，盒子自身左移动
• 可以简写，只有大小一个属性，margin: 100px 0 150px 300px;，和padding类似

行内元素的盒模型：

• 行内元素的盒模型不支持设置内容区的高度和宽度
• 可以设置padding，border，margin，但垂直方向上不会影响布局
• 解决办法：将行内元素变成块元素或者行内块元素