盒子模型（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. Delphi下利用WinIo模拟鼠标键盘详解 有参考价值

    https://blog.csdn.net/fgrass_163/article/details/6365296 Delphi下利用WinIo模拟鼠标键盘详解 2011年04月26日 21:03:00 ...

  2. HTML CSS JS 特殊字符(转义)表

    HTML有许多特殊的字符,您对此有多少了解?平时在WEB制作中,您又有用到多少?或者说你在平时使用之时,是否也会碰到,有许多特殊字符要如何打印出来?比如说“笑脸”,比如说“版权号”.要是你用时忘记了这 ...

  3. postman杂记

    接到测试任务,测试6个接口 rap2 上的接口比较多,整体导出内容太多 就一个接口一个接口的,复制到了postman上 rap2部分接口,开发没有备注简介内容:通知开发备注下 对接口的理解,还是靠功能 ...

  4. 科普：PV，UV，VV，IP

    1.PV PV即Page View,即页面浏览量或点击量,用户每一次对网站中的每个网页访问均被记录一次.用户对同一页面的多次访问,访问量累计. 2.UV UV即Unique Visitor,是指通过互 ...

  5. [LeetCode] 1092. Shortest Common Supersequence

    LeetCode刷题记录 传送门 Description Given two strings str1 and str2, return the shortest string that has bo ...

  6. js文件编码 的坑

  7. 20191106 Spring Boot官方文档学习（1-2）

    学习内容相关信息 最新版本:2.2.0 CURRENT GA 官网地址 官方文档地址 单页版文档地址 代码生成网址 2.入门 Spring Boot的主要目标是: 为所有Spring开发提供更快且入门 ...

  8. argparse命令行传参

    import argparse parser = argparse.ArgumentParser(description='manual to this script') # 创建解析器,及其描述 p ...

  9. python 开启进程两种方法 multiprocessing模块 介绍

    一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu\_count\(\)查看),在python中大部分情况需要使用多进 ...

  10. HNUSTOJ-1437 无题

    1437: 无题 时间限制: 1 Sec  内存限制: 128 MB提交: 268  解决: 45[提交][状态][讨论版] 题目描述 tc在玩一个很无聊的游戏:每一次电脑都会给一个长度不超过10^5 ...