封面图加载中

2023年应该重新定义的CSS习惯（三）：元素比例属性、简写框距属性

在上一期我们学习了数学函数和选择器的使用，现在我们换一个思维，将知识点搬到实际的应用元素中，了解2023年应该使用的新属性，本期依然采用截止到2023年前的兼容性良好的属性，请各位放心“食用”。
  • 文章作者
  • 文章发布日期2023年3月8日 12:34
  • 热度41396
  • 本文共计3205字
  • 预计阅读17分钟

在上一期我们学习了数学函数和选择器的使用，现在我们换一个思维，将知识点搬到实际的应用元素中，了解2023年应该使用的新属性，本期依然采用截止到2023年前的兼容性良好的属性，请各位放心“食用”。

元素比例属性

在以前我们将一个元素按照自定义的比例展现在html面前时，例如我想嵌入一个iframe框架的视频，并且以16:9的形式展现出来。我们以B站举例，这时通常会使用两种方式，如下：

<iframe id="bilibili" src="https://player.bilibili.com/player.html"></iframe>

方式一 JS处理
	document.getElementById("bilibili").style.height=document.getElementById("bilibili").scrollWidth*0.56+"px";
	获取元素高度并对并且设置宽度×0.56，为什么是0.56呢？因为9/16 = 0.56

方式二 CSS处理
	我们首先对iframe外部嵌套一个父元素div
	<div>
		<iframe></iframe>
	</div>
	然后设定下述CSS属性
	div {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 56%;
	}
	iframe {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	这样操作的意思是对父元素的高度做空，然后设定padding撑起高度，因为padding会随着宽度自动增大56%的高度，这样就始终保持着16:9的样子。然后，让子元素通过定位的方式在父元素展开即可。

上述的两种方式都可以实现出我们想要的结果，但无论是更改html结构还是使用大量的JS和CSS，使用起来都很复杂。而现在aspect-ratio的出现，为我们只需要一行CSS就可以实现。

<iframe id="bilibili" src="https://player.bilibili.com/player.html"></iframe>

新方式 CSS处理
	iframe {
		width: 100%;
		aspect-ratio: 16 / 9;
	}

书写方式

它的书写规则十分简单，例如：

aspect-ratio:	auto;	// 保持原有的纵横比
aspect-ratio:	16 / 9;	// 纵横比为 16:9
aspect-ratio:	5 / 4;	// 纵横比为 5:4

"/" 和后面的高度比可以省略，默认为 1 ：

aspect-ratio:	1;	// 纵横比为 1:1
aspect-ratio:	4;	// 纵横比为 4:1

aspect-ratio兼容性

2023年的aspect-ratio兼容性十分良好

框距简写属性

在以前我们对一些边边框框的属性都会使用上右下左的方式去书写，例如：

border-top	border-right	border-bottom	border-left
margin-top	margin-right	margin-bottom	margin-left
padding-top	padding-right	padding-bottom	padding-left

然后会使用CSS2就有的简写属性，遵循上右下左的规则。

border:	top	right	bottom	left
margin:	top	right	bottom	left
padding:	top	right	bottom	left

inline和block

上述使用同一个属性，对上右下左同时定义固然方便，尤其在4个属性相同时的情况。但如果不影响其他方向的属性时，就比较麻烦了。例如有一个img标签：

img {
	margin-top:	1rem;
	margin-right:	2rem;
	margin-bottom:	3rem;
	margin-left:	2rem;
	// 简写为	margin: 1rem 2rem 3rem 2rem;
	// 或写为	margin: 1rem 2rem 3rem;
}

这时，我想让class为tree的img左右边距为0，并且不影响上下边距。那么我们通常会有两种处理方式：
方式1：
	img.tree {
		margin-right: 0;
		margin-left: 0;
	}
方式2：
	img.tree {
		margin: 1rem 0 3rem;
	}

上述方式看似比较理解，但都有弊端。方式1，会增加代码量。方式2，虽然代码简短，但将margin四个方向锁死，如果更改img统一属性时，那么则不会像方式1同步过来。所以这时*-inline和*-block诞生出来，只需要一行margin-inline省略了margin-right和margin-left。同理margin-block省略了margin-top和margin-bottom。

新方式
	img.tree {
		margin-inline: 0;
	}

含义如下（默认顺序）
	*-block =	*-top	和	*-bottom
	*-inline =	*-left	和	*-right

	* 表示可适用于margin、padding、border和inset

它们的命名方式也十分容易理解，inline即为行，block即为竖（虽然它的直译是块）。换句话说，inline默认是从左往右水平排列，block默认是从上往下垂直排列。

inset

在定位布局下的 left top right bottom 也有简写方式，如下：

div {
	position: fixed;

	left: 0;	top: 0;	right: 0;	bottom: 0;
	// 简写为 inset: 0;

	top: 0; bottom: 0;
	// 简写为 inset-block: 0;
	
	left: 0; right: 0;
	// 简写为 inset-inline: 0;
}

单独定义

inline和block规则可以单独定义上右下左。它以*-start和*-end来区分方向，例如*-inline-start就表示内联元素排列方向的起始位置，既左侧。*-inline-end就表示内联元素排列方向的终止位置，既右侧。但有不同的情况发生不同的含义，例如：

  • 如果我们设置direction:rtl（水平文档流方向从右往左），此时start对应的就是右侧，end对应的就是左侧。
  • 如果我们设置writing-mode:vertical-rl（文档流改为垂直且从右往左排列），此时内联元素是从上往下排列的，inline就变成了垂直方向，block则为水平方向。
div {
	top: 0;	bottom: 0;	left: 0;	right: 0;
	// 简写为 inset: 0;
	// 此时我想top为1rem
	inset-block-start: 1rem;
}

含义如下（默认顺序）
	*-block-start	=	*-top
	*-block-end	=	*-bottom
	*-inline-start	=	*-left
	*-inline-end	=	*-right

	* 表示可适用于margin、padding、border和inset

上述方式虽然增加了更多的定义，但我认为在中文环境下的默认顺序里意义不大，可直接使用原有属性。

简写兼容性

inline和block兼容性
inset兼容性

结语

愉快的第三期结束了，快去简化你的CSS吧。下期我们一起将视角转到文字和段落上，CSS关于文字和段落的处理更加有趣，众多的属性已经不是一个font就可以解决的了。下面插一个本期学习的实例：

在以前居中一个fixed布局有两种设置方式：

方式1
	div {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
方式2
	div {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

新方式
	div {
		position: fixed;
		inset: 0;
		margin: auto;
	}

注：上述div在已规定width和height情况下才可适用。