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);
四、vh
和vw
实现纯css
动态大小
- 1、
vh
相对于视口的高度。视口被均分为100单位的vh - 2、
vw
相对于视口的宽度。视口被均分为100单位的vw
五、vh
和vw
的全屏滚动网页应用
六、unset
做CSS重置
- 重置成上一层级样式,上一层级没设置该样式,Reset到默认样式
七、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;
}
九、其他偏门但实用
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)
原教程地址