看到教程上和一些博客上盒子模型的宽度 = 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. SystemUI分析

    SystemUI是安卓的一个系统APP,负责的内容有系统通知栏,状态栏,最近应用程序,锁屏,壁纸,屏保,系统对话框,截屏,录屏等功能. Apk的路径位于/system/priv-app,源码code位 ...

  2. 使用WebAPI流式传输大文件（在IIS上大于2GB）

    这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...

  3. PHP 最全的正则表达式

    一.校验数字的表达式  1 数字:^[0-9]*$2 n位的数字:^\d{n}$3 至少n位的数字:^\d{n,}$4 m-n位的数字:^\d{m,n}$5 零和非零开头的数字:^(0|[1-9][0 ...

  4. 动态规划 List

    例题 #A 传纸条(Accepted)    #B 乘积最大 (Unaccepted)    #C 石子合并 (Accepted)    #D 加分二叉树 (Unaccepted)    #E 没有上 ...

  5. New Relic性能监控（一）概览

    New Relic性能监控(一)概览 2018-04-12 琅琊书生 本系列文章基于公司使用New Relic的经验,鉴于国内较少有这方面的文章,因此把我工作中了解到的知识分享给大家,希望可以给需要的 ...

  6. Node对象的一些方法

    Node对象是什么提供了 DOM的标准规范提供了Node对象,该对象主要提供了解析DOM节点树结构的属性和方法,DOM树结构主要是依靠节点进行解析,称为DOM节点树结构.Node对象是解析DOM节点树 ...

  7. Linux shell 归纳之 cp

    1. 复制文件夹folder1(包括所有子文件夹和文件), 并命名为folder2 # cp -r /usr/folder1 folder2 2. 复制文件file1 到它的上一级的目录的abc文件夹 ...

  8. 测开之路七十七：性能测试蓝图之js

    //定义全局的editor = nullvar editor = null; //ace_editor的初始化函数function ace_editor() { var editor = ace.ed ...

  9. php脚本超时时间设置

    设置PHP脚本执行超时的时间有下面这样一些方法:php.ini 中缺省的最长执行时间是 30 秒,这是由 php.ini 中的 max_execution_time 变量指定,倘若你有一个需要颇多时间 ...

  10. 关于Nuget包安装之后再卸载，找不到dll的问题

    场景: 在nuget上安装了FFTW.NET,自动的安装一堆其依赖的dll,那些dll都是donet自带的.再卸载这些dll的时候,项目可以生成成功,就是跑不起来.提示如下: 解决方案: 经过排查发现 ...