大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么使用内联CSS变量进行布局

本篇内容主要讲解“怎么使用内联CSS变量进行布局”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用内联CSS变量进行布局”吧!

专注于为中小企业提供做网站、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业宁强免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了数千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

怎么使用内联CSS变量进行布局

它是怎么工作的

在深入探讨这些概念之前,首先我们来回顾一下 CSS 变量的基础知识, 我们也可以将它称为“自定义属性”。

所有主流浏览器都支持CSS变量,下面是各个浏览器的支持情况:

怎么使用内联CSS变量进行布局

如果要定义CSS变量是全局变量,则需要将其添加到:root声明中(:root等效于)。 如果该变量特定于组件,则可以在该组内声明中定义它。

在下面的例子中,我定义了一个全局变量--size,它用于square 元素的宽度和高度。

:root {
    --size: 50px;
}

.square {
    width: var(--size);
    height: var(--size);
}

如果--size没有定义,要怎么办呢?在传递的变量无效的情况下,CSS 支持定义默认变量或回退变量。

在下面的例子中的 var(--size, 10px)。如果--size无效,则宽度和高度值将为 10px

.square {
    width: var(--size, 10px);
    height: var(--size, 10px);
}

除此之外,还可以在内联CSS样式中使用CSS变量。例如

HTML

CSS

.elem {
    background: var(--background);
}

接着, 我们以上述这些概念,还演示一些事例。

CSS网格示例

侧边栏和主内容

怎么使用内联CSS变量进行布局

在此设计中,我将CSS网格用于以下各项:

  • 边栏和主菜单

  • 表单项

  • 三列布局

侧边栏的宽度是固定的,主内容是变化。假设侧边栏的宽度是240px

1.边栏和主菜单

Html


    
    

Html

.o-grid {
    display: grid;
    grid-template-columns: var(--columns);
}

2. 表单项

按照设计,每行有两列,html 结构如下:

Html


  
  
     

CSS

.o-grid {
    display: grid;
    grid-template-columns: var(--columns);
}

3. 三列布局

在下面的示例中,我添加了--repeat-number:3--gap:8px作为内联CSS。 这些变量将添加到o-grid类,网格的设置将基于这些变量。

HTML


  
  
  

CSS

.o-grid {
  display: grid;
  grid-template-columns: repeat(var(--repeat-number), 1fr);
  grid-gap: var(--gap, 0);
}

我喜欢在CSS变量中添加默认值,以防变量没有被设置。在上面的代码中,我使用了var(--gap, 0),如果使用者没有提供--gap变量,则其默认值将为0

动态网格项:minmax

对我来说,这是一个广泛使用的用例,并且非常重要。我经常使用Grid minmax,但是当我在多个页面上使用它时,我遇到了一个问题。

让我们举一个不使用 CSS 变量的基本示例。

怎么使用内联CSS变量进行布局

在 CSS 中,我使用minmax为每个网格项目定义最小宽度250px

CSS

.o-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr);
  grid-gap: 16px;
}

现在,如果设计要求网格项目的宽度至少为300px,应该怎么做? 我需要创建类似以下版本吗?

.o-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

想象一下,有五个不同的网格,每个网格具有不同的项目宽度,所以以上不是正确的解决方案。

使用CSS变量,我可以执行以下操作

.o-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--item-width), 1fr);
    grid-gap: var(--gap);
}

在HTML中,就可以在标签上设置 CSS 变量:



     
     
     
     
     
     
     
     
     

Flexbox示例

在示例中,有一个文章标题,其中包含作者姓名和标签。 这些在页面中的排布方式是动态变化,所以需要一种快速切换这些布局方式的方法 。

HTML


    

Article title

             

By Ahmad Shadeed

        

Published under: CSS, Design

    

CSS

.article-header__meta {
    display: flex;
    justify-content: var(--justify);
}

有了它,我可以调整内联样式以将值更改为另一个关键字。 我发现这在进行快速原型制作甚至是制作网站时很有用。

按钮

按钮宽度

CSS 变量也适用于按钮元素。 假设有一个带有两个input字段和一个按钮的表单。

怎么使用内联CSS变量进行布局

我的目的是通过使用内联CSS变量来控制按钮的宽度。 有时,按钮应占据其父控件的100%宽度。

html

Submit

css

.c-button {
    /* Other styles */
    width: var(--width, initial);
}

怎么使用内联CSS变量进行布局

按钮颜色

另一个有用的用途是当有重影按钮(轮廓按钮)时。 按钮的颜色可以是任何颜色,通过使用CSS变量,可以轻松更改颜色。

HTML

Save Edits
Delete

CSS

.c-button--ghost {
  /* Other styles */
  background: transparent;
  color: var(--color, #000);
  border-color: currentColor;
}

怎么使用内联CSS变量进行布局

CSS 变量同样适合悬停效果。悬停时,按钮背景将变为纯色,并且字体颜色为白色。

怎么使用内联CSS变量进行布局

用户头像

每个角色的大小都不同,这非常适合用 CSS 变量来解决。假设有四个不同大小的用户头像。

怎么使用内联CSS变量进行布局

在CSS中,定义了以下样式:

.c-avatar {
  display: inline-block;
  margin-right: 2rem;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 3px 10px 0 rgba(#000, 0.2);
}

通过使用Calc()函数,我可以传递一个--size 变量,它将乘以一个基本宽度值,在HTML中定义 --size变量:




到此,相信大家对“怎么使用内联CSS变量进行布局”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


网页标题:怎么使用内联CSS变量进行布局
网页链接:http://dzwzjz.com/article/jcdesc.html