盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式

  当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  <!DOCTYPE HTML>
  以上几种DOCTYPE都是标准的文档类型,无论使用哪种模式完整定义DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式)。 首先定义一个div块用来演示标准模式和怪异模式的区别,以下是Css样式
  box { width: 200px; height: 200px; border: 20px solid black; padding: 50px; margin: 50px; }   在标准模式下的盒模型如下图所示,盒子总宽度/高度=width/height+padding+border+margin
        
  在怪异模式下的盒模型如下图所示,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
    也就是盒子宽高 = 内容区域的宽高+padding+border;
        
   那么,在此基础上介绍一下css3属性box-sizing;

    box-sizing有两个值一个是content-box,另一个是border-box。


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


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

      目前使用此属性需要添加前缀:

        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
												

CSS的两种盒模型的更多相关文章

  1. css的两种盒子模型

    css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...

  2. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  3. DIV+CSS两种盒子模型(W3C盒子与IE盒子)

    在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...

  4. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  5. CSS的两种格式化上下文:BFC和IFC

    CSS的两种格式化上下文   文章包含很多个人理解,如果错误,欢迎指出~   在看本文之前,你要对CSS的盒子模型,Block-Level元素,Inline-Level元素有所了解,具体可参考CSS的 ...

  6. css文档之盒模型阅读笔记

    前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...

  7. JMS两种消息模型

    前段时间学习EJB.接触到了JMS(Java消息服务),JMS支持两种消息模型:Point-to-Point(P2P)和Publish/Subscribe(Pub/Sub),即点对点和公布订阅模型. ...

  8. 引入外部CSS的两种方式及区别

    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...

  9. 两种Tensorflow模型保存的方法

    在Tensorflow中,有两种保存模型的方法:一种是Checkpoint,另一种是Protobuf,也就是PB格式: 一. Checkpoint方法: 1.保存时使用方法: tf.train.Sav ...

随机推荐

  1. java面试复习

    1.jvm虚拟机 https://www.cnblogs.com/dingyingsi/p/3760447.html https://blog.csdn.net/qq_41701956/article ...

  2. python 之 实现su 到root账号

    简单记录一下如何通过python代码在linux系统下实现自动su - 切换到root账号, 使用到的模块:paramiko 使用到的方法:invoke_shell  功能:在SSH server端创 ...

  3. 2014 ACM/ICPC 亚洲区 北京站

    题目链接  2014北京区域赛 Problem A Problem B 直接DFS+剪枝 剪枝条件:当前剩余的方块数量cnt < 2 * max{a[i]} - 1,则停止往下搜. 因为这样搜下 ...

  4. Java调用Python程序

    最近,需要在应用中,需要使用Java程序去调用Python代码,主要有两种实现方式. 一.使用Jython架包 因为调用的Python代码中需要使用Json对象,开始使用jython2.5.2,发现不 ...

  5. A Good User Interface

    has high conversion rates and is easy to use. In other words, it's nice to both the business side as ...

  6. linux下添加自动启动项,linux 开机自动启动脚本方法

    #service servicename status是当前状态#chkconfig --list servicename是查看启动状态,也就是是否开机自动启动 首先写好脚本,如 mysql,把它放到 ...

  7. EasyHook库系列使用教程之四钩子的启动与停止

    此文的产生花费了大量时间对EasyHook进行深入了解同一时候參考了大量文档 先来简单比較一下EasyHook与Detour钩取后程序流程 Detours:钩取API函数后.产生两个地址,一个地址相应 ...

  8. MySQL常用SQL整理

    MySQL常用SQL整理 一.DDL #创建数据库 CREATE DATABASE IF NOT EXISTS product DEFAULT CHARSET utf8 COLLATE utf8_ge ...

  9. iOS实现提现类似的密码输入框

    最近一段时间,在网上不断看了一些技术人员写的代码demo,由于前段时间一直在写一个电商项目,记得有一个功能和看到的demo中类似,但是截然2种不同的处理方法,个人觉得我的这个方法更为简洁一些,所以我把 ...

  10. vue2.0 自定义 下拉刷新和上拉加载更多(Scroller) 组件

    1.下拉刷新和上拉加载更多组件 Scroller.vue <!-- 下拉刷新 上拉加载更多 组件 --> <template> <div :style="mar ...