CSS盒模型
作者：糖伴西红柿 来源：前端观察 发布时间：2009-06-09 14:23:00
CSS 盒模型
网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的，请看下图：
如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿)，就会很熟悉下面的图表了。
这个图表很好地展示了作用于页面上任意盒子的数值。
注意以上两个例子中，margin 都是白色的。Margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容，因此 margin 是盒模型的一个重要的组成部分。
盒子本身的大小是这样计算的：
Width width + padding-left + padding-right + border-left + border-right
Height height + padding-top + padding-bottom + border-top + border-bottom
值未声明的情况
如果未声明 padding 或者 border，那他们或者值为零(使用 css reset 时)，或者为浏览器的默认值(很可能不是零，尤其是那些通常没有重置的表单元素)
块级盒的默认宽度
如果未声明宽度，并且盒子是静态或者相对定位的，宽度会保持 100％的 宽度，padding 和 border 会向内推动，而不是向外扩展。
但是，如果明确设置盒子的宽度为 100％，那么 padding 就会向外延展。
The lesson here being that the default width of a box isn’t really 100％ but a less tangible “whatever is left”. This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.
要注意的是，盒子的默认宽度并不真的是 100％，而是剩下的可能值(应该是说，剩余真实存在的宽度 － 糖伴西红柿)。应该了解这个特殊值，因为很多情况下，它对于设置/不设置宽度都是非常有用的。
我遇到的最大的麻烦就是 textarea(文本框) 元素了，它们需要设为宽度为所需的”cols”属性，并且不能包含子元素。因此通常需要明确的设置 textarea 的宽度为 100％，但有 padding 时，就会延展 textarea 的宽度。固定宽度环境下，通常可以设置为合适的像素值宽度，但是变宽情况就没那么幸运了。
0
投稿猜你喜欢
以上是效果图，本图表使用d3.js v4制作。图表主要功能是在六边形格子中显示数据，点击底部图标可以切换指定格子高亮显示，图表可以随浏览器任- 本文实例讲述了javascript设置页面背景色及背景图片的方法。分享给大家供大家参考，具体如下：<!DOCTYPE HTML PUB
- pymsql是Python中操作MySQL的模块，其使用方法和MySQLdb几乎相同。但目前pymysql支持python3.x而后者不支持
- 首先非常感谢作者针对bootstrap table分页问题进行详细的整理，并分享给了大家，希望通过这篇文章可以帮助大家解决Bootstrap
- 编写程序，完成“名片管理器”项目需要完成的基本功能：添加名片删除名片修改名片查询名片退出系统程序运行后，除非选择退出系统，否则重复执行功能m
- 前言前几天写了一篇MySQL高并发生成唯一订单号的方法，有人私信问有没有SQL server版本的，今天中午特地写了SQL server版本
- CTE（Common Table Expressions）是从SQL Server 2005以后版本才有的。指定的临时命名结果集，这些结果集
- 上一篇文章为大家介绍了 GoFrame gcache使用实践 | 缓存控制 淘汰策略 ，得到了大家积极的反馈。后续几篇文章再接再厉，仍然为大
- 从 Python 3 开始，str 类型代表着 Unicode 字符串。取决于编码的类型，一个 Unicode 字符可能会占 4 个字节，这
- 在IE7还不支持counter 和increment 属性之前，我从来没有用过它们，也从来没有使用过:before 伪元素和content
- 总结类的定义很久以前，语言都是面向过程的，经过计算机科学家的探索，出现了面向对象。面向对象可以解释生活中很多东西。比如人，人就是个对象，有参
- 本文实例讲述了Thinkphp5.0框架视图view的循环标签用法。分享给大家供大家参考，具体如下：volist标签：<!-- 使用v
- PyQt的文本操作的继承关系：QTextBrowser ( QtGui.QTextEdit)其中QTextEdit具有的功能函数：copy(
- Python 处理数据的实例详解最近用python（3.2的版本）写了根据特定规则，处理数据的一个小程序，用到了一些python常用的基础知
- 本文实例为大家分享了python实现发送QQ邮件的具体代码，供大家参考，具体内容如下东西比较简单，简单讲一下，直接贴代码了，其他邮箱都类似。
- 本文实例讲述了Python list列表中删除多个重复元素操作。分享给大家供大家参考，具体如下：我们以下面这个list为例，删除其中所有值为
- pyfinance简介在查找如何使用Python实现滚动回归时，发现一个很有用的量化金融包——pyfinance。顾名思义，pyfinanc
- 这里我们采用的是使用Oracle数据库进行相关操作在连接数据库之间，应下载相应的工具包cx_Oracle，在你安装的Python文件夹中找到
- 引言本文介绍的如何使用Pandas来读取各种json格式的数据，以及对json数据的保存读取json数据使用的是pd.read_json函数
- AttribteError: ‘module' object has no attribute xxx'描述:模块没有相关属
