CSS盒子模型

CSS盒子模型

四个属性

每个盒子都有：边界(margin)、边框(border)、填充(padding)、内容(content)四个属性

每个属性都包括四个部分：上、右、下、左（依次顺序设置），四个部分可同时设置，也可分别设置

内容（content）就是盒子里装的东西，而填充（padding）就是盒子里装的泡沫或者其他抗震辅料，边框（border）就是盒子本身了，边界（margin）则是盒子与盒子间的距离。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ujwRBF9H-1657178692815)(C:\Users\allc\Pictures\Saved Pictures\Snipaste_2022-07-07_11-08-31.png)]

盒模型大小

CSS盒子模型具有弹性

高度：内容本身高度+上下内边距+上下外边框

宽度：内容本身宽度+左右内边距+左右外边框

元素的性质分为两类

块元素和行元素

<div style="background:red;">块元素</div>
<span style="background:grenn;">行元素1</span>
<span style="background:grenn;">行元素2</span>

块元素通常作为其他元素的容器

特征

行元素特征：

1.设置宽高无效

2.对于margin仅设置左右方向有效，上下无效，padding设置上下左右都有效，即会撑大空间

3.不会自动换行

块元素特征：

1.块元素会在浏览器中独占一行；可设置宽高，若不设置宽高，则他的宽度是100%（占满父级元素一整行）

2.margin和padding的上下左右对其都有效

3.会自动换行

4.多个块状元素标签写在一起，默认排序是从上到下

CSS浮动

float 属性定义元素在那个方向浮动，在CSS中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素。

float属性值

left：元素向左浮动

right：元素向右浮动

none：默认值，元素不浮动

inherit：规定应该从父级元素继承float属性的值

div{
	float: right;
}
.float{
	float: left;
}

clear 属性

clear属性规定元素的那一侧不允许其他浮动元素

clear属性值

left：在左侧不允许浮动元素

right：在右侧不允许浮动元素

both：在左右两侧均不允许浮动元素

none：默认值，允许浮动元素出现在两侧

inherit：规定应该从父级元素继承clear属性的值

div{
	clear: both;
	float: right;
}

值，允许浮动元素出现在两侧

inherit：规定应该从父级元素继承clear属性的值

div{
	clear: both;
	float: right;
}