一旦为页面设置了恰当的 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. js模块开发（一）

    现在嵌入页面里面的javascript代码越来越复杂,于是可能依赖也越来越严重,使用别人开发的js也越来越多,于是在理想情况下,我们只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 于是j ...

  2. Ubuntu14.04安装Ubuntu Tweak

    第一步：添加tweak源 sudo add-apt-repository ppa:tualatrix/ppa 第二步：更新 sudo apt-get update 第三步：安装ubuntu-tweak ...

  3. websocket 实现聊天功能

    <html> <head> <base href="<%=basePath%>"> <title>webscoket t ...

  4. 计算LDA模型困惑度

    http://www.52nlp.cn/lda-math-lda-%E6%96%87%E6%9C%AC%E5%BB%BA%E6%A8%A1 LDA主题模型评估方法--Perplexity http:/ ...

  5. php 验证(检查)日期格式是否正确

    /** * 检查指定字符串是否为日期格式 年-月-日 * @param $date 日期字符串 * @return bool true 是日期格式 false 不是日期格式 */function va ...

  6. E/dalvikvm: Could not find class...

    logcat日志输出信息: - ::-/net.chiangfai I/dalvikvm: Could not find method android.content.res.Resources.ge ...

  7. pptv泥够了！pptv“关闭”事件为营销炒作坐实！

    昨天还让人心生怜悯的pptv聚力,今天下午2点07分又再一次发布微博,而几天发布的内容是see U again!再次证实了pptv昨天的“关闭”还是“倒闭”消息为营销炒作.不过马浩周要问了,真的要这么 ...

  8. MVC中的一些坑

    1.@字符在.cshtml文件中不能启用 经过2个小时求解,发现是配置文件web.config中引用的namespace少了System.Web.Optimization,所以不能启用,因为创建的空的 ...

  9. session过期时间

    在一般系统登录后,都会设置一个当前session失效的时间,以确保在用户没有使用系统一定时间后,自动退出登录,销毁session. 具体设置很简单: 在主页面或者公共页面中加入:session.set ...

  10. TweenMax学习一

    TweenMaxjs是一个性能很高的js动画框架,它与css3动画具有时间轴的概念.你可以很方便的把动画添加到一个时间轴队列里面去按照你需要的顺序去执行. 官网地址: http://greensock ...