【22】CSS核心样式（3）——盒模型5种属性

倏存

已于 2022-03-27 12:16:21 修改

阅读量7.9k

点赞数 7

分类专栏：前端基础文章标签： css 原力计划

于 2021-03-29 22:42:20 首次发布

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115312043

版权

盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度 width、高度 height、内边距 padding、边框 border、外边距 margin。
为了更好理解，如下生活中的举例：

常见盒模型区域

盒模型的属性中，根据不同属性的效果，可以划分区域：
（1）书写元素内容区域：width+height
（2）盒子可以实体化的区域：width+height+padding+border
（3）盒子实际占位的位置：width+height+padding+border+margin

学习过程中，学会查看浏览器控制台中的盒模型图：

一、宽度 width

宽度 width属性	说明
属性名	width
作用	设置可以添加元素内容的区域的宽度

属性值	属性值说明
auto（默认值）	浏览器可计算出实际的宽度
px像素值	定义的宽度
%	定义参考父元素宽度 width 的百分比宽度

特殊应用

（1）如果一个元素不添加width 属性，默认属性值为auto；不同的元素浏览器会根据其特点自动计算出实际宽度；
例如<div> 元素等独占一行的，其 width 属性的值会自动撑满父元素的 width 区域；
如果是 <span> 元素等不需要独占一行的，其 width属性的值是内部元素内容自动撑开的宽度。
（2）<body> 元素比较特殊，不需要设置 width属性，宽度会自动适应浏览器窗口的宽度。