盒子模型

盒子模型

• 什么是盒子模型

  

• margin: 外边距; padding: 内边距; border: 边框

• 边框

  1. 边框的样式
  2. 边框的粗细
  3. 边框的颜色

<style>
    body{
        /*body总有一个默认的外边距*/
        margin:0px;
    }
    /*border: 粗细 样式 颜色*/
    #d1{
        width: 300px;
        border: 2px solid rosybrown;
    }
    h2{
        font-size: 16px;
        background-color: aquamarine;
        line-height: 30px;
        text-align: center;
    }
    form{
        background: blanchedalmond;
    }
    div:nth-of-type(1)>input{
        border: 3px solid black;
    }
    div:nth-of-type(2)>input{
        border: 3px dashed yellow ;
    }
</style>

• 内外边距

  • 自动让显示的区域居中的方法：margin: 0 auto; 表示上下外边距为0，左右外边距为自动，默认为相同的值；

    或者用这种方式：margin: top right down left的方式 或者使用margin-top等分别指定

    内边距padding同理。

  • margin: 0 auto; : 居中

    前提是：块元素，且块元素有固定的宽度

  圆角边框

  • <!--    border-radius:顺时针-->
        <style>
            div{
                width: 200px;
                height: 100px;
                border: 10px solid yellow;
                border-radius: 50px 0px 50px 50px;
            }
        </style>
    

  盒子阴影

  • <!--box-shadow: 10px 10px 20px seagreen;-->
    <style>
        div{
            width: 200px;
            height: 100px;
            border: 10px solid yellow;
            box-shadow: 10px 10px 20px seagreen;
        }
    </style>