CSS中Box model分类

CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。

大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。

怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。

当不对doctype进行定义时，会触发怪异模式。

  • 在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

  • 在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

CSS3的box-sizing

box-sizing语法：

box-sizing ： content-box || border-box || inherit;

  • 当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

  • 当设置为box-sizing:border-box时，将采用怪异模式解析计算；

CSS-标准盒模型 & 怪异盒模型的更多相关文章

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

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

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

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

  3. css怪异盒模型和弹性盒布局(flex)详解及其案例

    一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...

  4. css中box-sizing简单说明（标准盒式模型和怪异盒式模型）

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

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

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

  6. 标准盒模型、怪异盒模型（box-sizing）

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

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

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

  8. 第一章入门篇CSS样式的分类、盒模型

    1.CSS样式的分类 CSS样式分为一项4种: 1.内联样式表,直接写在元素style属性里面的样式,如 <p style="color:red;">内联样式</ ...

  9. CSS3：box-sizing 怪异盒模型

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Hive 基本语法操练（三）：分区操作和桶操作

    (一)分区操作 Hive 的分区通过在创建表时启动 PARTITION BY 实现,用来分区的维度并不是实际数据的某一列,具体分区的标志是由插入内容时给定的.当要查询某一分区的内容时可以采用 WHER ...

  2. QT学习小demo之LightMD（MarkDown编辑器）

    很早之前就有了写一个类似Windows记事本的想法,加上最近也刚好在学编译原理,所以就想把两者结合起来,于是就打算结合MarkDown,开发一款MarkDown编辑器. 不过由于我之前一直使用的是Ja ...

  3. 配置Spring发送邮件

    推荐查看原博客        转载自:配置Spring发送邮件 Spring Email抽象的核心是MailSender接口.顾名思义,MailSender的实现能够通过连接Email服务器实现邮件发 ...

  4. PHP的Undefined variable错误怎么解决？

    在调试程序时,有可能会出现Undefined variable错误,一般情况下php是不需要定义变量的,但如果服务器什么都报错的,就会出现错误,我们经常接收表单POST过来的数据时报Undefined ...

  5. windows用一键安装包安装(推荐)

    为了简化大家在windows下面的安装,我们在xampp基础上做了禅道的windows一键安装包.xampp是业内非常著名的AMP集成运行环境.禅道的一键安装包主要在它基础上做了大量的精简,并集成了我 ...

  6. HttpURLConnection(http 1.1) 用法、状态码、状态描述

    最近研究了java的HttpURLConnection的用法, 这里简单的做一下记录: Java中可以使用HttpURLConnection来请求WEB资源. 1. URL请求的类别 分为二类,GET ...

  7. 常用CSS3属性整理

    常用CSS3属性整理 文本 文本超出部分折叠 white-space:nowarp; overflow:hidden; text-overflow:ellipsis word-warp 边界换行 no ...

  8. Java笔记--动态代理

    Java动态代理 1.概念 代理: 有时我们并不想直接访问对象A,或者不能直接访问对象A.而是通过访问一个中间对象B,让中间对象B去访问A.这种方式就称为代理. 这里的对象A所属的类就为委托类,或者被 ...

  9. C#使用Aspose.Words操作word文档

    最近接到个需求,由于客服这边要导出大量有一定规则的word文件,里面的内容希望系统自动填充,例如 这里我使用Aspose.Words.dll这个类库, 1.首先,我们需要创建模板文件,毕竟有规则的东西 ...

  10. LeetCode ZigZag Conversion（将字符串排成z字型）

    class Solution { public: string convert(string s, int nRows) { string a=""; int len=s.leng ...