跳到主要内容位置

2 篇文章 含有标签「css」

查看所有标签

· 预计阅读时间:1 分钟

CSS 中 inset 属性大部分人可能没听过也没用过,其实就是 top right bottom left 的简写方式

inset: 0; 等价于:

div {
top: 0;
right: 0;
bottom: 0;
left: 0;
}

同时 inset: 1px 2px; 等价于:

div {
top: 1px;
right: 2px;
bottom: 1px;
left: 2px;
}

inset: 1px 2px 3px; 等价于:

div {
top: 1px;
right: 2px;
bottom: 3px;
left: 2px;
}

inset: 1px 2px 3px 4px; 等价于:

div {
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
}

设置顺序依次为上、下、左、右,这点就和 margin padding 等属性的统一设置规则一样。

4 行缩成 1 行,在代码简化上,倒是起了很大的帮助。

· 预计阅读时间:1 分钟

最近遇到行内子元素垂直居中的需求,按照以往经验设置了子元素 vertical:middle 以及 display:inline-block,但是发现并没有效果。 几经周转查询了 vertical-align 的具体用法,发现主要是因为没有基线对照参照物,所以没有生效。

因此想到添加一个高度 100% 的空的行内元素,并且同时设置 vertical:middle 作为子元素的参照物。