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()函数使用标准的数学运算优先级规则;

兼容性:

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持


目录
相关文章
|
9天前
|
移动开发 UED HTML5
HTML5 表单元素1
HTML5引入了新的表单元素,如`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`,以增强表单的功能性和用户体验。
|
24天前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
48 11
|
1月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
47 2
|
17天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
34 0
HTML 元素
HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
|
2月前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
67 0
|
2月前
|
数据采集 数据安全/隐私保护
html常见的表单元素有哪些,html表单元素有哪些?
html常见的表单元素有哪些,html表单元素有哪些?
23 0
|
2月前
|
XML Web App开发 数据格式
HTML 页面显示 XML 数据
10月更文挑战第2天
|
3月前
|
移动开发 JavaScript 前端开发
Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)
本文介绍了在Twaver HTML5中如何设置告警元素(Alarm)的位置,包括Node和Link网元的告警位置偏移量以及定位理解。通过示例代码展示了如何在不同类型网元上设置告警位置,并解释了如何通过百分比来确定告警在Link网元上的位置。
38 0
Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)
|
Web App开发 前端开发 容器
HTML元素定位
一切皆为框 div、h1 或 p 元素常常被称为块级元素(block element)。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”(inline element),这是因为它们的内容显示在行中,即“行内框”。 块元素的盒子模型(box model of block element) 块级元素:块状元
1065 0