前端基础-04-盒子模型

ゝ一纸荒年。 2022-06-05 02:16 168阅读 0赞

# 盒子模型 #

### 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