盒模型及margin padding

/*background颜色会渲染padding区域*/

    /*padding-top: 25px;

    padding-left: 25px;

    padding-bottom: 25px;

    padding-right: 25px;

    */

   /*上述代码简写方法 4个值 顺时针

       上 右 下 左 */

   padding: 10px 20px 30px 40px;

   /*如果只有3个值,代表 上 左右 下

   2个值表示 上下,左右

   1个值表示 上下左右

   */

/*

     设置一个边框需要3个值

      边框宽度 px

     边框类型

      solid 实线

      dotted 小正方点

      dashed 虚线

     边框颜色

      可以不写,默认为与当前文字的默认颜色相同

    */

    /*border: 10px dashed black;

    上述写法相当于下面*/

    /*border-top: 10px dashed black;

    border-right: 10px dashed black;

    border-left: 10px dashed black;

    border-bottom: 10px dashed black;

    color:red;*/

    /*border-top:1px dashed black; 相当于*/

    border-top-color: black;

    border-top-style: dashed;

    border-top-width: 1px;

    /*同理,下左右都可以按照上述拆分的方式去写*/

/*当元素需要与别的元素之间有距离时,可以考虑使用margin,margin的区域是透明的,背景色不会渲染到该区域.*/

    /* margin-top:50px;

    margin-bottom: 50px;

    margin-right: 50px;

    margin-left: 50px; */

    margin: 60px 200px 100px 100px;

    /*代码从上向下走,所以下面的10px会覆盖上面的4个值,也就是实际输出的值为10*/

    margin: 10px;

/*overflow:hidden 把超出/溢出的内容给隐藏*/

盒模型:把每个html元素看做一个盒子

   1.盒模型结构

   2.盒模型如何影响元素之间的位置关系

  -->

  <!-- 盒模型结构

  1.content(内容)

  展示文字和图片

  2.padding(内边距)

  内容与边框之间的距离

  3.border(边框)

  元素的边框

  4.margin(外边距)

  元素与元素之间的距离(父子元素,兄弟元素).

  -->

  <!--

   盒模型有两种形式:

   1.普通盒模型

   盒子的宽度=

   width +padding -left +padding -right + border-left + border-right + margin-left + margin-right.

   盒子的高度

   height+padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom.

   2.怪异盒模型

  -->

  <!-- content:内容,平时给元素添加的文字或者图片

  1.如果是块元素且没有设置宽高,content的宽默认为父级的宽,高为内容的高.

  2.若是块元素并且设置了宽高,那content的宽高为设置好的宽高.

  3.如果是行元素,content的宽高就是元素内容的宽高.

<!-- margin的坑点

  1.相邻兄弟元素在垂直方向上的margin会出现融合情况.

  会取margin值最大的那个元素.

   使用display:inline-block样式

  2.当父级与子级元素都设置了margin时,子级的margin值会传递给父级. 

  解决方案:

  1.给父级加边框.

  2.给父级加overflow样式. (建议使用该方法.)

  3.使用display:inline-block样式-->