CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除
CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除
实例:
.add{
width: calc(100% - 10px);
height: calc(100% - 10px);
}
.main{
width: calc(100% - 10px - 10px);
height: calc(500px - 10px -50px);
}
注意,减号,左右必须打空格,否则不生效。
calc用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 "+", "-", "*", "/" 运算;
calc()函数使用标准的数学运算优先级规则;
CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除的更多相关文章
- CSS根据屏幕分辨率宽度自动适应的办法
CSS根据屏幕分辨率宽度自动适应的办法 第一种办法是js选择CSS <SCRIPT language=JavaScript><!-- Beginif (screen.width == ...
- Android实现图片宽度100%ImageView宽度且高度按比例自动伸缩
在ListView中为了实现图片宽度100%适应ImageView容器宽度,让高度自动按比例伸缩功能,查了很多资料,搞了一下午都没找出个现成的办法,不过貌似有个结论了,就是: Android自身不能实 ...
- textarea宽度、高度自动适应处理方法
textarea自动高度 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http: ...
- CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...
- 纯CSS实现侧边栏/分栏高度自动相等
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...
- 《CSS世界》读书笔记(五) --height:100%
<!-- <CSS世界> 张鑫旭著 --> 相对简单而单纯的height:auto height:auto比width:auto简单的多,原因在于: CSS默认流是水平方向的, ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:块级按钮(拉伸至父元素100%的宽度)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字。 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值。这里保证n小于10的100次幂。 输出格式:在一行内输出n的各位数字之和的每一位,拼音数字间有1 空格,但一行中最后一个拼音数字后没有空格。 输入样例: 1234567890987654321123456789 输出样例: yi san wu
这是PAT中的一道练习题 刚开始的时候我想着直接定义正整数n,结果走了很大的弯路,因为题目中要求n小于10的100次幂,即最大的正整数n有100位,而C语言中整型数字最大占8个字节的存储空间,如果按无 ...
- 纯CSS兑现侧边栏/分栏高度自动相等(转)
这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的 ...
随机推荐
- <LeetCode OJ> 62. / 63. Unique Paths(I / II)
62. Unique Paths My Submissions Question Total Accepted: 75227 Total Submissions: 214539 Difficulty: ...
- Java 8新特性探究(十一)Base64详解
开发十年,就只剩下这套架构体系了! >>> BASE64 编码是一种常用的字符编码,在很多地方都会用到.但base64不是安全领域下的加密解密算法.能起到安全作用的效果很差,而且 ...
- [Angular] Observable.catch error handling in Angular
import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/opera ...
- IT增值服务-客户案例(三):合肥薪火科技,Java和P2P网络借贷系统开发指导
客户整体情况: 合肥薪火科技,是安徽合肥一家主营微信开发和运营的中小企业,http://weimarket.cn/. 这家公司筹备.创立.曲折创业的经历,我一直有关注.因为2个老板,都是我的同学校友, ...
- vi/vim基本使用命令
vi/vim基本使用命令 一.总结 一句话总结:1.记住三种模式:命令行模式.插入模式.底行模式:2.记住两个按键功能:i和esc 二.vi/vim基本使用命令 vi/vim 基本使用方法本文介绍了v ...
- log4erl Configuration
https://github.com/ahmednawras/log4erl/blob/master/CONFIGURATION.txt Configuration Guide: ========== ...
- 课堂随笔04--关于string类的一些基本操作
//定义一个空字符串 string strA = string.Empty; strA = "abcdesabcskkkkk"; //获取字符串的长度 int i = strA.L ...
- 自动化部署脚本,给每一台主机装上JDK,且配好环境变量
centos6.7 当我们有很多台主机,想在每台机器上都安装一样的某些软件,当然,一台机器一台机器安装也是可以的,但是如果有一键安装所有机器上的软件那是不是很激动人心呢! 首先我们需要制作一台服务器, ...
- 【poj2406】next数组求循环节
传送门 题目分析 本题主要考察kmp中next数组在求循环时的运用: 字符串是循环的: len % (len - next[len]) == 0 字符串循环次数: len / (len - next[ ...
- lucene 统计单词次数(词频tf)并进行排序
public class WordCount { static Directory directory; // 创建分词器 static Analyzer analyzer = new IKAnaly ...