盒子模型

顺序定义

在盒子模型中，无论是 margin、padding：

如果为 1 个值，同时设置四个边；

如果为 2 个值，设置依次为上下、右左；

如果为 3 个值，设置依次为上、右左、下；

如果为 4 个值，设置顺序依次为:上、右、下、左。

border 较特殊，需单独设置其四个边的宽度及样式

边距

外边距

居中设置

margin 的默认值为0，设置 auto 后，元素会自动居中。

边距合并

相邻元素的纵向外边距会进行合并。纵向合并的边距去边距最大的边距。如上边元素底部外边距是 20px，下边元素顶部外边距是 30px，则取下边元素的上外边距，而不是上下元素合并的 50px 外边距

内边距

padding

box-sizing

宽度与高度包括内边距与边框。

content-box:

.down {
	box-sizing: content-box;
	border: 1px solid red;
	height: 100px;
	width: 100px;
	margin: 30px 6px 10px;
}

border-box:

.down {
	box-sizing: border-box;
	border: 1px solid red;
	height: 100px;
	width: 100px;
	margin: 30px 6px 10px;
}

边框

border-style用于设置边框样式。border-width用于设置宽度，border-color用于设置颜色。简写使用border。border-radius定义圆角。

<style>
	.down {
		border-radius: 50%;
		width: 112px;
		border-bottom: solid 2px red;
	}
</style>
<p class="down">底边圆角就是这样</p>

底边圆角就是这样

轮廓线

表单元素在获取焦点时产生，并且轮廓线不占用空间。可以使用伪类 :focus 定义样式。

• 轮廓线显示在边框外面
• 轮廓线不影响页面布局
• 轮廓线是和外边框重合的，也就是说和 margin 可以重叠。
• 表单默认具有轮廓线，但有时并不好看，使用以下样式规则去除，即outline:none。

<style>
	.love-outline {
		height: 100px;
		width: 100px;
		margin: 15px;
		border: 2px solid red;
		outline: 15px solid blue;
	}
</style>
<p class="love-outline">轮廓线</p>
<hr />

轮廓线

---

display

使用 display 控制元素的显示机制。

选项	说明
none	隐藏元素
block	显示为块元素
inline	显示为行元素，不能设置宽/高
inline-block	行级块元素，允许设置宽/高

visibility

控制元素的显示隐藏，在隐藏后空间位也保留。

<style>
	article.love-show-hidden {
		padding: 30px;
		border: solid 2px red;
		width: 200px;
	}
	article.love-show-hidden div {
		width: 100px;
		height: 100px;
		border: solid 2px red;
		padding: 20px;
	}
	article.love-show-hidden div:nth-of-type(1) {
		visibility: hidden;
	}
</style>

<article class="love-show-hidden">
	<div>空间位</div>
	<div>显示元素</div>
</article>

空间位

显示元素

溢出控制

隐藏控制

overflow

选项	说明
hidden	溢出内容隐藏
scroll	显示滚动条（有些浏览器会一直显示，有些在滚动时显示）
auto	根据内容自动处理滚动条

文本溢出省略号控制：

<style>
	.overflow-ellipsis {
		width: 400px;
		height: 100;
		border: solid 2px #ddd;
		padding: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
<p class="overflow-ellipsis">
	对担负推进改革重要职责的领导干部，总书记提出明确要求：“要增强政治责任感、历史使命感，以攻坚克难、迎难而上的政治勇气，直面矛盾问题不回避，铲除顽瘴痼疾不含糊，应对风险挑战不退缩，奋力打开改革发展新天地。”
</p>

对担负推进改革重要职责的领导干部，总书记提出明确要求：“要增强政治责任感、历史使命感，以攻坚克难、迎难而上的政治勇气，直面矛盾问题不回避，铲除顽瘴痼疾不含糊，应对风险挑战不退缩，奋力打开改革发展新天地。”

尺寸

可以使用多种方式为元素设置宽、高尺寸。

选项	说明
width	宽度
height	高度
min-width	最小宽度
min-height	最小高度
max-width	最大宽度
max-height	最大高度
fill-available	撑满可用的空间
fit-content	根据内容适应尺寸

min&max

主要用于处理比例设置

fit-content

下面是根据内容自动适应宽度，让元素居中显示的效果。

<style>
	.fit-content-main {
		background: #9b59b6;
		height: 100px;
		padding: 20px;
		box-sizing: border-box;
	}

	.fit-content {
		background: #e67e22;
		margin: auto;
		width: fit-content;
		height: 100%;
	}
</style>
<div class="fit-content-main">
	<div class="fit-content">自适应内容显示宽度</div>
</div>

自适应内容显示宽度

max-content

使用max-content 将容器尺寸按最大元素宽度设置。

<style>
	.content-main {
		background: #9b59b6;
		margin: auto;
		width: max-content;
	}
	.max-content-long {
		background: orange;
		margin: auto;
		padding: 10px;
	}
	.min-content-short {
		background: orange;
		margin-top: 20px;
		padding: 10px;
	}
</style>

<div class="content-main">
	<div class="max-content-long">long content show .....</div>
	<div class="min-content-short">short content</div>
</div>

long content show .....

short content

min-content

容器尺寸按子元素最大的单个单词的宽度设置，原理同上。