CSS盒模型制定网页的宽度和高度的原理

2016-02-19 23:12 1 1 收藏

下面图老师小编跟大家分享一个简单易学的CSS盒模型制定网页的宽度和高度的原理教程，get新技能是需要行动的，喜欢的朋友赶紧收藏起来学习下吧！

【 tulaoshi.com - Web开发】

当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。

如上一段的代码，很多时候我们会把它所占的位置计算成width:120px，height:120px，因为在正常的理解下，padding是内边距，应该是包括在width里面的，而margin是外边距，所以width＝margin-left + margin-right + width，但是浏览器对于CSS盒模型的解释却并非如此，所以最终我们会发现布局出来的网页宽度与高度都会超出我们预期的计算，最后造成显示上的错位。

其实不然，对于test所占的位置的真正计算应该是width=margin-left + margin-right + padding-left + padding-right + width，也就是宽度真正所占的大小应该是内边距+外边距+宽度本身，也就是说test真正的大小应该是140px才对。高度的计算与宽度的计算是一样的。

而如果给test加上边框的话，这个宽度与高度的算法还应该加上边框的大小。

width:100px;height:100px;}

这里的test的宽度就应该是外边框+内边框+边框+宽度本身，所以test的width是 150px。

如下图所示，width与height真正所占的位置并不是它本身的那一小块，而应该是一直到最外面深蓝色的那个层为止。

来源:https://www.tulaoshi.com/n/20160219/1629448.html

上一篇：从三方面加速CSS样式作用网页速度
下一篇：查看Windows 7系统时钟的方法

看过《CSS盒模型制定网页的宽度和高度的原理》的人还看了以下文章更多>>

实例详解CSS网页布局原理

标签： Web开发

DIV+CSS布局用CSS来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。定位定位属性position用于定义一个元素是否absolute(绝对)，relativ...

Javascript页面宽度高度

标签： Web开发

关于获取各种浏览器可见窗口大小的一点点研究 script function getInfo() { var s = ""; s += " 网页可见区域宽："+ document.body.clientWidth; s += " 网页可见区域高："+ document.body.clientHeight; s += " 网页可见区域宽："+ document.body.offsetWi...

ASP中取得图片宽度和高度的类（无组件）

标签： ASP

<% Class ImgWHInfo '获取图片宽度和高度的类，支持JPG，GIF，PNG，BMP Dim ASO Private Sub Class_Initialize Set ASO=Server.CreateObject("ADODB.Stream") ASO.Mode=3 &...

CSS设计网页小技巧:100%的高度

标签： Web开发

在前端人员之间有一个普遍存在的问题，如何让一个div的高度自动延伸到浏览窗口100%的高度。有一些不同的方法可以实现，但是，我想出了一个我个人比较喜欢的方法。今天，我将于你分享一下。我对你是不了解的，但我试图弄明白如何让我的布局垂直拉伸到页面的100％高度，这样一个令我沮丧的问题。我想让div结构自动延伸，但是它就是不能自动...

CSS入门教程:计算CSS盒模型宽和高

标签： Web开发

出处：当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;} 如上一段的代码，很多时候我们会把它所占的位置计算成width:120px，height:120px，因为在正常的理解下，padding是...

查看更多精彩>>