html盒子模型

1盒子模型

盒模型是css布局的计算，他规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面快捷，即都包含边框，编辑，补白，内容区，这就是盒模型。

外边距

边框

内边距

内容区 内边距 边框 外边距 边框 内边距 内容区

2.内边距

padding   内边距  内容区大小不会改变，会增加四边厚度
                1.一个值，四个方向都一样
                2.两个值，上下，左右都一样
                3.三个值，上 左右都一样 下
                4.四个值，上 右 下 左   顺时针方向
内边距特性   1.背景色蔓延到内边框
           2，可以设置单一方向边距
              padding-方向top  bottom left right
            3.不支持负数内边距大小

3.边框

border:10px       solid     red  transparent透明色
       边框粗细   边框样式    边框颜色
1.边框样式：solid实线  double双实线 dashed线状线 dotted点状线
2.背景色 也能蔓延到边框上 
3.边框会增加四边厚度，内容区域不受影响
4.可以设置四个方向不同的样式
   a) border-top:5px solid  red
      border-lift:3px double green
​
   b)border 可以拆分为
              border-width
              border-style
              border-colo
一个值，四个方向都一样
两个值，上下，左右都一样
三个值，上 左右都一样 下
四个值，上 右 下 左   顺时针方向

4.外边距

margin属性  
 两个容器直接的间距就是外间距，margin
margin:50px
1.可以设置单个方向
   一个值，四个方向都一样
    两个值，上下，左右都一样
    三个值，上 左右都一样 下
    四个值，上 右 下 左   顺时针方向
margin-top/lift/right/bottom:
2.背景色不蔓延
3.*{margin:0}
！！！4.外边距支持负值，往反方向移动
5.屏幕水平居中  margin:0px auto; 横向居中方案
  上下垂直auto是没有意义的
​
​
外边距特性：
1.兄弟关系，两个盒子垂直方向外边距取最大值
          两个盒子水平方向外边距会合并处理，外边距相加
2.父子关系：给子盒子加外边距会作用到父盒子上
         1.子margin-top==>父的padding-top，注意高度计算  给父盒子加内边距
         2.给父盒子设置边框 transparent 注意高度计算
         3.给父盒子或子盒子加浮动
         4.overflow:hidden; BFC构建一个块能实现内部子标签不影响后面内容
​
盒子案例：/* img 与p不是一个类型会有间隔
        把img通过 display，转换成block
        */