border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题
box-sizing
box-sizing的CSS属性是用来改变默认的CSS框模型
属性
初始值:content-box
适用于:接受的所有元素的宽度或高度
继承:无
媒体:visual
指定的:as specified
动画:no
规范秩序:独特的无歧义的正式语法定义的顺序
语法
box-sizing: content-box(默认样式) | padding-box | border-box
content-box,border和padding不计算入width之内
padding-box,padding计算入width内
border-box,border和padding计算入width之内,其实就是怪异模式了~
兼容性:
-webkit-box-sizing: /*chrome safari android*/
-moz-box-sizing: /*Firefox*/
box-sizing: /*Standard */
CSS3 calc() 会计算的属性
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意,两者只能使用一个哦,否则就会造成冲突了。
calc()能做什么?
calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。
calc()语法
calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:
.elm {
width: calc(expression); /*expression是一个表达式,用来计算长度的表达式。*/
}
calc()使用通用的数学运算规则,但是也提供更智能的功能:
1、使用“+”、“-”、“*” 和 “/”四则运算;
2、可以使用百分比、px、em、rem等单位;
3、可以混合使用各种单位进行计算;
4、表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
5、表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
兼容性
浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器 厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没。
-moz-calc(expression);/*Firefox*/
-webkit-calc(expression);/*chrome safari*/
calc();/*Standard */
border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题的更多相关文章
- CSS3 伸缩布局盒模型记
CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...
- CSS3 伸缩布局盒模型
CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- CSS-3 新弹性盒模型属性
flex 语法:flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] 取值: none:none关键字的计算值为: 0 0 au ...
- css3之弹性盒模型初探(一)
什么是弹性盒模型? 弹性盒模型是指在父级改变大小的时候内部的自己元素也会相应的改变大小,即子集会按照父级的大小按比例自适应大小. 弹性盒模型的提出可以解决一些响应式布局的需求 如何使用弹性盒模型? ...
- IT兄弟连 HTML5教程 CSS3属性特效 盒模型阴影
除了为文字添加阴影,我们还可以为盒模型添加阴影.盒模型阴影的属性名称为box-shadow,此属性与text-shadow一样有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表 ...
- css盒模型。边框和内外边距
css盒模型: 外边距 边框 内填充 内容 盒模型分为两种: 标准盒模型: 怪异盒模型(IE盒模型): 边框:border border: 10px solid blue;表示设置10像素蓝色实线条的 ...
- CSS -- 盒子模型之边框、内边距、外边距
一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...
- css3之弹性盒模型(Flex Box)
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
随机推荐
- 关于token你需要知道的
第一.token的生成 1)token的生成接口为 https://{你的endpoint} /v3/auth/tokens 比如我是北京一的,我的endpoint就是 iam.cn-north-1. ...
- 宜信SDL实践:产品经理如何驱动产品安全建设
一.序言 本文从产品经理的角度出发,对产品经理的安全职责.产品驱动安全的内涵.工作内容.工作方法.所需安全资源.以及产品经理的安全工作量进行了分析.希望所有产品经理在没有心理负担的情况下,有目标.有方 ...
- 借 redis cluster 集群,聊一聊集群中数据分布算法
Redis Cluster 集群中涉及到了数据分布问题,因为 redis cluster 是多 master 的结构,每个 master 都是可以提供存储服务的,这就会涉及到数据分布的问题,在新的 r ...
- keychain 的学习
keychain 的使用 http://www.cnblogs.com/ios8/archive/2012/06/25/iOS-keychain.html
- 第七章 jQuery中的事件与动画
事件的分类 基础事件: 鼠标事件 键盘事件 window事件 表单事件 复合事件: 鼠标光标悬停 鼠标连续点击 基础事件: 实例: mouseenter()和mouseover()用法的区别: mou ...
- 2017 ACM/ICPC 沈阳 F题 Heron and his triangle
A triangle is a Heron’s triangle if it satisfies that the side lengths of it are consecutive integer ...
- POJ3111
Demy has n jewels. Each of her jewels has some value vi and weight wi. Since her husband John got br ...
- vue 点击修改样式
1.页面加载默认一个初始的isact,让第二个div.f具有一个on的类:在点击的时候,传入一个值给data.isact <template> <nav class="cl ...
- 【Eclipse】安装配置
[Eclipse]安装配置 官网:https://www.eclipse.org 全部版本下载:https://www.eclipse.org/downloads/packages/
- VS Code 成主宰、Vue 备受热捧!2019 前端开发趋势必读
前端在生产和开发中占据着越来越重要的地位,PC 端.手机端.桌面端.智能手表端等等设备都离不开前端的身影.本文将围绕框架.编程语言.工具.React.Vue 等方面,全面回顾 2019 年前端与 We ...