看到教程上和一些博客上盒子模型的宽度 = content + padding + margin + border,应该是不包括margin的

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>css盒子模型的宽度</title>

    <style type="text/css">

    *{

       margin:0;

       padding:0;

    }

    div {

    background-color: lightgrey;

    width: 300px;

    border: 25px solid green;

    padding: 25px;

    margin: 30px;

    }

    </style>

  </head>

  <body>

   <div>

     盒子模型不包括margin

   </div>

  </body>

</html>

　　浏览器显示：

我们来算一下盒子模型的宽度：如果按照其它教程上应该是

content + padding + margin + border 我们来计算一下

300 + 25*2 + 25*2 + 30*2 = 460

而我们实际上浏览器显示是400

这就证明盒子模型并不包括margin的边距

css盒子模型的宽度不包括margin的更多相关文章

  1. css盒子模型的宽度问题

    最近看css权威指南的时候,发现一个之前特别不清楚的概念——宽度. 每个块级元素都有一个元素框,元素框内包括了元素内容,元素内边距,元素边框,元素外边距. 所以元素框的宽度=元素内容宽度+元素内边距+ ...

  2. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  3. IE、W3C两种CSS盒子模型

    利用CSS来布局页面布局DIV有点逻辑性!重点理解盒子模型,标准流和非标准流的区别,还有定位原理!把这3个攻破了,就非常简单了!多实践多参考!最后就是兼容问题了,在实践中自然就有经验了!这些兼容技巧都 ...

  4. DIV + CSS 盒子模型

    盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 图片看不清楚?请点击这里查看原图(大图). 从上图可以看到标准 W3C ...

  5. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  6. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  7. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  8. css盒子模型（3）

    盒子模型 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/      在讲理论之前,我们先要知道网页设计中常听的属性名:内容(co ...

  9. 前端面试必备的css盒子模型

    今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...

随机推荐

  1. 【leetcode】447. Number of Boomerangs

    题目如下: 解题思路:我首先用来时间复杂度是O(n^3)的解法,会判定为超时:后来尝试O(n^2)的解法,可以被AC.对于任意一个点,我们都可以计算出它与其余点的距离,使用一个字典保存每个距离的点的数 ...

  2. ht-8 对arrayList中的自定义对象排序( Collections.sort(List<T> list, Comparator<? super T> c))

    package com.iotek.set; import java.util.ArrayList; import java.util.Collections; import java.util.Co ...

  3. 让Flash内心崩溃的HTML5历史

    对于HTML5,在今天这个互联网时代,大部分人应该至少都听说过这个名字,或许很多人对HTML5的了解都起于一句话:FLASH杀手. HTML5其实早已不是什么新鲜的事物了,其最初的雏形早在2004年就 ...

  4. Anaconda概念和使用方法

    Anaconda概述 Anaconda是一个用于科学计算的Python发行版,支持 Linux, Mac, Windows系统,提供了包管理与环境管理的功能,可以很方便地解决多版本python并存.切 ...

  5. Strassen __128int

    题目链接 题意思路很简单,递归求最小就好了.但__128int没见过.故写博客记下.__128int如果输入输出就要自己写函数. #include<bits/stdc++.h> using ...

  6. cookie字段属性解析

    一个域名下面可能存在着很多个cookie对象.如果我们用selenium的get_cookies方法,可以得到当前浏览器的多个cookie,比如: {'name': 'QCARJSESSIONID', ...

  7. HDU4035 Maze (概率DP)

    转:https://www.cnblogs.com/kuangbin/archive/2012/10/03/2711108.html 题意: 有n个房间,由n-1条隧道连通起来,实际上就形成了一棵树, ...

  8. “The creator of this fault did not specify a Reason” Exception

    “The creator of this fault did not specify a Reason” Exception if(!DidItPass) { InvalidRoutingCodeFa ...

  9. python爬虫学习之路-遇错笔记-1

    当在运行爬虫时同时开启了Fidder解析工具时(此爬虫并不是用于爬取手机端那内容,而是爬去电脑访问的网页时),访问目标站点会遇到以下错误: File "C:\Users\litao\AppD ...

  10. 线段树2（P3373）

    传送 感谢洛谷题解让我理清了这一撮标记 这里多了一个乘法操作,乘法的优先级高于加法.我们来思考一下有关标记的问题. 首先由两种操作,可以想到要有两个标记,一个标记乘法(mul[k]),一个标记加法(a ...