html 盒子模型

html 盒子模型

1.盒子属性

圆角边框

<style>
        div{
            border-radius: 5px;
        }
</style>

外边距

<style>
        div{
            /* 上下左右外边距 */
            margin:10px ;
            /* 上下外边距为10 左右外边距是20 */
            margin: 10px 20px;
            /* 上 左右 下外边距 */
            margin: 10px 15px 20px;
            /* 上 右 下 左 */
            margin: 10px 15px 20px 30px ;
        }
    </style>

内边距

<style>
        div{
            padding: 10px;
        }
    </style>

2. 盒子模型
盒子种类:
1.w3c盒子 (内容盒子 标准盒子 默认盒子)
w3c盒子的宽度:width+padding-left+padding-right+border-left+border-right
w3c盒子的高度:hegiht+padding-top+padding-bottom+border-top+border-bottom
w3c盒子页面所占的宽度:w3c盒子的宽度+margin-left+margin-right
w3c盒子页面所占的高度:w3c盒子的高度+margin-top+margin-bottom
2.边框盒子 (IE盒子 怪异盒子)
IE盒子的宽度: width:100=contentWidth+padding-left+padding-right+border-left+border-right
IE盒子的高度:height:100=contentHeight+padding-top+padding- bottom+border-top+border-bottom
IE盒子所占页面宽:width+margin-left+margin-right
IE盒子所占页面高:height+margin-top+margin-bottom
两种盒子的区别:
w3c盒子width设置给内容区的 边框盒子的width设置给盒子的