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)

---

原教程地址