css-动态计算盒子宽度

css-计算盒子宽度calc函数

css属性：width: calc() 可以计算盒子的宽度，calc()括号里面可以进行- - -加减乘除运算 + - * /
1.可以写数值跟数值之间的运算，如：calc(100px + 50px)
2.可以写父盒子的百分比和数值之前的运算，如：calc(100% -50px)

常用方式2，动态计算子盒子宽度，总是比父盒子少多少宽度

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算盒子宽度calc函数</title><style>.box {/* width: 300px; */width: 500px;height: 200px;background-color: pink;}.son {width: calc(100% - 30px);height: 50px;background-color: skyblue;}</style>
</head><body><div class="box"><div class="son"></div></div>
</body></html>

页面效果：
盒子宽度300px:

盒子宽度500px:

css-动态计算盒子宽度相关推荐

css动态计算元素的高度及宽度
原文:https://www.cnblogs.com/zhang1f/p/12574774.html 1.px 像素,我们在网页布局中一般都是用px. 2.百分比百分比一般宽泛的讲是相对于父元素,自 ...
前端css实现左侧盒子宽度固定，右侧宽度自适应布局
效果图方法1:通过calc方法做宽度自适应设置width: calc(100% - 100px); (1)这里减100px是示例中有left类名的div宽度,具体减多少px根据情况来 (2)减号两 ...
css文字超出盒子宽度显示省略号
单行超出显示省略号 white-space:nowarp; overflow:hidden; text-overflow:ellipsis; 超出两行显示省略号 overflow: hidden;te ...
理解 css rem与动态计算rem
1.rem定义? 首先css3规定1rem = html根节点的font-size,rem也就是root em简写. 为了方便计算通常设置根节点font-size = 100px 那么 1rem = ...
css如何动态计算,CSS中的动态计算
自从CSS的calc()函数得到浏览器的支持起,在CSS中就可以做一些简单的数学运算.如果你阅读过图解CSS系列中的 <CSS函数>一文的话,你会发现现在或将来有更多的函数可以直接帮助 ...
Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法
Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...
【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
文章目录一.实现效果二.基本 HTML 结构三.设置最外层盒子样式 ( 盒子模型内外边距设置 ) 四.设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 ) 五.设置列表盒子样式 ( ...
css 动态rem_【面试题】CSS知识点整理(附答案)
目录伪类和伪元素实现固定宽高比(width: height = 4: 3)的div,怎么设置 CSS选择器 CSS解析规则 flex: 1 完整写法 display: none和 visibili ...
第148天：js+rem动态计算font-size的大小，适配各种手机设备
需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...

css-动态计算盒子宽度

css-计算盒子宽度calc函数

代码示例

css-动态计算盒子宽度相关推荐

最新文章

热门文章