前端学习day004：外边距内边距边框；元素居中设置；定位；盒模型

1.外边距内边距边框：
外边距：元素与元素之间外边框的距离，可以是父子元素，也可以是兄弟元素
            margin: ; 一个值代表4个方向的外边距设置;
            margin: 上 右 下 左;   四个值
            margin-top: ;
            margin-bottom: ;
            margin-left: ;
            margin-right: ;
body是默认具有8px外边距的
 清除所有元素默认的内外边距 0可以省略px 
* {
            margin: 0;
            padding: 0;
        }
内边距：元素内容区之间的距离
            padding: ;上右下左
            padding-top: ;
            padding-bottom: ;
            padding-left: ;
            padding-right: ;
边框：
           border: 1px solid red;
            /* 边框的宽度 */
            border-width: ;
            /* 边框的样式;dotted圆点 inset阴影 dashed虚线 solid实线
            写一个代表四个方向  两个上下 左右 三个上 左右 下 四个上右下左 */
            border-style: ;
            /* 边框的颜色;
 写一个代表四个方向  两个上下 左右 三个上 左右 下 四个上右下左 */
            border-color: ;

2.元素居中设置:

块元素居中设置：margin:0 auto;
行元素居中设置：不能使用margin:0 auto;默认上下外边距 设置完无效
        要给父元素设置text-align: center;进行居中
行内块居中设置：要给父元素设置text-align: center;进行居中

3.定位：

作用：可以使元素在页面中进行位置的偏移
相对定位：开启相对定位的元素 不脱离文档流 可以使用left right top bottom属性进行位置设定  是以自身位置作为参考点进行移动
             position: relative;
         left: 500px;
    
绝对定位：开启绝对定位的元素 脱离文档流 可以使用left right top bottom属性进行位置设定  是以设置过定位的父元素为从参考点。如果父元素没设置过定位关系 那就以body为参考进行定位
如果给一个元素开启绝对定位后，一般情况下给其父元素开启相对定位
    position: absolute;
固定定位：开启固定定位的元素 脱离文档流 可以使用left right top bottom属性进行位置设定  是以body为参考点
        position: fixed;
粘性定位：介于相对相对定位和固定定位之间的一种定位方式
开启粘性定位的元素 根据情况决定是否脱离文档流 可以使用left right top bottom属性进行位置设定  是以body为参考点
         position: sticky;
切换定位方式的临界点：top:0;
                     bottom:0;
静态定位：是元素默认的定位方式，不能使用left right top bottom属性进行位置设定  
      position: static;
z-index属性：对于开启定位元素的层级关系的设置 层级关系默认都是z-index：0  数字越大层级越高 如果是静态定位或没有开启定位，z-index属性是无效的 

4.盒模型

所有的元素默认都是盒子形状
盒模型：计算元素的大小的方式
标准盒子：默认元素都是标准盒子 width=内容区宽度 height=内容区高度
标准盒子大小=width+padding+border
      box-sizing: content-box;
怪异盒子：
怪异盒子大小=width,height,border和padding不变会挤压内容区
    box-sizing: border-box;