深入理解CSS盒子模型与弹性布局：从基础到高级应用,-CSDN博客

本文链接：https://blog.csdn.net/new_light123/article/details/136992358

盒子模型

概念理解

盒子模型： CSS为了对HTML元素进行排版布局，从而抽象出的一个模型

CSS元素的分类（HTML中对应CSS的标签）

块级元素：独占一行，对宽度，高度支持 display:block 举例：div，h1~h6，ul，li
内联元素：不独占一行，对宽度高度不支持；内容多长占据多大的空间 diaplay:inline 举例：a，span
内联块级元素：不独占一行，但是对宽度高度支持 display:inline-block 举例：img，table

盒子模型，存在默认值
块级元素自带属性display:block
内联元素自带属性display:inline
内联级元素自带属性diaplay:inline

但是可以通过display属性修改

如果修改display属性为inline，div也会具备内联级元素(比如span)的特征

在这里插入图片描述

说白了，盒子模型就是display属性的修改

盒子模型的内部结构

盒子模型的构成
来源自https://www.runoob.com/css/css-boxmodel.html
content：内容区，主要放置我们想要的内容，比如文字，图片等
padding：填充区，边框区以里，内容区以外的部分；填充区的内边距，内容与内容边界的间距，可以让内容变好看
border：边框区，可以设置边框的样式
margin：外边框区，可以设置上下左右的居中

填充区，边框区，外边框区默认宽度都是0

不同区域相关的属性

content:

width，height，一般就是修改这两个指标
重点：width，height默认只对内容区起作用

padding

在这里插入图片描述
通过外围增加区域形成内容填充，不是内容缩了

padding元素用法：以上为开始，顺时针旋转，不够4个的直接对称

.div{
   
   
    padding:10px// 上下左右
    padding:10px 20px// 上下，左右
    padding:10px 20px 30px// 上，右，下，左
    padding:10px 20px 30px 40px// 上，下，左，右