核心提示：一、empty空元素的样式1、:empty { } 伪类选择符empty 2、:not(:empty) { } 伪类选择符not空元素样式显示二、xx_-of-type伪类选择符1、first-of-...
一、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单位的vwvh和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列做响应布局
原教程地址
