盒模型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. axios的各种传参方式

    axios的各种传参方式 1. params方式 axios({ url: '/users', method: 'get', params: { id: '11111', name: '22222' ...

  2. Nginx php上传文件大小的设置

  3. http内网转发

    package main import ( "io" "log" "net/http" "strings" ) func ...

  4. 【ELK】7. elasticsearch linux上操作es命令详解

    ========== 1.检查ES节点是否正常启动 curl http://192.168.6.16:9200 正常状态: 非正常状态: 1>确保服务是不是正常启动了,端口用的是哪个 2> ...

  5. ActiveMQ使用Zookeeper+LevelDb配置Master/Slave集群

    前言: 本文介绍的AMQ集群是Master-Slave模式的,官网介绍三种方案: (1)基于共享文件系统的,(2)基于JDBC,(3)基于可复制的LevelDB. 关于三种方式的对比网上已经有很多,本 ...

  6. Vue 项目中遇到的跨域问题及解决方法

    原文:https://www.jb51.net/article/137278.htm 问题描述 前端 vue 框架,跨域问题后台加这段代码 header("Access-Control-Al ...

  7. Dos.ORM修改数据遇到的问题

    2019年11月6日,今天使用Dos.ORM进行数据的批量修改,出现修改一条数据造成所有数据相应状态改变的情况,代码如下: 按照一步步调试的方式,排查出原因:生成的orm实体类缺少 主键 的标识,该原 ...

  8. 华为方舟编译器 下载 和 LiteOS Studio Setup 2019-04-16.exe SDK下载

    华为方舟编译器是首个取代Android虚拟机模式的静态编译器,可供开发者在开发环境中一次性将高级语言编译为机器码.此外,方舟编译器未来将支持多语言统一编译,可大幅提高开发效率. 编译器下载 [Ark] ...

  9. CLOS ： Common Lisp 的面向对象支持

    1.  defclass   ( :accessor/reader/writer ;   :initarg  ;  :initform 2. defgeneric 3. defmethod ----- ...

  10. 阿里云开发工具包（SDK）

    参考: 阿里云开发工具包(SDK)For Python Alibaba Cloud SDK for Go