常用语法 – 博客

常用语法

磨砂玻璃效果

对于上层的元素：

backdrop-filter: blur(15px);

其中模糊程度可以在blur后面的参数重填写

将元素放置于正中间

.content{
  width: 100px;
  height: 100px;
  background-color: blue;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

其中content为想要实现居中的元素，body为外层

元素裁切

使用clip-path属性来实现，具体点击这里查看

⚠️注意不要使用clip属性，弃用的属性

对于要矩形裁切：

clip-path: inset(100px 50px);

备注：✅支持transition属性来进行动画变换

各种居中

水平居中

margin: 0 auto;

如果是fixed或者absolute布局，可以这样写：

left: 50%;
transform: translateX(-50%);

垂直居中

一般来说使用flex布局来实现

如果是fixed或者absolute布局，可以这样写：

top: 50%;
transform: translateY(-50%);

flex布局

横向布局

水平居中
```
justify-content: center
```
垂直居中
```
align-items: center
```

垂直布局

切换布局方式

flex-direction: column;

垂直居中和水平居中的代码与横向布局相反

响应式设计

譬如要实现这样的功能：
导航栏的默认显示为水平显示(Flex横向布局)，如果窗口宽度小于600像素的时候垂直显示

可以通过以下代码实现

/* 导航栏的默认样式*/
.navbar {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
}

/* 当窗口小于等于 600 像素时，改变导航栏的样式 */
@media screen and (max-width: 600px) {
  .navbar {
    float: none;
    display: block;
    text-align: left;
  }
}

关于响应式布局的详细，点击这里查看

百分比 - 像素

若要实现百分比减去像素，以下的示范是错误的

.box{
  height: 100% - 30px
}

正确的处理：

.box{
  height: calc(100% - 30px)
}

注意，减号两边都有空格

多余文本省略号

外层的container：

.container{
  /* 需要固定宽度 */
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

各种单位