• #box{
    width: 200px;
    height: 200px;
    background-color: pink;
    }

标准盒子模型

box-sizing: content-box;

  • padding 是向外扩的
  • border 也是向外扩的

怪异盒子模型

box-sizing: border-box;

  • padding 是向内挤的,即不会影响元素的 width 和 height

    • 当 padding 大于一定程度时,就会开始影响 width 和 height
  • border 也是向内挤的,也不会影响元素的 width 和 height

    • 当 border  大于一定程度时,就会开始影响 width 和 height

CSS3_标准盒子模型和怪异盒子模型的更多相关文章

  1. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  2. CSS盒子模型与怪异盒模型

             盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分. 盒子模型分为两种 第一种是W3c标准的盒子模型(标准盒模型) .第二种IE标准 ...

  3. 标准盒模型、怪异盒模型(box-sizing)

    CSS中Box model是分为两种: W3C标准(标准盒模型) 和 IE标准盒子模型(怪异盒模型).大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 重要的一个属性是bo ...

  4. CSS基础学习-8.CSS盒子模型_标准盒子&&9.CSS怪异盒子

    怪异盒模型 box-sizing:content-box;/*正常盒模型,默认值*/ box-sizing:border-box:/*怪异盒模型,固定了盒子的大小,无论是否添加内边距还是边框,盒子的大 ...

  5. css中box-sizing简单说明(标准盒式模型和怪异盒式模型)

    今天写程序做布局的时候,遇到关于css中盒式模型的问题,百度了下这属性的解释,脑大啊,文字太绕看不懂.怎么办,于是自己动动手写了段程序测试,嗯,不错,一看效果就恍然大明白了.这里简单说明下,也可能说得 ...

  6. div的标准盒模型和怪异盒模型

    (1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开

  7. 怪异盒模型和标准盒模型--CSS

    一,原理 css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准. 怪异模式是“部分浏览器在支持W3C标准的同 ...

  8. 标准盒子模型和IE盒子模型

    标准盒子模型 = margin + border + padding + content (content =  width | height) IE盒子模型 = margin + content ( ...

  9. box-sizing怪异盒子模型在移动端应用

    盒子模型不必多少,公认的盒子模型 总宽度=width + padding(padding-left,padding-right) + border(border-left,border-right) ...

随机推荐

  1. 将matlab数据保存为excel文件

    摘录网址:https://blog.csdn.net/wangh0802/article/details/70312415 参考网址:https://jingyan.baidu.com/article ...

  2. 优化算法系列-遗传算法(3)——NSGAII学习网址

    JMetal https://www.cnblogs.com/denggaoshan/p/6306640.html https://www.cnblogs.com/denggaoshan/p/6308 ...

  3. jvisualvm安装visualgc插件

    jdk1.7自带jvisualvm可以对java应用进行监控.其中有个插件visualgc可以查看jvm垃圾回收的具体信息.安装插件的步骤是打开jvisualvm,点击工具->插件,在可用插件列 ...

  4. js值类型转换(boolean/String/number),js运算符,if条件,循环结构,函数,三种弹出框

    js值类型转换 number | string | boolean boolean类型转换 num = 0; var b1 = Boolean(num); console.log(b1) 转化为数字类 ...

  5. SpringBoot系列: Maven多项目管理

    这篇是 maven 项目管理的第二篇, 讲解使用 maven 进行多个项目管理, 之前有一篇是 maven 的基础知识. SpringBoot系列: Eclipse+Maven环境准备 一个完整的解决 ...

  6. 算法时间计算:logA(N)与O(n)

    算法运行时间估算常见O(log(n))log:求对数例:a^b=na为底数,b为n的对数记作:logA(n)=b  ->求N的对数 计算器验算:计算器的log默认以10为底  输入 10,log ...

  7. python中的__len__,__getitem__ __setitem__ __delitem__ __contains__

    可变集合需要实现: __len__  __getitem__    __setitem__  __delitem__不可变集合需要实现: __len__  __getitem__ __len__:返回 ...

  8. TestNg和spring3测试报错:Failed to read candidate component class-遁地龙卷风

    java.lang.IllegalStateException:Failed to load ApplicationContext Caused by: org.springframework.bea ...

  9. 引用变量&和指针*的区别

    &在C/C++中做右值时,为取地址运算符,来指示变量的地址.C++给&符号赋予了另外一个含义,将其用来声明引用. 引用变量的作用: 1.别名 int b = 0; int& a ...

  10. MATLAB更换编辑器配色方案

    MATLAB的默认编辑配色方案白色,长时间面对高亮度的白色界面容易产生眼睛疲劳的感觉,那么如何更换编辑器配色方案呢?经过不断探索以及查阅资料,发现了下列几种配色方案.配色文件来源于https://gi ...