盒模型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. 关于预装操作系统的ThinkPad的分区建议

    Think的个人电脑产品大部分预装有正版操作系统,当前新产品出厂时默认都是一个大分区“C”和一个恢复分区“Q”,很多用户都会要求客服人员提供分区服务,在这里我简单说一下关于分区的几点注意事项望各位参考 ...

  2. 【题解】C2Crni - Crni [COCI2010] [SP7884]

    [题解]C2Crni - Crni [COCI2010] [SP7884] 传送门:\(\text{C2Crni - Crni}\) \(\text{[COCI2010]}\) \(\text{[SP ...

  3. 《 .NET并发编程实战》阅读指南 - 第6章

    先发表生成URL以印在书里面.等书籍正式出版销售后会公开内容.

  4. PHP RSA签名

    /** * RSA签名 * @param $data 待签名数据 * @param $private_key 私钥字符串 * return 签名结果 */function rsaSign($data, ...

  5. 2019 淘友天下java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.淘友天下等公司offer,岗位是Java后端开发,因为发展原因最终选择去了淘友天下,入职一年时间了,也成为了面 ...

  6. Java中关于位运算的面试题

    位运算的效率是最高的,因为位位运算是直接对二进制进行操作 位运算只能应用于整型和char类型(char类型可以看做是特殊的无符号的整形) 面试题: a: 判断一个数是否是奇数 a & 1 == ...

  7. 同一个POD中默认共享哪些名称空间

    如果通过POD的形式来启动多个容器那么它们的名称空间会是共享的么,所以我这里讨论是在默认情况下同一个POD的不同容器的哪些名称空间是打通的.这里先说一下结论,共享的是UTS.IPC.NET.USER. ...

  8. 自动居中标题和内容；aspxgridview允许定义两个关键字为主键的格式

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  9. nginx实现反向代理 配置多域名以及多端口号

    多个服务部署在同一个服务器,使用不同的端口. 一.思考过程 如果不想带上端口号,就只能访问 80 或 443 端口. 可以用过二级目录区分服务,通过反向代理转发到不同的 Server. 可以用过子域名 ...

  10. Candies POJ - 3159

    题目链接:https://vjudge.net/problem/POJ-3159 思路: 能看出是差分约束的题, 我们想假设一个人是 p(1),另一个人是p(2),他们之间糖果差为w, 那么需要满足的 ...