看到教程上和一些博客上盒子模型的宽度 = 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. python的可视化展示（待更新）

    参考:https://www.cnblogs.com/zhizhan/p/5615947.html 通过matplotlib进行绘图: 例1: import matplotlib.pyplot as ...

  2. Web开发中的服务器跳转与客户端跳转

    两者比较如下: 跳转类型  客户端请求次数 服务端响应次数 URL变化 站外跳转 作用域 服务器跳转 1 1 无 否 pageContext.request.session.application 客 ...

  3. 【Go】Go语言的%d,%p,%v等占位符的使用

    golang 的fmt 包实现了格式化I/O函数,类似于C的 printf 和 scanf. # 定义示例类型和变量 type Human struct { Name string } var peo ...

  4. 回归平方和 ESS，残差平方和 RSS，总体平方和 TSS

    https://zhidao.baidu.com/question/565190261749684764.html 回归平方和 ESS,残差平方和 RSS,总体平方和 TSS   总变差       ...

  5. Jenkins slave-agent.jnlp 无法安装为服务（install as a service）

    问题: 在部署持续集成环境,配置slave节点时遇到一个问题,slave-agent.jnlp可以正常启动运行(不能正常启动的点这里) 但是在保存为系统服务时,slave-agent.jnlp点击[i ...

  6. 解决webpack打包vue项目后，部署完成后，刷新页面页面404

    1.url不动式url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的话刷 ...

  7. HDU | Friend Chains-4460 SPFA

    题目: Problem DescriptionFor a group of people, there is an idea that everyone is equals to or less th ...

  8. linux的shell脚本运行python程序

    可以说和windows里的bat是一样的. python3 /opt/pyweibo/get_user_info.py 104501 104502 104503

  9. 电脑如何连接windows server服务器

    第一步:win+r 启动‘运行’,输入mstsc 第二步:连接远程桌面,输入服务器ip 第三步,输入账户密码,登陆即可. 注释:mstsc,全称 Microsoft Telnet Screen Con ...

  10. day27—JavaScript实现定时器及其应用案例

    转行学开发,代码100天——2018-04-12 JavaScript中定时器有两种,分别是setInterval和setTimeout;其用法如下: 开启: setTimeout("fun ...