一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

CSS盒子模型元素实际宽度的计算的更多相关文章

  1. css盒子模型之边框宽度，边框颜色与边框样式

    /* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...

  2. [HTML/CSS]盒子模型，块级元素和行内元素

    目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...

  3. css盒子模型的宽度不包括margin

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

  4. css盒子模型的深入理解，在块级、行内元素的区别和特性

    css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...

  5. 理解CSS盒子模型

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

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

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

  7. 聊聊css盒子模型

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

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

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

  9. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

随机推荐

  1. springboot 的dataSource 一些配置

    参考: https://segmentfault.com/a/1190000004316491

  2. ArcGIS JavaScript + 天地图API之显示混乱

     异常描述: (1)ArcGIS JavaScript 调用天地图WMTS服务,出现了这种混乱的效果,加载不完整. (2)昨天是相关瓦片的请求,Google浏览器显示的是请求失败.当时怀疑是无线网络的 ...

  3. 保护眼睛（ubuntu 和 chrome）

    chrome 安插件https://chrome.google.com/webstore/detail/%E4%BF%9D%E6%8A%A4%E7%9C%BC%E7%9D%9B/fgadnbmmoln ...

  4. 经典的javascript函数实例，css的. #区别

    先贴javascript经典例子代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. 【转】c#处理3种json数据的实例

    http://www.jb51.net/article/48027.htm http://json2csharp.chahuo.com/ 网络中数据传输经常是xml或者json,现在做的一个项目之前调 ...

  6. php数据优化

    Array ( [0] => Array ( [id] => 19 [receive_id] => 41 [mac] => a4:3d:78:fc:49:50 [staytim ...

  7. TypeScript 自动编译

    安装Typescript npm install -g typescript 手动编译 tsc greeter.ts 自动编译 tsc -w greeter.ts

  8. es6 ajax

    简单的co用例: var co=require("co") class view{ constructor(){ co(function*(){ var p1=this.ajax1 ...

  9. Ubuntu 14.04 编译安装 boost 1.58

    简介 Boost is a set of libraries for the C++ programming language that provide support for tasks and s ...

  10. （分享）java向MySQL插入当前时间的四种方式和java时间日期格式化的几种方法(案例说明)

    原文地址 http://blog.csdn.net/yangkai_hudong/article/details/18705713