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),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
随机推荐
- 如何不用BPM配置时间
详细方案 配置时间 您需要同步消息接口(JDBC)和异步消息接口(对JEDBCReceiver的响应).对于SAP BAPI,我们不需要消息接口. 注意:CIMS是数据库系统 消息接口(请求/响应) ...
- MySQL必知必会(Select)
SELECT prod_name FROM products; SELECT prod_id, prod_name, prod_price FROM products; SELECT * FROM p ...
- javascript数据类型和类型转换
一 数据类型 1)typeof 查看数据类型 1.number 数字 取值范围:正无穷 - 负无穷.NaN 正无穷:Number.POSITIVE_INFINITY 负无穷:Number.NEGAT ...
- MySQL面试总结
MySQL面试总结 # MySQL的存储引擎 `MyISAM`(默认表类型):非事务的存储引擎,基于传统的`ISAM`(有索引的顺序访问方法)类型,是存储记录和文件的标准方法,不是事务安全,不支持外键 ...
- JS-引用类型的参数传递
- JS-选择排序
选择排序 选择排序的原理如下.遍历数组,设置最小值的索引为 0,如果取出的值比当前最小值小,就替换最小值索引,遍历完成后,将第一个元素和最小值索引上的值交换.如上操作后,第一个元素就是数组中的最小值, ...
- SSM非springboot配置swagger2
前提:maven,ssm,不是springboot项目 1.在maven中添加依赖 <!-- Swagger2 Begin --> <!--springfox的核心jar包--> ...
- SSM-配置tkmybatis
引言 Mybatis 与 Hibernate的一个很大的区别就是Mybatis所有的数据库操作语句都需要自己写,对于简单的单表操作来说是比较烦琐的.因此有人就开发了tk.mybatis插件,通过这个插 ...
- matplotlib可视化最全指南
1. 折线图:plt.plot 设置数据:plt.plot(x,y),单列数据传入默认y轴,此时x轴数据默认从0逐渐对应递增 设置颜色:plt.plot(x,y,color/c=" &quo ...
- django基础之day09,创建一个forms表单组件进行表单校验,知识点:error_messages,label,required,invalid,局部钩子函数,全局钩子函数, forms_obj.cleaned_data,forms_obj.errors,locals(), {{ forms.label }}:{{ forms }},{{ forms.errors.0 }}
利用forms表单组件进行表单校验,完成用户名,密码,确认密码,邮箱功能的校验 该作业包含了下面的知识点: error_messages,label,required,invalid,局部钩子函数,全 ...