盒子模型（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. ubutnu同时安装OpenCV2和OpenCV3及contrib

    1.OpenCV2源码安装 安装依赖项 sudo apt-get install build-essential //build-essential是c语言的开发包,包含了gcc make gdb和l ...

  2. Dapper基本使用

    http://www.cnblogs.com/Sinte-Beuve/p/4231053.html

  3. windows10下安装pygame并验证成功

    首先要确保网络正常 py -m pip install --upgrade pip python -m pip install pygame --user 然后进行验证: py -m pygame.e ...

  4. Windows netcat 的工具的简单使用

    1. 下载 https://eternallybored.org/misc/netcat/ 2. 将目录添加到环境变量 C:\Work\netcat 3. 简单实验 4. 查看说明 UPDATE // ...

  5. 数据库系统原理之SQL(四)

    数据库系统原理之SQL(四) 1. 数据更新 插入数据 INSERT-VALUES语句 #插入多条数据 insert [into] table_name (column_name,...) value ...

  6. 函数 FUNCTION

    函数 FUNCTION 定义: 带名字的代码块,用于执行具体任务. 注意: 应给函数指定描述性名称,只是用小写字母和下划线. 函数代码块以 def 关键词开头,后接函数标识符名称和圆括号 (). 任何 ...

  7. 配置多个broker

    前言 什么是kafka?举个例子,生产者消费者,生产者生产鸡蛋,消费者消费鸡蛋,生产者生产一个鸡蛋,消费者就消费一个鸡蛋,假设消费者消费鸡蛋的时候噎住了(系统宕机了),生产者还在生产鸡蛋,那新生产的鸡 ...

  8. easyui 前端分页及前端查询

    1.静态分页核心方法 // 前端分页 -- 将datagrid的loadFilter属性设置为这个方法名即可 function partPurchasePagerFilter(data) { if ( ...

  9. some problem

    CF1257F Make Them Similar $solution:$ 折半搜索后考虑如何维护两个数组的和,可以将 $A$ 中每个数减 $A_1$ ,$B$ 中每个数被减 $B_1$ ,$map$ ...

  10. 利用AXI VDMA实现OV5640摄像头采集

    利用AXI VDMA实现OV5640摄像头采集 导读:摄像头采样图像数据后经过VDMA进入DDR,通过PS部分控制,经过三级缓存,将DDR中保持的图形数据通过VDMA发送出去.在FPGA的接收端口产生 ...