看到教程上和一些博客上盒子模型的宽度 = 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. dict常用操作

    dict是python中的常用数据结构,应该尽量掌握其使用方法 """ 初始化一个dict的四种方式: 1. dict() -> 创建一个空的dict 2. dic ...

  2. python学习笔记（十九）面向对象编程，类

    一.面向对象编程 面向对象,是一种程序设计思想. 编程范式:编程范式就是你按照什么方式去编程,去实现一个功能.不同的编程范式本质上代表对各种类型的任务采取的不同的解决问题的思路,两种最重要的编程范式分 ...

  3. 【説明する】DS

    其实就是数据结构课后题整理....只会一个是什么鬼 染色问题: 线段树? 功能太强大了! 我们并不需要那么多的功能 运用并查集!!! 将相同的并为一段 BZOJ 2375(讲真我没找到这个题在哪里.. ...

  4. hibernate插入中文字段时，无法插入数据库

    体现: hibernate插入数据时,一直报错: Caused by: java.sql.SQLException: Incorrect string value: '\xE5\xBC\xA0\xE4 ...

  5. Python_008(文件操作)

    一.文件操作 1.只读操作 f = open("taibai.txt",mode = "r",encoding = "utf-8" s = ...

  6. springboot启动报错start bean 'eurekaAutoServiceRegistration' NullPointerException

    解决方案参考:https://blog.csdn.net/hhj13978064496/article/details/82825365 我将eureka的依赖包放到了依赖包的最下面,启动报错, 如下 ...

  7. Step1 - How to: Define a Windows Communication Foundation Service Contract

    https://msdn.microsoft.com/en-us/library/ms731835.aspx This is the first of six tasks required to cr ...

  8. HDU6702 ^&^（思维）

    HDU6702 ^&^ 目标为 \((A \oplus C) \& (B \oplus C) = 0\) ,易得: \(A \& B=0\) 时:\(C = 1\) . \(A ...

  9. L2 Regularization for Neural Nerworks

    L2 Regularization是解决Variance(Overfitting)问题的方案之一,在Neural Network领域里通常还有Drop Out, L1 Regularization等. ...

  10. workflow-core 简介

    最近想做一个OA相关的网站开发,一直都听说有workflow的东西,之前也断断续续学习过 Workflow Foundation 4.0,还是没有搞明白到底能够用它做什么 但还是觉得workflow在 ...