CSS盒模型

盒模型（每一个元素都会生成矩形的盒子）

1. 长度单位区别：

   • 1em=16px
   • em相当于父元素
   • rem相当于根元素

2. 盒子的分类

   一个元素产生怎样的盒子，取决于他的css属性display

   •     /* 隐藏 不生成盒子*/
         display: none;
         /* 行内元素  可以并排*/
         display: inline;
         /* 块盒 */
         display: block;
     

3. 盒子的组成（border和padding都会使盒子称大）

   • margin /*外边距，与其他盒子之间的距离*/
     boder /*边框*/
     content /*内容，内容的宽度和高度*/
     padding /*内边距，边框与内容之间的距离*/
     

   •     /* 宽 */
         width: 100px; 
         /* 高 */
         height: 100px;
         /* 背景颜色 */
         background-color: aquamarine;
         /* 常见的颜色：blue蓝色，red红色，green绿色，yellow黄色，pink粉色，black黑色，while白色，purple紫色 */
         /* 内边距 */
         /* 设置一个值 控制的是四周 */
         padding: 20px; 
         /* 两个值 第一个值：上下，第二个值：左右*/
         padding: 10px 20px;
     	/* 两个值 第一个值：上，第二个值：左右,第三个值：下*/
         padding: 10px 20px 30px;
         /* 两个值 第一个值：上，第二个值：左,第三个值：右，第四个值：下;(顺时针方向)*/
         padding: 10px 20px 30px 40px;
     

     方位值 top right bottm left

      	 padding-top: 10px;
          padding-right: 10px;
          padding-bottom: 10px;
          padding-left: 10px;
     

   • border边框

       /* border 边框
           粗细，可以不写
           颜色，可以不写默认黑色
           样式，必须写
       */
        border: 5px solid red;
     

     方位值 top right bottm left

     /* 方位值 */
     /* 线条 solid实线 dashed线虚线 dotted点虚线 double双实线 */
     border-bottom: 1px solid red;
     border-top: 1px double rgb(94, 67, 67);
     border-left: 1px dashed rgb(34, 32, 32);
     border-right: 1px dotted rgb(68, 50, 50);
     

   • margin 外边距

     /* 外边距 */
          margin-top: auto;
          margin-bottom: unset;
          margin-left: initial;
          margin-right: inherit;
     

       /* auto自动（可做元素的水平居中）：条件1.width有值2.margin左右两边为自动的auto */
       /*子属性的属性值: 单个值 = 长度值/百分比值/auto*/
          margin: auto;
       /*继承父亲: inherit从父元素继承外边距。*/
     	 margin:inherit
       /*initial 关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式*/
     	 margin:initial
       /*unset 关键字我们可以简单理解为不设置*/
     	 margin:unset
     

     计算元素真实宽：宽=（左右两边的padding+左右两边的border）+width

     计算元素真实高：高=（上下两边的padding+上下两边的border）+height