盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。

盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型） 、第二种IE标准的盒子模型（怪异盒模型）

当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。

一、标准盒模型与怪异盒模型的表现效果的区别之处：

1、标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

标准盒模型下盒子的大小  = content + border + padding + margin

 2、怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度

怪异盒模型下盒子的大小=width（content + border + padding） + margin

 二、如何选择盒模型

如果是定义了完整的doctype的标准文档类型，无论是哪种模型情况，最终都会触发标准模式，

如果doctype协议缺失，会由浏览器自己界定，在IE浏览器中IE9以下（IE6.IE7.IE8）的版本触发怪异模式，其他浏览器中会默认为W3c标准模式。

 代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>盒子模型</title>

 <style>

 #box1{

 padding:20px;

 background-color: greenyellow;

 width: 100px;

 height: 100px;

 border:20px skyblue solid;

 }

 </style>

 </head>

 <body>

 <div id="box1"></div>

 </body>

 </html>

布局

除此之外，我们还可以通过属性box-sizing来设置盒子模型的解析模式

可以为box-sizing赋三个值：

content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)

border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型

padding-box：将padding算入width范围

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

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

 实例：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>怪异盒子练习</title>

     <style>

         div{

             width: 234px;

             height: 460px;

             background-color: #2e233e;

             padding: 20px 0px;

             box-sizing: border-box;

         }

         div li{

             font-size: 14px;

             height: 42px;

             line-height: 42px;

             padding-left: 30px;

         }

         a{color: white}

         li:hover{background-color: #ff6700;}

     </style>

 </head>

 <body>

     <div>

         <ul>

             <li><a href="">电器商城</a></li>

             <li><a href="">电器商城</a></li>

             <li><a href="">电器商城</a></li>

             <li><a href="">电器商城</a></li>

             <li><a href="">电器商城</a></li>

             <li><a href="">电器商城</a></li>

             <li><a href="">电器商城</a></li>

             <li><a href="">电器商城</a></li>

             <li><a href="">电器商城</a></li>

             <li><a href="">电器商城</a></li>

         </ul>

     </div>

 </body>

 </html>

表现效果

CSS盒子模型与怪异盒模型的更多相关文章

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

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

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

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

  3. IE盒模型和标准盒模型

    标准盒模型和ie盒模型(怪异盒模型) w3c标准盒模型 width和height不包括padding和border ie盒模型 width和height包含padding和border ie8以上都是 ...

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

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

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

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

  6. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  7. IE盒模型与W3C盒模型区别

    前两天被人问到,叫我解释一下标准盒模型与IE盒模型,额,当时只能说,知道一点,但是没有深入的去探讨过,所以下来之后就自己写了例子,亲自去验证并且查看了网上的一些资料,现将其整理如下: 一.css盒模型 ...

  8. 标准盒模型与IE盒模型之间的转换

    首先上图,这两张很明显可以看出IE盒模型和标准盒模型之间的差别. 当然今天不是去细细追究两种模型具体是怎么去计算布局的,那个很多文章已经已经有过了,不再重复.以前刚开始学习盒模型的时候,就学到的是IE ...

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

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

随机推荐

  1. 举例讲解Python中的死锁、可重入锁和互斥锁

    举例讲解Python中的死锁.可重入锁和互斥锁 一.死锁 简单来说,死锁是一个资源被多次调用,而多次调用方都未能释放该资源就会造成死锁,这里结合例子说明下两种常见的死锁情况. 1.迭代死锁 该情况是一 ...

  2. 中国MOOC_零基础学Java语言_第5周 数组_1多项式加法

    第5周编程题 查看帮助 返回   第5周编程题 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截 ...

  3. Apache hadoop namenode ha和yarn ha ---HDFS高可用性

    HDFS高可用性Hadoop HDFS 的两大问题:NameNode单点:虽然有StandbyNameNode,但是冷备方案,达不到高可用--阶段性的合并edits和fsimage,以缩短集群启动的时 ...

  4. SpringContextHolder使用报错

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/dobecoder/article/details/88401612今天在使用SpringContex ...

  5. 【Appium遇到的坑】环境配置无误，路径无中文，无空格，提示error: Logcat capture failed: spawn ENOENT

    代码如下,提示error: Logcat capture failed: spawn ENOENT from appium import webdriver from time import slee ...

  6. C++笔记（7）——一些模拟题：简单模拟、查找元素、图形输出、日期处理、进制转换、字符串处理

    以下内容基本来自<算法笔记>,作者为胡凡,建议直接买书看,我这里只是摘抄部分当笔记,不完整的. 简单模拟 就是一类"题目怎么说你就怎么做"的题目.这类题目不涉及算法,只 ...

  7. idea中dbug模式的使用

    1:进入断点状态时候每个按钮的用途如图: 2:当运行过得代码需要查看输出内容时候,可以选中需要查看的代码进行运行如图:会在控制台输出选中代码执行的结果

  8. bzoj3028食物 关于(1+x+x2+x3+x4+...)^k的第i项系数就是c(i+k−1,k−1)的证明

    关于(1+x+x2+x3+x4+...)^k的第i项系数就是c(i+k−1,k−1)的证明对于第i项,假设为5x^5=x^0*x^5x^5=x^1*x^4x^5=x^2*x^3........也就是说 ...

  9. Linux-Maven部署

    一.Maven是什么 二.Maven部署 1.环境信息: (1)centos7.3 (2)jdk1.8 (3)maven3.5.3 2.安装jdk (1)下载地址[http://www.oracle. ...

  10. vscode打开SpringBoot项目

    1.使用vscode打开java项目所在文件夹 2.按ctl+~ 打开命令面板 mvn -Dmaven.test.skip=true spring-boot:run