html 页面中动态计算 div 元素的宽度

简介: html 页面中动态计算 div 元素的宽度
+关注继续查看

在我们开发中,经常用到一个给定的div宽度,剩余的自动充满占全,但是,为了适应不同的屏幕的显示大小,我们不能给定值宽度,所以就需要动态的获取,那么,就要采用calc() 函数进行计算。

实例

使用 calc() 函数计算 <div> 元素的宽度:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
 
<style>
.test {
    width: calc(100% - 50px);
    background: #eee;
}
</style>
</head>
<body>
<div class="test">我的宽度为100% - 50px</div>
</body>
</html>

语法:

calc() = calc(四则运算)

定义与用法

calc() 函数用于动态计算长度值。


需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);

任何长度值都可以使用calc()函数进行计算;

calc()函数支持 "+", "-", "*", "/" 运算;

calc()函数使用标准的数学运算优先级规则;

兼容性:

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

image


目录
相关文章
|
2天前
|
移动开发 数据安全/隐私保护 HTML5
|
5天前
|
前端开发 JavaScript
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
25 0
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
|
7天前
|
前端开发 CDN
在单html页面中使用react并配置jsx
在单html页面中使用react并配置jsx
13 0
|
14天前
|
JavaScript 前端开发 网络安全
Video.js实现在html页面播放rtmp流媒体
Video.js实现在html页面播放rtmp流媒体
|
14天前
|
编解码 移动开发 JavaScript
html页面播放视频编码是265的m3u8的流媒体地址
html页面播放视频编码是265的m3u8的流媒体地址
|
16天前
|
前端开发
在HTML页面中引入公共的部分的代码
在HTML页面中引入公共的部分的代码
10 0
|
16天前
|
前端开发
Ajax提交请求后台返回一个完整的html页面
Ajax提交请求后台返回一个完整的html页面
|
20天前
Vue3项目中引入html页面
Vue3项目中引入html页面
|
28天前
HTML+VUE+element-ui通过点击不同按钮展现不同页面
HTML+VUE+element-ui通过点击不同按钮展现不同页面
22 1
|
28天前
|
前端开发
element-ui+vue上传图片和评论现成完整html页面
element-ui+vue上传图片和评论现成完整html页面
16 1
推荐文章
更多