css盒子模型

css盒子模型(Box Model):

介绍:盒子模型本质上是指一个盒子,能够将html元素进行封装

构造:边距---margin(外边距)

     填充--padding(也叫内边距)

     边框--border(边框的样式可以通过border-radio等去修改)

     实际内容(html元素)

盒子模型允许在其他元素和周围元素边框之间的空间放置元素

例如：

<style>
    .box{
        width: 200px;
        height: 200px;
        /* 设置边框为1px 并给其颜色为红色 */
        border: 1px solid red;
        /* 内边距/填充 */
        padding: 20px;
        /* 外边距 */
        margin: 20px;
    }
    
</style>
<div class="box"></div>

运行结果：

宽:200px,左右边框2px,左右边距40px,左右填充40px

总宽:282px

元素总宽度=元素宽度+左右填充+左右边框+左右边距

高度:200px,上下边框2px,上下边距40px,上下填充40px

总高:282px

元素总高度=元素高度+顶底部填充+上下边框+上下边距

注意:如果你给盒子未指定宽度和高度,则padding不会撑开盒子大小。

附图：