CSS3中使用calc()设置宽度和高度

最新推荐文章于 2024-08-20 23:30:49 发布
最新推荐文章于 2024-08-20 23:30:49 发布
阅读量2.1k 收藏 4
点赞数 2
文章标签： 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/modouer/p/8526804.html
版权

设置宽度：width:calc(100vw - 123px);

说明：1、vw是width of view(port)的缩写；

　　　2、100vw表示百分之百的视图宽度；

　　　3、123px是需要减去的宽度；

　　　4、减号的两边必须都有至少一个空格。

设置高度：height:calc(100vh-123px);

说明：1、vh是height of view(port)的缩写；

　　　2、100vh表示百分之百的视图高度；

　　　3、123px是需要减去的高度；

　　　4、同理减号的两边必须都有至少一个空格。

注意：切勿写成 calc(100%-123px)

转载于:https://www.cnblogs.com/modouer/p/8526804.html

weixin_30565327
关注
CSS3自动计算宽度calc()函数
weixin_43983960的博客
07-05 3550
定义与用法 calc() 函数用于动态计算长度值 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-”, “*”, “/” 运算； calc()函数使用标准的数学运算优先级规则； 语法 此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。 width: calc(100% - 80
calc设置宽度的坑
m0_60319327的博客
07-30 188
问题如图，宽度设置为calc（）如图一，但是右侧有内容会被挤变形如图二。 解决办法同时设置min-width
css中怎样使calc计算的高度生效？
金木AI
08-20 694
在这两个示例中，calc() 函数都可以正常计算子元素的高度，并且该高度基于父元素的高度进行计算。第一种情况下，父元素的高度是固定的 500px，而第二种情况下，父元素的高度是视口高度的 50%。对于计算后的高度要生效，通常父元素需要具备一定的高度定义。2、百分比高度：如果父元素的高度是百分比，那么其父元素（祖先元素）也需要有固定高度或百分比高度，最终回溯到一个具有固定高度的元素。3、vh 单位：父元素可以使用 vh（视口高度单位）来设置高度，这样子元素的 calc() 计算也可以生效。
css3的calc计算宽高函数用法
weixin_45610510的博客
09-28 1511
简介： calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。 calc()能给元素的做计算，可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说：width:calc(50% + 2em) calc()的语法： .elm...
CSS3中使用calc()设置浏览器宽度和高度减去固定值的写法
元仙僧的博客
08-04 8851
设置宽度：width:calc(100vw - 123px); 说明：1、vw是width of view(port)的缩写； 2、100vw表示百分之百的视图宽度； 3、123px是需要减去的宽度； 4、减号的两边必须都有至少一个空格。 设置高度：height:calc(100vh-123px); 说明：1、vh是height of view(port)的缩写； 2、100vh表示百分之百的视图高度； 3、123px是需要减去的高度； 4、同理减号的两边必须都有至少一个空格。 注意：切勿写成 calc(1
巧用CSS3的calc()宽度计算做响应模式布局的方法
01-19
比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算...
详解CSS 3 中的 calc() 方法
09-24
在CSS 3中，`calc()`函数是一种强大的计算属性值的方法，它允许开发者动态地计算长度、频率、角度、时间、百分比、数值等。这个功能对于布局和响应式设计尤其有用，因为它允许我们根据需要精确调整元素的尺寸。本文...
CSS使用calc()获取当前可视屏幕高度的实现
11-19
CSS3引入了新的功能来实现这一目标，其中包括相对长度单位和`calc()`函数。下面将详细介绍这些概念以及如何使用它们来获取并利用当前可视屏幕的高度。 首先，我们来看一下CSS3的几种相对长度单位： 1. **em**：em...
使用CSS3中的calc()属性来以算式表达尺寸数值
09-24
CSS3中的calc()属性是实现动态布局的一种便捷工具，它允许开发者在CSS的属性值中使用算术表达式来计算元素的尺寸，包括长度、宽度、高度等。这为响应式网页设计提供了很大的灵活性。 calc()的运算规则非常直观，它...
css3使用calc()计算高度的用法
weixin_45115895的博客
09-18 3281
使用vue进行移动端h5开发时,底部tabbar封装成了公共组件进行使用,计算页面高度时使用100%减去tabbar高度,一直不起作用,今天终于发现自己错在哪里了,真是被自己蠢哭 表达式中有“+”和“-”时，其前后必须要有空格,我没有留空格,然后修改了一下写法,问题解决了 还是自己太粗心,对这些基本用法没有深入了解,只知道有这么个东西,导致被困惑许久 网上搜索的一篇文章个人认为写的还是挺全面的 链接如下:链接: https://www.cnblogs.com/gwkzb/p/12524682.html. 内
css 中动态获取宽度,css中的calc动态计算长度值
weixin_36085931的博客
08-03 1万+
1 场景css的样式中，存在动态计算长度的需求。2 方案使用css中的calc函数动态计算css中的长度值。语法：calc(expression)参数说明：值描述expression必须，一个数学表达式，结果将采用运算后的返回值。3 使用如需将元素设置为父容器的中间，元素大小为200px;100px;传统的通过margin属性，设置负外边距移动自身高度和宽度的一半距离：.context{posit...
CSS3 使用 calc() 计算高度 vh px
热门推荐
Ranx的博客
09-28 13万+
1、px     像素，我们在网页布局中一般都是用px。 2、百分比    百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。 3、Viewport     viewport：可视窗口，也就是浏览器。     vw Viewport宽度， 1vw 等于viewport宽度的1%     vh Viewport
css3页面宽度自适应设置
yangke_2008_good的专栏
03-01 711
@media only screen and (max-width: 1920px) { #container { width: 1672px; } } @media screen and (max-width: 1600px) { #container { width: 1352px; } } @media screen and (max-width: 1440px) { #container { width: 11.
CSS3使用calc() 计算高度和宽度 vh px
陆柏熺
05-17 8510
Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的数学运算规则，但是也提供更智能的功能： Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1%...
width:100vh有感而发
凯子的专栏
02-27 2万+
在看一个网页的代码是看到 width:100vh  纳尼。。。这这我怎么没有见过，这是个什么属性，随之有看到 min-height:calc(100vh + 51px);这尼玛又是怎么用的.... 感叹入行已整整两年却... 先介绍一下vh:相对于视窗的高度，那么vw:则是相对于视窗的高度 “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.inn
CSS3中width属性的calc()使用
Zhangxi
04-11 2万+
平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元 素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这 些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将 会把元素盒子撑破（标准模式下，除I
Css之使用calc()计算宽高（vw/vh）
weixin_45346457的博客
09-16 8669
calc
css3中div宽度和高度设置的新方式
u013067420的博客
12-28 3148
myDiv {width: calc(100% - 5px); height: calc(100% - 5px); padding: 5px; }
uniapp css样式calc中使用vuex中的变量
最新发布
09-11
在uni-app中使用Vue.js的计算属性（computed）结合Vuex存储的状态数据，并在CSS的`calc`函数中使用这些计算属性，是一种常见的技术实现。由于Vue.js的计算属性是响应式的，当依赖的数据发生变化时，计算属性也会自动更新，从而可以动态地计算样式。 以下是实现步骤的概述： 1. 在组件的`<template>`部分，你可以通过绑定类来动态应用CSS样式。 2. 在`<script>`部分的组件选项中，定义计算属性。这个计算属性会依赖于Vuex中的某个状态。 3. 在计算属性中返回一个包含`calc`函数的字符串，`calc`函数内可以引用Vuex中的变量。 4. 在`<style>`部分，通过`:class`绑定或直接在样式中引用计算属性来使用这些动态计算出的样式值。 示例代码如下： ```html <template> <view :class="computedClass"></view> </template> <script> export default { computed: { // 计算属性依赖于Vuex中的某个状态 computedClass() { // 假设从Vuex中获取的变量值分别为width和height return `width: ${this.width}px; height: ${this.height}px;`; } } } </script> <style> /* 使用计算属性动态计算的样式 */ width: calc(var(--width, 100px) - 10px); height: calc(var(--height, 200px) + 10px); </style> ``` 在上面的例子中，`computedClass`计算属性会根据Vuex中的状态动态生成宽度和高度的值，并在`<style>`中通过CSS变量`--width`和`--height`进行引用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值