盒模型

最新推荐文章于 2022-07-21 17:49:41 发布

原创最新推荐文章于 2022-07-21 17:49:41 发布 · 285 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css

盒模型的浅显理解

一、盒子的分类

盒子的分类
不同的元素产生的盒子类型可能不同
一个元素，产生什么样的盒子，取决于它CSS dispaly属性

属性：dispaly 是否能继承：否默认值：inline

dispaly : none （空盒）
dispaly : inline （行盒）
dispaly : bolock （块盒）
dispaly : 其他取值

二、盒子的组成

margin 外边距控制与其他盒子之间的距离
boeder 边框
padding 内边距边框与内容之间的距离
content 内容
常规流块盒水平方向居中步骤
1、给固定宽度
2、margin:auto
盒模型

三、两种盒模型

在css中有两种盒模型普通盒模型和IE盒模型

普通盒模型

在这里插入图片描述
宽度的实际取值为内边距边框左右两侧以及内容之和
200+5+5+3+3

      
     section{
            background-color: brown;
            width: 200px;
            height: 100px;
      
            padding: 5px;
            border: 3px solid skyblue;
        }

ID盒模型
在这里插入图片描述

实际宽度变成了
184+5+5+3+3

section{
        width: 200px;
        height: 100px;
        border: 3px solid red;
        padding: 5px;
        margin: 10px;
        box-sizing: border-box;
        }