盒子模型（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. 禁止SYS和SYSTEM用户远程登录Oracle oracle的sys和system默认密码

    alter system set remote_login_passwordfile=none scope=spfile; system默认:manager sys默认:change_on_insta ...

  2. P站图片下载工具。

    下载 Pixiv 的图片比较麻烦,就做了这么个东西. 主要就是用 HttpWebRequest HttpWebResponse 下载了网页的 html 代码然后截取里面的内容.代码上传到了文件里. p ...

  3. 国家授时中心的NTP服务器地址 210.72.145.44

    国家授时中心的NTP服务器地址 210.72.145.44

  4. 【Qt开发】QThread中的互斥、读写锁、信号量、条件变量

    在gemfield的<从pthread到QThread>一文中我们了解了线程的基本使用,但是有一大部分的内容当时说要放到这片文章里讨论,那就是线程的同步问题.关于这个问题,gemfield ...

  5. MySQL-快速入门（6）连接查询、子查询、正则表达式查询、数据的插入删除更新

    1.内连接查询:inner join ... on 只有满足条件的记录才能够出现在结果关系中,即完全相等.自连接查询是一种特殊的内连接查询. 2.外连接查询: 1>左外连接 / 左连接:返回包括 ...

  6. 认识 JVM

    1 什么是JVM?  JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范.比如 对Class文件类型,运行时数据,帧栈 ,指令集等的规范 ,Hot ...

  7. Thinkphp设置PC和手机端模板

    <?php // 判断手机端 function ismobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X ...

  8. linux下occi操作oracle数据库，中文乱码的问题

    转载:http://www.linuxidc.com/Linux/2008-02/11238.htm 前几日调通了OCI连接数据库的问题后,用Oracle自带的例子测试了一下,能正常读取数据(都是英文 ...

  9. Python作图包含type3字体解决方案

    1. 解决方案 matplotlib.rcParams[‘text.usetex’] = True

  10. 解决Java线程池任务执行完毕后线程回收问题

      转载请注明出处:http://www.cnblogs.com/pengineer/p/5011965.html         对于经常使用第三方框架进行web开发的程序员来说,Java线程池理所 ...