盒子模型1.盒子模型简介

#他是由内容、内边距、外边距、边框
border:边框 类型 颜色;
border-width
border-style solid实线 dashed虚线 dotted点线 double双边框
border-color
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下  右左
三个值的时候： 上 右左 下
四个值的时候： 上  右  下 左
div {
width: 200px;
height: 200px;
border: 10px double green; /*复合样式*/
}

2.padding内边距

#padding  内边距，边框与内容之间的距离
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下  右左
三个值的时候： 上 右左 下
四个值的时候： 上  右  下 左

p {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    padding: 50px 20px 30px 40px;
}

3.margin外边距

#margin 外边距 元素与其他元素的距离（边框以外的距离）
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下  右左
三个值的时候： 上 右左 下
四个值的时候： 上  右  下 左
margin: auto; 左右才有居中效果，上下没有用处
*/
* {
    margin: 0;/*去掉元素的默认margin*/
    padding: 0;/*去掉元素的默认padding*/
}

4.盒子宽高计算

盒子大小=样式宽 + 内边距 + 边框
盒子宽度=左border+右border+width+左padding+右padding
盒子高度=上border+下border+height+上padding+下padding
div {
    padding: 20px;
    margin: 30px;
    width: 200px;
    height: 200px;
    border: 10px solid red;
}
width=200+10*2+20*2=260px

5.浮动属性

# float：浮动的特点
如果只给前面的元素浮动，后面的要占据他的位置
ul {
    border: 1px solid red;
    width: 204px;
    height: 500px;
}

li {
    width: 20px;
    height: 20px;
    background: green;
    border: 1px solid #ddd;
    list-style: none; /*去掉小黑圆点*/
    float: right;/*右浮动*/
    border-radius: 50%;/*标签导圆角*/
}

6.清除浮动

#清除浮动三种方式：
    1.给父级增加高度（不推荐使用）
    2.给父级加overflow:hidden;
    3.给父级加一个类
        .clearfix:after{
          content: "";
          display: block;
          clear: both;}

div {
    /*height: 200px;*/
    width: 500px;
    border: 10px solid red;
    /*清除浮动*/
    /*overflow: hidden;*/
}

p {
    width: 200px;
    height: 300px;
    /*display: inline-block;*/
    background: green;
    float: left;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

7.定位position

#position 定位
1.static 静态定位（没有定位），默认
2.relative 相对定位，相对于元素起始位置进行定位，元素占有位置=相对位置+元素本身位置
.box1 {
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
    top: 50px;
}

3.absolute 绝对定位，没有占据位置，
      没有定位父级，则相对于整个文档发生偏移
        参考最近非static定位的父级进行定位
.box2 {
    width: 100px;
    height: 100px;
    background: green;
    /*position: relative;*/
    position: absolute;
    top: 50px;
}

4.fixed  固定定位，相对于浏览器窗口进行定位
.box3 {
    margin-top: 200px;
    width: 150px;
    height: 150px;
    background: blue;
    position: fixed;
    top: 50px;
}

#方向分为4个：
  left
  right
  top
  bottom