css calc()属性

最新推荐文章于 2024-05-22 12:04:38 发布
最新推荐文章于 2024-05-22 12:04:38 发布
阅读量144 收藏
点赞数
原文链接：http://www.cnblogs.com/shineda/p/5014190.html
版权

制作网页时候总会碰到div里面的boxdiv比外面div大的这种情况，导致把元素盒子撑破

<html>
    <head>
        <style>
            .domo{
                width: 300px;
                background: #00bafa;
                padding: 3px 0;
            }
            .box{
                width: 100%;
                background:#f0c040;
                height: 50px;
                padding: 10px;
                border:5px solid green;
              /*width: -moz-calc(100%-(10px+5px)*2);
                width:-webkit-calc(100%-(10px+5px)*2);
                width: calc(100% - (10px + 5px) * 2);*/
            }
        </style>
        
    </head>
    <body>
        <div class="domo">
            <div class="box"></div>
        </div>
    </body>
</html>

效果图为

外面box超出父div

calc()能很好的解决这个问题

 .box{
                width: 100%;
                background:#f0c040;
                height: 50px;
                padding: 10px;
                border:5px solid green;
                width: -moz-calc(100%-(10px+5px)*2);
                width:-webkit-calc(100%-(10px+5px)*2);
                width: calc(100% - (10px + 5px) * 2);
            }

添加calc（）后效果图为

 

转载于:https://www.cnblogs.com/shineda/p/5014190.html

ajianshi3728
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
初步认识css自定义属性
09-22
【CSS自定义属性】，也称为CSS变量，是现代CSS中的一个重要特性，它极大地提高了样式表的可维护性和代码复用。预处理器如Sass、Less等虽然在之前提供了变量功能，但CSS自定义属性提供了原生支持，无需额外编译步骤。...
使用CSS3中的calc()属性来以算式表达尺寸数值
12-13
css3新添加属性box-sizing，在一定程度上解决了上面的问题，而在今天的文章中我们来通过css3新增加的另外一个属性calc()来实现适应布局。 calc()是css3新添加属性，它可以让你使用一个算术表达式来表达长度值，这...
css的calc属性
weixin_52509007的博客
04-08 232
运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 才会生效
Css中calc属性的使用
bigpatten的博客
07-05 2348
定义： calc() 函数用于动态计算长度值。 用法 ： 特别注意： 运算符前后都需要保留一个1空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-”, “*”, “/” 运算； calc()函数使用标准的数学运算优先级规则； 实例： 如计算元素的宽高 .parent{ height: 300px; width: 100%; position: relative;
【CSS】计算属性 calc 函数
最新发布
小秀的博客
05-22 557
然而，需要注意的是，calc() 函数在某些旧版本的浏览中可能不被完全支持，特别是在 IE 11 及以下版本。CSS 中的 calc() 函数是用于动态计算数值的函数。它可以在 属性的值中执行基本的数学运算，包括加法、减法、乘法和除法，以及使用 CSS 单位进行计算。// 计算出宽度为容器宽度减去40像素的三分之一。// 计算出内边距为10像素加上父元素宽度的5%width: calc(100% - 20px);
css calc属性
rgpbrave的博客
08-21 143
height: calc(100vh - 200px); //calc css计算属性 //可以利用这点动态的设置属性
CSS3中的calc( )属性
xm1037782843的博客
03-03 2254
calc()函数简单讲解
CSS3 之属性:calc() 函数、border、background、word-wrap、font-face
qq_41988669的博客
01-07 1203
auto：无特殊对齐方式。left：内容左对齐。center：内容居中对齐。right：内容右对齐。justify：内容两端对齐。start：内容对齐开始边界。end：内容对齐结束边界。定义块内文本内容的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式。
CSS3 calc()会计算属性详解
09-27
CSS3的`calc()`函数是CSS样式表中的一个强大功能，允许开发者在声明CSS属性时进行动态计算。这个功能在创建响应式布局、调整元素尺寸等方面尤其有用，因为它可以为浏览器提供一种方式来动态地计算元素的大小。下面将...
CSS3 Calc实现滚动条出现页面不跳动问题
12-13
其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们...
CSS：calc() 函数 / 动态计算长度值 / 不同场景使用
snowball的博客
11-29 8673
CSS calc() 函数是一个用于计算 CSS 属性值的函数。它可以在 CSS 属性值中使用数学表达式，从而实现动态计算属性值的效果。calc() 函数可以使用加减乘除四种基本数学运算符来计算属性值，还可以使用括号来改变优先级。这个样式规则中，div 元素的宽度为整个父容器的宽度减去 20px。当浏览器窗口大小发生变化时，div 元素的宽度会自动重新计算，以适应新的窗口大小。这个样式规则中，div 元素的上下内边距为 10px 加上父容器宽度的 2%，左右内边距为 20px 减去父容器宽度的 5%。
网站开发进阶（六十三）详解CSS3中的calc()
IT全栈 华强工作室
04-13 2553
CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 如果你使用过 CSS 预处理器，比如 SASS，以上示例你或许碰到过 .foo { width: 100px + 50px; } // Or using SASS variables $width-one: 100px; $width-two: 50px; .bar {
Css3新属性：calc()
weixin_39037804的博客
09-02 505
一、前言 　　calc()看起来像是javascript中的一个函数，而事实上它是用在Css中的，可以用它来计算长度（宽度或高度)，能够自动根据不同尺寸的屏幕自动调接数值，从而很轻松的实现自适应布局展...
calc( )计算css属性值
lipeng_kaka的博客
08-20 3274
calc()是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。 calc(）语法： 加 （+）、减（-）、乘（*）、除（/），注意的是：乘数中至少要有一个是<number>类型的、被除数（/右面的数）必须是<number>类型的 calc()使用通用的数学运算规则，...
CSS3 calc() 属性——会计算的属性
sunforraining的博客
12-09 1444
怎么使用calc()
CSS 中的 calc() 函数
qq_43730272的博客
02-21 1446
在这个例子中，容器的宽度将是视窗宽度的50%，并且减去20像素的空间。通过使用vw和vh单位，容器的大小会根据视窗的大小动态调整，从而实现响应式设计。calc()函数是CSS3中的一个强大特性，可以用于在CSS属性中进行数学运算。在上述代码中，我们使用 calc() 函数来计算 .container 容器的宽度。上述例子中，标题的字体大小会根据视窗宽度自动调整，同时保持与基准字体大小（1rem）的比例关系。上述例子，盒子的宽度和上边距都会根据父元素宽度的50%进行计算，并且保持宽高比为1：1。
css calc()属性使用注意点
m0_52724742的博客
01-03 107
CSS3 使用 calc calc()使用通用的数学运算规则，但是也提供更智能的功能： >使用“+”、“-”、“” 和 “/”四则运算； >可以使用百分比、px、em、rem等单位； >可以混合使用各种单位进行计算； >表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； >表达式中有“”和“/”时，其前后可以没有空格，但建议留有空格。 例如 ：设置div元素的高度为当前窗口高度-100px div{ hei
css计算属性_[译]是时候开始使用CSS自定义属性了
weixin_39872257的博客
11-29 93
这篇文章是作者2017年写的，主要是用来练习翻译技术文章以下是内容原文地址：It’s Time To Start Using CSS Custom Properties作者：Serg Hospodarets在今天，css预加载已经成为了前端开发的一个标准。预加载的一个主要优势就是可以让你使用变量。它可以让你避免复制黏贴你的代码，并且简化了开发和重构。我们用预加载来存储颜色、字体偏好，布局的细节——...
IE浏览器中：CSS中使用calc()不起作用
mwxlt1314的博客
08-18 1535
IE浏览器中：CSS中使用calc()不起作用 transform: translate(calc(-50% + 24px),22px);//这种写法IE种不兼容 兼容IE的写法，IE中calc无效，就使用多个translateX代替calc写法 transform: translate( -50%, 22px) translateX(24px);
css calc使用变量
05-19
你可以在calc()函数内使用CSS自定义属性来代表数值，这样就可以动态地计算CSS值了。以下是一个示例： ``` :root { --width: 100px; } .box { width: calc(var(--width) * 2); height: calc(var(--width) / 2); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值