css盒子模型的宽度不包括margin
看到教程上和一些博客上盒子模型的宽度 = 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的更多相关文章
- css盒子模型的宽度问题
最近看css权威指南的时候,发现一个之前特别不清楚的概念——宽度. 每个块级元素都有一个元素框,元素框内包括了元素内容,元素内边距,元素边框,元素外边距. 所以元素框的宽度=元素内容宽度+元素内边距+ ...
- 理解CSS盒子模型
概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...
- IE、W3C两种CSS盒子模型
利用CSS来布局页面布局DIV有点逻辑性!重点理解盒子模型,标准流和非标准流的区别,还有定位原理!把这3个攻破了,就非常简单了!多实践多参考!最后就是兼容问题了,在实践中自然就有经验了!这些兼容技巧都 ...
- DIV + CSS 盒子模型
盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 图片看不清楚?请点击这里查看原图(大图). 从上图可以看到标准 W3C ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 聊聊css盒子模型
css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...
- css盒子模型（3）
盒子模型 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在讲理论之前,我们先要知道网页设计中常听的属性名:内容(co ...
- 前端面试必备的css盒子模型
今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...
随机推荐
- Linux系统下安装jenkins使用
jenkins 2.190.1 yum 安装 devops一梦千年 发布时间:10-0916:28 jenkins 2.190.1 yum 安装记录 安装环境: 所需安装包: https://pkg. ...
- spring boot 简介（基于SSM框架的一个升级版本吧）
Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过 ...
- java通配符写法
有时候我们会遇到这样的需求,需要把一个报文里的某些参数项通过通配符的形式配置成我们需要的结果值插入回报文中. String filetext = "<cn>#用户身份ID(主账号 ...
- 观察者模式使用WebForm实现的例子
观察者模式是一种可以描述一对多对象依赖关系的行为模式.当一个对象状态发生变化时,依赖它的其它对象会自动被更新状态.下面这个图展示了观察者模式的层级: 举个例子吧,我们某个报表界面现在有个dashboa ...
- [CSP-S模拟测试]:Dinner（二分）
题目描述 清儿今天请好朋友们吃饭,一共$N$个人坐在坐在圆桌旁.吃饭的第一步当然是点餐了.服务员拿来了$M$份菜单.第$i$个人阅读菜单并点出自己喜欢的菜需要花费时间$T_i$.当一个人点完菜之后,就 ...
- 牛客提高D3t1 破碎的矩阵
分析 我们发现如果行的异或和等于列的异或和那么对于n-1行m-1列的所有数的选择都是任意的 因为一定可以在它的行末/列末选一个合适的数是的整体满足 但是我们发现对于右下角那一个数是否满足存疑 我们设矩 ...
- Centos7.6 安装
序:在“Intel 英特尔 NUC6I7KYK 迷你主机” 上 安装“Centos7.6” 一.制作U盘启动盘 参考<制作CentOS的U盘启动盘>.<制作 CentOS7的U盘系统 ...
- npm install 安装不成功，提示python2.7
npm install 安装不成功的原因 是因为缺少python的环境 解决方法: 1.去官网下载https://www.python.org/download/releases/2.7/ 2.安装成 ...
- Git是目前世界上最先进的分布式版本控制系统（没有之一）。
http://zhidao.baidu.com/link?url=NSYPiSvtGTMoqMA9vt68FRRF8WbfYVmwWeMh47_2lkp0K3jFMl--1Co1tg1R4VshTQV ...
- telnet批量检测端口状态(linux)
批量检测端口通信: 准备文件树状图 telnet.sh 脚本内容如下: 文件说明 telnet_alive.txt : 活动的端口 telnet_die.txt : 离线的端口 telnet ...