css盒模型

概述

实际上来说 css盒模型是一个盒子 这个盒子包裹这HTML元素 ：
它是由：元素内容content +内边距padding +边框border +外边距margin 组成
css盒模型：普通盒模型（标准盒模型）+IE盒模型（怪异盒模型）

普通盒模型（标准盒模型）

盒子实际的大小是content+padding+border+margin

内容content

		它是由元素本身限制的  比如：文本，图像等 它的尺寸内容宽度和内容宽度  内容区域一般都会含有一个背景色（默认为透明）
	通过设置width与height来设置content尺寸 

内边距padding

  内边距（padding）在内容和边框之间  时常定义元素内容留白  padding值会撑大盒子
  padding取值：(取值时是由顺时针方向来定义四个值得  即：上/右/下/左)
  单一方向设置它们：
     padding-top/right/bottom/left（属性）：相应的值；
         比如：给元素上内边距20px   下内边距10px    左内边距各30px 右内边距30px
          padding-top：20px；
          padding-bottom：10px；
          padding-left：30px；
          padding-right：30px；
   多个方向设置：
   padding：30px；就是外边距的上右下左得内边距都为30像素。
   padding：30px  30px ；就是外边距的上下 左右的内边距都为30像素。
   padding：30px  30px  30px；就是外边距的上  左右   下的内边距都为30像素。
   padding：30px  30px  30px  30px；就是外边距的上 下 左  右的内边距都为30像素。

边框border

1. border-top 上边框
2. border-right 右边框
3. border-bottom 下边框
4. border-left 左边框
   边框都包含三个属性：color（边框颜色 默认为黑色 即当前文本颜色） style（边框样式 默认样式实线solid） width（边框粗细/厚度 默认3px）
   写法格式：border-top-color：red；把上边框颜色设置为红色
   border-top-style：solid；把上边框样式设置为实线
   border-top-width：5px；把上边框宽度设置及厚度为5px

外边距margin

外边距为元素和元素之间的距离
也是由四个方向 margin-top margin-right margin-bottom margin-left 书写格式和padding一样

IE盒模型

IE盒模型（怪异盒模型）：盒子宽度以及高度： 【width/height（盒子内容宽高） 它包含了边框+内外边距】 + margin

两种盒模型的区别

IE盒模型和标准流盒模型计算规则不一样
标准盒模型：box-sizing：content-box 默认
IE盒模型（怪异盒模型）：box-sizing：border-box
它们之间可以相互转换
标准盒模型：盒子宽度以及高度： width/height（盒子内容宽高） + padding + border + margin
IE盒模型（怪异盒模型）：盒子宽度以及高度： 【width/height（盒子内容宽高） 它包含了边框+内外边距】 + margin

具体的就这些了 如有偏差和不足的 希望有大佬指出哦！