CSS高级布局样式技巧

CSS高级布局样式技巧

一、empty空元素的样式

1、

:empty { }

伪类选择符

empty

2、

:not(:empty) { }

伪类选择符

not

空元素样式显示

二、

xx_-of-type

伪类选择符

1、

first-of-type

匹配同类型中的第一个同级兄弟元素.

2、

last-of-type

匹配同类型中的最后一个同级兄弟元素.

3、

nth-of-type(n)

匹配同类型中的第n个同级兄弟元素.

…3, 3n, odd, 2n+1…

4、

only-of-type

一个层级只能一个该类型, 否则样式无效

多层级有效

xx_-of-type

三、

calc

函数值来做流式布局

width: calc(100% - 15rem);

calc函数

四、

vh

和

vw

实现纯

css

动态大小

1、

vh

相对于视口的高度。视口被均分为100单位的vh

2、

vw

相对于视口的宽度。视口被均分为100单位的vw

vh和vw

五、

vh

和

vw

的全屏滚动网页应用

网页应用

六、

unset

做CSS重置

重置成上一层级样式，上一层级没设置该样式，Reset到默认样式

unset

七、

background-blend-mode

混合模式

八、column列做响应布局

nav {
/* column-count: 4;
column-width: 150px; */

columns: 4 150px;

column-gap: 2rem;
column-rule: 1px dashed #ccc;
column-fill: auto;
}

column列做响应布局

九、其他偏门但实用

1、去掉input聚焦默认边框样式
outline: none;

2、设置元素可编辑
contenteditable

3、禁止用户选中文本
user-select: none

4、Box-sizing让元素宽度、高度包含border、padding
box-sizing: border-size

5、calc计算值
width: calc(100% - 100px)

原教程地址