CSS3中的盒子模型

最新推荐文章于 2024-04-18 14:26:55 发布

Lance2574

最新推荐文章于 2024-04-18 14:26:55 发布

阅读量676

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/Lance2574/article/details/119830312

版权

盒子模型是h5+css3中最核心的基础知识之一，我们理解了这个重要的概念才能更好的排版，进行页面布局。下面是自己积累和总结的关于css盒子模型的知识，欢迎批评指正。

一、盒子属性

页面布局中的每个元素都可以被看作是一个矩形盒子，具有如下图的一些属性：

width & height 用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。

padding 内间距，就是内容区域与外边框之间的距离。

border 通俗来讲就是盒子的边线，默认值为0。我们可以指定border的粗细大小。

margin 外边距，代表盒子四周的区域。相邻元素的边距会合并（margin collapsing）

二、盒子模型

1、默认盒子模型

W3C盒子，也可以称作内容盒子。当在css中用box-sizing属性，取值为“content-box”时就被设定为内容盒子。它的特点是盒子占据屏幕的大小会随着内容的多少而改变。

我们来定义一个div盒子，并给它指定width、height、border、padding、margin，代码如下：

<head>
<style>
        div {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div></div>
<body>

显示效果如下：

此时，该内容盒子的大小则是100X100加上各自的padding、border形成164X164大小的内容盒子。它会自动加上指定的padding、border。

内容区的宽高：

宽：width 100px

高： height 100px

盒子的宽高：

宽：内容的width+boderLeft+borderRight+paddingLeft+paddingRight

高：内容的height+borderTop+borderBottom+paddingTop+paddingBottom

所占屏幕的宽高：

盒子的宽+marginLeft+marginRight

盒子的高+marginTop+marginRight

2、边框盒子模型

IE盒子，也称怪异盒子。取值为“border-box”时就被设定为边框盒子，它的特点是盒子所占屏幕的空间不会随着内容的改变而改变，大小是根据指定的宽高固定住的。

我们定义的边框盒子和上面内容盒子一样，差异在：增加了一个“box-sizing：border-box”的属性，定义它是一个边框盒子，如下图：

<head>
<style>
        div {
            box-sizing:border-box;
            width: 100px;
            height: 100px;
            border: 2px solid red;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div></div>
<body>

显示效果如下图：

此时，该盒子的整个大小就是我们指定的width=100px,height=100px,即100X100。其内容区域56X56的大小是由width/height减去padding，border的值而自动计算决定的。

内容区的宽高

宽： width-paddingLeft-paddingRight-borderLeft-borderRight

高： height-paddingTop-paddingBottom-borderTop-borderBottom

盒子的宽高

宽：width

高：height

所占屏幕的宽高

width+marginLeft+marginRight

height+marginTop+marginBottom

Lance2574

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
CSS3中的盒子模型

盒子模型是h5+css3中最核心的基础知识之一，我们理解了这个重要的概念才能更好的排版，进行页面布局。下面是自己积累和总结的关于css盒子模型的知识，欢迎批评指正。一、盒子属性页面布局中的每个元素都可以被看作是一个矩形盒子，具有如下图的一些属性：width & height 用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。 padding 内间距，就是内容区域与外边框之间的距离。border ...
复制链接

扫一扫