使用css的calc + sass计算列宽 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

css中使用calc()计算宽高

calc()是什么？简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。...用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等， calc()语法 calc的语法就是简单的四则运算，使用“+”、...“-”、“*” 和 “/”四则运算；可以使用百分比、px、em、rem等单位；可以混合使用各种单位进行计算；表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em...“firefox for android 14.0”支持. calc()的用途主要用于计算不确定值，例如一个外边距为10px,宽度为100%的元素，这种情况我们怎么设置呢？...4、% % 百分比，相对长度单位，相对于父元素的百分比值元素宽高与字体大小使用区别：（1）尽量使用相对尺寸单位使用相对尺寸单位计量，则在调整页面的布局的时候，不需要遍历所有的内部DOM结构，重新设置内部子元素的尺寸大小

2861 0

CSS 计算属性 calc()的完整指南（下）

从之前的文章：CSS 计算属性 calc()的完整指南(一），我们可以学习到几个方面： calc() 只作用于属性值 calc() 用于长度和其他数值不能在媒体查询中使用混合单位与预处理器数学比较...如果我的工作对你有帮助，希望可以点个赞和收藏分享。显示数学即使你没有使用只有calc()才能实现的功能，也可以用它在CSS里面 "展示你的工作"。...除了calc()能够混合单位的惊人能力之外，calc()的下一个最棒的地方就是与自定义属性一起使用。自定义属性可以有一些你在计算中使用的值。...自定义属性，然后让CSS的其他部分根据需要使用它们，大量的配置发生在顶部。...用例方我问了一些CSS开发者最后一次使用calc()是什么时候，这样我们就可以在这里品味一下其他人在日常工作中是如何使用它的。

1.9K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

巧用CSS3的calc()宽度计算做响应模式布局

其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。...比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。...不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。 calc()能做什么？...calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素div的宽度值到底是多少...calc()的运算规则 calc()使用通用的数学运算规则，但是也提供更智能的功能：使用“+”、“-”、“*” 和 “/”四则运算；可以使用百分比、px、em、rem等单位；可以混合使用各种单位进行计算

1.9K1 0

如何使用SASS编写可重用的CSS

Sass 是一个CSS预处理程序，至今使用广泛，它之所以流行，是因为它修复了几个CSS缺陷： Sass 也是 Bootstrap 4 运行的基础。...当使用CSS时，我们经常在一个全局环境设置，这样可能会错误地设置元素的样式。自定义CSS(即使有CSS变量)仍然是非常冗余的。...安装 sass sass 的安装方式有很多种，可以查看这个地址，这里我们使用 npm 安装： npm install -g sass CSS 存在哪些问题？...在则开始学习前端基础知识时，我们会接触到传统的 CSS，涉及到使用类或id之类的标识符来处理和操作HTML元素。在使用CSS的时候，我们经常需要修改样式来实现预期的要求。...SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。

8.3K2 0

CSS之 sass、less、stylus 预处理器的使用方式

更详细区别参考文档：https://blog.csdn.net/pedrojuliet/article/details/72887490 使用变量：　　sass：使用符号定义变量，如： base_color...: #efefef 　　 less：使用 @ 符号定义变量，如：@base_font_size: 16px 　　stylus: 对变量没有任何设定（变量不能以@符号开头），变量之间可以使用 “=”，...{type} */ body { background: #000; } xxx css文件 @ import "1.css"; @ import "file....: #092873; } 继承：当我们需要为多个元素定义相同的样式的时候，我们可以考虑使用继承的做法　　sass继承：通过 @extend来实现代码组合声明（stylus也可以使用此方法实现继承） ....经常要在多个元素中使用时，可以为这些共用的css定义一个Mixin，然后在需要的地方引入该Mixin即可　　sass语法: /* 定义一个混入语法，接受一个变量，默认值为2px，可选 */ @mixin

1K4 0

【Sass学习笔记】005-Sass 的基本特性-运算

五、Sass 的基本特性-运算程序中的运算是常见的一件事情，但在 CSS 中能做运算的，到目前为止仅有 calc() 函数可行。但在 Sass 中，运算只是其基本特性之一。...众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。...{ width: $width / 10; } 5 变量计算在 Sass 中除了可以使用数值进行运算之外，还可以使用变量进行计算，其实在前面章节的示例中也或多或少的向大家展示了。...在 Sass 中使用变量进行计算，这使得 Sass 的数学运算功能变得更加实用。...Grid 单列列宽的运算。

1391 0

2021年 CSS 使用趋势

计算下面是使用calc()函数的最常用的属性： image.png 去过去几年一样，最常用的用法calc()是用来设置width的。...下面是calc()函数中最常用的长度单位： image.png calc()函数中单位数量的分布如下： image.png calc()值是相对简单的，绝大多数使用两种不同单位进行计算，例如从百分比值的计算结果中减去像素...同时，Grid 布局的采用率每年都在会翻倍，从 2% 到 4%，现在是 8%。 2. 多列布局使用多列布局的页面的百分比：20%。...不存在的属性最常见的不存在的属性如下： image.png 十三、预处理器Sass Sass是最流行的CSS预处理器之一，最常用的 Sass 函数调用如下： image.png 可以发现， Sass...统计发现，87% 的 Sass 样式表使用了规则嵌套。

1.2K1 0

从bootstrap源码中学习Sass（一）

相比@error，它不阻止程序继续运行 // 避免使用者传递现在已弃用的旧参数，或者以不太理想的方式调用你的 API @warn "First breakpoint in #{$...== true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);}在Sass中，calc()与CSS calc(...)的语法相同，但具有使用 Sass 变量和调用 Sass 函数的附加功能。...这意味着/始终是计算中的除法运算符！参考资料：sass中!default和!.../post/7108948522153541662calc()：https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc更多资料Sass文档:中文文档，

1630 0

Excel与pandas：使用applymap()创建复杂的计算列

标签：Python与Excel,pandas 我们之前讨论了如何在pandas中创建计算列，并讲解了一些简单的示例。...通过将表达式赋值给一个新列（例如df['new column']=expression），可以在大多数情况下轻松创建计算列。然而，有时我们需要创建相当复杂的计算列，这就是本文要讲解的内容。...pandas applymap()方法 pandas提供了一种将自定义函数应用于列或整个数据框架的简单方法，就是.applymap()方法，这有点类似于map()函数的作用。...注意下面的代码，我们只在包含平均值的三列上应用函数。因为我们知道第一列包含字符串，如果我们尝试对字符串数据应用letter_grade()函数，可能会遇到错误。...图3 我们仍然可以使用map()函数来转换分数等级，但是，需要在三列中的每一列上分别使用map()，而applymap()能够覆盖整个数据框架（多列）。

5.3K1 0

建议收藏！总结了 42 种前端常用布局方案

使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px); } .right { /* 2....使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px); /* 3....使用calc函数实现使用 calc 函数实现的方式会比较简单，中间的容器最少高度为视口宽度的100% - 头部和底部两部分的高度即可完成该功能。...使用calc函数实现实现步骤如下：通过 calc 函数计算出中间容器的高度。中间出现滚动条的容器设置overflow: auto即出现滚动条的时候出现滚动条。...实现CSS代码如下： .content { overflow: hidden; /* 通过 calc 计算容器的高度 */ height: calc(100vh - 200px)

4.8K3 0

建议收藏！总结了42种前端常用布局方案

使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px); } .right { /* 2....使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px); /* 3....使用calc函数实现使用 calc 函数实现的方式会比较简单，中间的容器最少高度为视口宽度的100% - 头部和底部两部分的高度即可完成该功能。...使用calc函数实现实现步骤如下：通过 calc 函数计算出中间容器的高度。中间出现滚动条的容器设置overflow: auto即出现滚动条的时候出现滚动条。...实现CSS代码如下： .content { overflow: hidden; /* 通过 calc 计算容器的高度 */ height: calc(100vh - 200px)

4.8K3 0

CSS预编译技术之SASS学习经验小结

[FungLeo原创]CSS预编译技术之SASS学习经验小结前言接触CSS是05年.使用xhtml+css开发是06年.但真正全面采用xhtml+css开发却是08年开始的.因为居于三线城市,比一线程序的前驱者还是晚了一些...我这段文字的意义就是告诉你: %cf不仅仅有%cf这一种写法,还可以写成 .cf 具体用哪个,就看你在项目中的实际需求了! @mixin 混入代码如何使用 calc() 计算属性?...}: calc(#{$expression}); } /* 调用 */ .test { @include calc(width, "25% - 1em"); } 虽然现在CSS3在移动端的支持非常好...,但是,还是不能滥用这个属性,因为安卓4.4以下不支持 calc\vw\vh 等属性,并且,即便你的手机是最新的系统,但如果你使用某些国产浏览器,还可能不支持这些东西.比如猎豹和某些微信版本自带的浏览器...出处:SASS\SCSS 避免运算的方法另外,由于CSS本身支持/号,因此,在使用除法运算的时候就要特别注意.括号,是解决这个问题的好方法.

5962 0

如何提升CSS技术？8个硬核技巧带你迅速提升CSS技术

VSCode还需安装Live Sass Compiler和Live Server两个插件。Live Sass Compiler用于实时编译sass/scss文件为css文件。...清晰易读：对于那些结构与行为分离的写法，使用sass/less编写属性时结构会更清晰易读，减少很多无用或少用的类，保持css文件的整洁性和观赏性确保一致：减少修改类而有可能导致样式失效的问题，有时修改类但未确保...，就不使用float + margin-left的方式了，若使用margin-left还得结合左中列宽度计算。...相同中间列放首位且声明其宽高占满父节点被挤出的左右列使用float和margin负值将其拉回与中间列处在同一水平线上不同圣杯布局：父节点声明padding为左右列留出空位，将左右列固定在空位上...N列就用公式100 / n求出最终百分比宽度，记得保留2位小数，懒人还可用width:calc(100% / n)自动计算呢。

2.4K4 0

8个硬核技巧带你迅速提升CSS技术

VSCode还需安装「Live Sass Compiler」和「Live Server」两个插件。Live Sass Compiler用于实时编译sass/scss文件为css文件。...「清晰易读」：对于那些结构与行为分离的写法，使用sass/less编写属性时结构会更清晰易读，减少很多无用或少用的类，保持css文件的整洁性和观赏性「确保一致」：减少修改类而有可能导致样式失效的问题，...> 为了让右列宽度自适应计算，就不使用float + margin-left的方式了，若使用margin-left还得结合左中列宽度计算...相同中间列放首位且声明其宽高占满父节点被挤出的左右列使用float和margin负值将其拉回与中间列处在同一水平线上不同圣杯布局：父节点声明padding为左右列留出空位，将左右列固定在空位上...N列就用公式100 / n求出最终百分比宽度，记得保留2位小数，懒人还可用width:calc(100% / n)自动计算呢。

3.1K3 0

引人瞩目的 CSS 变量（CSS Variable）

一直以来我们都知道，CSS 中是没有变量而言的，要使用 CSS 变量，只能借助 SASS 或者 LESS 这类预编译器。...Demo戳我 -- CSS变量的组合使用 CSS 变量与计算属性 calc( ) 更有趣的是，CSS 变量可以结合 CSS3 新增的函数 calc( ) 一起使用，考虑下面这个例子： CSS...，CSS 变量配合 calc 函数，得到的最终结果是 text-indent:100px 。...calc( )也是一个处于实验中的功能，使用需要慎重。 Demo戳我 -- CSS 变量与 Calc 函数的组合 CSS 变量的用途 CSS 变量的出现，到底解决了我们哪些实际生产中的问题？...之前的 LESS、SASS预处理器的变量系统就是完成这个的，现在 CSS 变量也能轻松做到。

8663 0

calc

calc( )的定义用于动态计算长度值可以用在任何长度,数值,时间,角度,频率等处 calc( )的运算符＋－＊／ width:calc(50% + 15px); height:calc(100%...)使用区分 //1. css中 width:calc(100% - 20px); //2. scss中 $base-font-size: 37.5px; @function...: calc((100% - #{$a}*#{$b})/#{$c} ); line-height: calc(1*20/14); //⚠️sass中calc 不能单独识别“/”,也就是不能单独识别除法...，解决这种问题有两种做法：0+表达式，或者1*表达式 calc( )应用例子在移动端／pc端，会有一屏展示，并局部实现滚动的效果，此时使用calc( )进行滚动区域高度计算，就可以完美适应所有机型，而不需要再使用...js动态计算等分区域或等比区域的页面划分，通常使用弹性盒子，但是calc( )也可以很好解决这个问题元素居中问题

1.4K3 0

CSS奇思妙想 -- 使用 CSS 创造艺术

之前有过一篇：在 CSS 中使用三角函数绘制曲线图形及展示动画想写一篇关于 CSS 创造艺术的文章已久，本文主要介绍如何借助 CSS-doodle ，利用 CSS 快速创造美妙的 CSS 图形。...CSS 代码写着太累，所以我们简单的借助 pug HTML 模板引擎和 SASS。...使用 CSS-doole 实现多元素水平垂直居中布局我们将上面的布局利用 CSS-doodle 再实现一次，要实现 50个元素的居中对齐，只需要如下简单的声明即可： css-doodle> :doodle...: calc(100% - @calc(@index() - 1) * 2%) 表示每个子元素宽高的大小（也可以单独设置高宽），@index 是个变量，表示当前元素的序号，从 1 - 50，表示没个元素分别为容器的...2% 高宽、4% 高宽一直到 100% 高宽。

6792 0

CSS实现垂直居中布局

父元素定宽高 position+margin 使用margin: auto使水平居中，将子容器设定为relative以在不脱离文档流的情况下偏移50%，由于本身子容器占用一定宽高，会将其撑下，使用margin...若是子容器使用absolute定位，则父容器应设置为relative，否则会其相对于static定位以外的第一个父元素进行定位，在本Demo中会以浏览器为基准定位；此外absolute无法使用margin...父元素定宽高 position+transform 原理与position+margin相同，CSS3的transform使得div向上平移自身高度的50%。宽高 position+calc css3提供calc函数，能够进行动态计算的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

2.1K3 0

css精髓：这些布局你都学废了吗？

1 2列布局 2列布局的使用频率也非常高，其实现效果主要就是将页面分割成左右宽度不等的两列。一般宽度较小的一列会设置为固定宽度，作为侧边栏之类的，而另一列则充满剩余宽度，作为内容区。...在后台管理系统及api文档中使用较为广泛。效果图先来看看效果：代码实现实现两列布局的方法有很多，这里主要介绍两种方法。 calc函数 calc() 函数用于动态计算长度值。...实现思路很简单，侧边栏宽度固定，设置绝对定位，使其脱离文档流，内容区域通过calc()函数计算剩余宽度并设置宽度，再加一个margin-left，值为侧边栏的宽度。...3 列布局在日常开发中使用频率也是很高的，其按照左中右的顺序进行排列，通常中间列最宽，左右两列次之。...每一个页面都要重新计算一次，这是很麻烦的，所以这种方法虽然简单但却是不推荐的。使用flex布局这种方法就是利用flex布局对视窗高度进行分割。

1.2K3 0

前端常用布局方案总结

两列布局所谓的两列布局就是一列定宽，一列自适应的布局。... 最终实现的效果如下： 1. float+calc()函数完成左列定宽右列自适应步骤如下： (1)....background-color: #d9480f; height: 400px; /* 使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%...使用calc函数实现使用 calc 函数实现的方式会比较简单，中间的容器最少高度为视口宽度的100% - 头部和底部两部分的高度即可完成该功能。...使用calc函数实现实现步骤： (1). 通过calc 函数计算出中间容器的高度。 (2). 中间出现滚动条的容器设置overflow: auto，即根据内容自动出现滚动条。

3K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭