盒模型box-sizing:

取值

1.content-box 默认值，标准盒模型，设置宽度为内容宽度，实际宽度为左右边距加上左右边框加上左右填充再加上内容宽度

2.border-box 设置宽度等于元素内容宽度，content包含了元素的border和padding

3.inherit 继承父元素的盒模型模式

兼容 iE8+

解决问题：
边框和填充被计算到盒模型内，不会破坏布局

CSS3中box-sizing属性的作用以及应用场景的更多相关文章

  1. html的标签中 unselectable=on 属性的作用

    在IE浏览器中,当input获得焦点时,点击有unselectable="on"属性的标签时,不会触发onblur事件. 加上该属性的元素不能被选中. < !DOCTYPE ...

  2. css3中的animation属性

    作用:通过给元素添加animation属性,可以赋予该元素动画效果. <!DOCTYPE html><html>    <head>        <styl ...

  3. CSS3中哪些新属性—阴影、文本省略（1）

    CSS3中的阴影,我知道的就是盒阴影和文字阴影.两者使用大同小异. 1.文字阴影 不知道为啥阴影会被开发出来,觉得这没啥好用啊.用了之后发现好像还行,使页面更有立体感了那么一点点.看起来趣味性强一点. ...

  4. css3中的scroll-behavior属性

    scroll-behavior属性 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,当用户通过鼠标滑 ...

  5. ASP.NET Web网站中App_Code文件夹的作用及使用场景

    原文地址:Web Site项目和ASP.NET Web Application中App_Code文件夹的作用作者:宾的宾 我现在要建一个ASP.NET的网站了,不难吧,开始动手.如下图: 这种方法建立 ...

  6. CSS3中的Transition属性详解

    w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  7. CSS3中的Transition属性详解(贝赛尔曲线)

    transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...

  8. CSS3中的一些属性

    1. 可匹配部分字符串 2. box-sizing属性 3. CSS3多栏布局 1.可匹配部分字符串 /*^运算符,匹配字符串首部*/ a[href^='http://website'] /*$运算符 ...

  9. css3中样式计算属性calc()的使用和总结

    calc的介绍 在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...

随机推荐

  1. Ext.net SelectionModel RowSelection

    <SelectionModel> <ext:RowSelectionModel ID="RowSelectionModel1308" runat="se ...

  2. 【生活现场】从打牌到map-reduce工作原理解析（转）

    原文:http://www.sohu.com/a/287135829_818692 小史是一个非科班的程序员,虽然学的是电子专业,但是通过自己的努力成功通过了面试,现在要开始迎接新生活了. 对小史面试 ...

  3. 七雄Q传封包辅助技术探讨回忆贴

    前言 网页游戏2013年左右最火的类型最烧钱游戏,当年的我也掉坑了.为了边玩还满足码农精神我奋力的学习如何来做外挂.2013年我工作的第二个年头.多一半…介绍下游戏<七雄Q传>是北京游戏谷 ...

  4. Lisp : (quote) code is data (eval) data as code

  5. python 排序 插入排序与希尔排序

    希尔排序是插入排序的升级版,先来了解插入排序 插入排序 算法思想: 插入排序再面对几乎已经有序的数据效率非常高,可以达到线性排序的效率 将数组元素插入已经有序的部分中,具体的过程是在有序的部分中通过比 ...

  6. springboot的pom.xml配置

    <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven ...

  7. Java自学-I/O Stream流

    Java的流 Stream 什么是流(Stream),流就是一系列的数据 步骤 1 : 什么是流 当不同的介质之间有数据交互的时候,JAVA就使用流来实现. 数据源可以是文件,还可以是数据库,网络甚至 ...

  8. idea2019注册码

    都9012年了,怎么还能忍受用低版本的编辑器呢, IntelliJ IDEA 2019破解教程拿走不谢 下载工具 Mac版idea下载链接: 链接:https://pan.baidu.com/s/1m ...

  9. JavaScript中数组相关的属性方法

    下面的这些方法会改变调用它们的对象自身的值: Array.prototype.copyWithin() 在数组内部,将一段元素序列拷贝到另一段元素序列上,覆盖原有的值. Array.prototype ...

  10. Caml 多表关联查询

    using (SPSite site = new SPSite(SiteUrl)) { using (SPWeb web = site.RootWeb) { SPQuery query = new S ...