【CSS】浅谈CSS中的calc函数
来源:互联网 发布:淘宝2010年销售额 编辑:程序博客网 时间:2024/06/06 14:56
在css中,我们常常需要计算功能。以前我们常常使用js来进行计算,然后布局,但是为了更符合MVC结构的概念,css中calc函数已经开始被广泛使用。
calc函数允许进行任何长度值的计算,运算符包括“+”,“-”,“ * ”,“ / ”等。
但是需要注意的是,运算符前后最好都要有一个空格。
都是技术人员,下面,我将通过使用场景和代码来与大家共同探讨calc。
场景一
如图所示,图中的内容一旦超过了浮动元素的高,那么这些文本就会与图片左对齐,但是我们需要形成图二的效果。(img的大小是百分比)
那有人说,要实现这样的效果也很简单,给这段文本添加一个左边距maigin-left即可。没问题。确实要加上margin-left。但是如果是简单的:margin-left:10px;则会出现如下图的效果:
如果使用calc,就可以实现如图二所示效果;
具体代码如下:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding: 0; } div{ border: 1px solid black; margin: 0 auto; width: 200px; } img{ width: 50%; float: left; } p{ margin-left: calc(50% + 10px); /*margin-left: 10px;*/ } </style></head><body><div> <img src="C_79.png" alt=""/> <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p></div></body></html>
场景二
一排摆放四个img,每个img加margin的大小是25%;那就会产生一个问题。如图所示:
导致这个问题的原因是代码中的width:25%;并没有减去10px的margin-left;
因此只需用 width:calc(25% - 10px);即可
最终效果如图:
代码如下:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding: 0; } div{ border: 1px solid black; margin: 0 auto; width: 400px; height: auto; float: left; } img{ width: calc(25% - 10px); float: left; margin-left: 10px; } </style></head><body><div> <img src="C_79.png" alt=""/> <img src="C_79.png" alt=""/> <img src="C_79.png" alt=""/> <img src="C_79.png" alt=""/></div></body></html>
场景三
结合媒体查询@media 就十分容易实现一个响应式布局。
calc今天就聊到这里。各位看官如果有任何疑问,请在博文下回复评论即可。
挚谢阅读。
阅读全文
0 0
- 【CSS】浅谈CSS中的calc函数
- css中的calc()函数
- CSS 中的 calc
- css计算函数calc 动态技术
- 【CSS3】css中的数学运算-calc()
- css calc(expression)使用
- css calc()用法
- CSS之calc()使用
- CSS-calc 兼容写法
- 浅谈CSS中的缩写
- ttr()、counter()和calc()在css中的使用
- 【CSS】浅谈CSS中的包含块
- css的calc高度计算
- HTML5基础加强css样式篇(css计算函数:calc())(四十七)
- 浅谈CSS选择器中的空格
- 浅谈CSS选择器中的空格
- 浅谈CSS选择器中的空格
- 浅谈CSS选择器中的空格
- codevs 1814 最长链
- Vultr CentOS7 + Shadowsocks 服务端配置
- 关于Activity的转场动画失效问题
- 校验
- Android WebView显示不全的问题。图片不显示的问题。
- 【CSS】浅谈CSS中的calc函数
- linux文件操作
- 第七章 图形程序设计
- SpringBoot集成Spring AOP 参考样例
- day02 css和javascript
- "...not found FileProvider for ..."解决方法
- 在无GUI的Linux环境下将vim编辑器打造成一款Python开发IDE
- Win10系统配置Tomcat运行环境
- 软件开发文档