日常生活中所见的盒子也就是能装东西的一种箱子,如果家里的东西很多,那么就需要按类别装到不同的箱子中。网页中的内容表现也是一样的,如果页面内容比较多,又想让页面更整洁、更美观、有很好的用户体验,则也需要按类别划分到不同的区块中,划分出来的每个区块就可以看作一个装东西的盒子。而每个HTML元素都可以看作一个区块,类似于装了东西的盒子,所以称其为盒子模式。在盒子模型中除了可以装内容(文字、图片等),也可以再装小盒子,所以一个页面的布局就是使用多个盒子按顺序摆放或嵌套组合成页面框架,再在不同的盒子中放入对应的网页内容。

如何去定义一个盒子呢?又如何去摆放盒子布局页面呢?通常我们使用“无意义”的标签<div>定义一个盒子模型,再通过CSS属性去声明盒子模型的属性。一个盒子的属性包括它的宽度(width)和高度(height),盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间还有边界(margin),如图1所示。

图1  W3C盒子模型

该盒子模型的声明代码如下:

用浏览器打开包含这段HTML代码的文件,效果如图2所示:

图2  W3C盒子模型

在使用CSS对网页进行布局时,盒子模型是页面布局的基石。上例中则是由id为#box的<div>元素声明的矩形框,这个框由元素内容、空白、填充及边框等组成。而在CSS中使用width和height属性指定区块的宽度和高度分别为200px,使用border属性添加4个边宽度都为5px的边框线,通过margin和padding属性分别定义区块外部边距20px和内部填充10px的距离,如图2所示。

图2  W3C盒子模型

使用margin指定外部边距是为了设置与其他区块之间的距离,而使用内部填充的目的是在内容与边框之间创建一个隔离带,使内容不会与边框混在一起。定义盒子模型所需要的CSS属性如表1所示。

表1  声明盒子模型的CSS属性

盒子区块外部边距和内部填充距离都是可选的,大部分元素的默认值都为0,但有一些元素会存在非0的默认值,例如body、ul、h3等,会给页面布局带来不便。可以将元素的margin和padding属性设置为0,清除这些默认的空白。在网页设计上,内容常指文字、图片等元素,但也可以是小盒子(DIV 嵌套)。与现实生活中的盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏;而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它是不会被损坏的。填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度。而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度,以及这个盒子是用什么颜色的材料做成的。边界就是该盒子与其他东西要保持多大距离。

IT兄弟连 HTML5教程 W3C盒子模型的更多相关文章

  1. IT兄弟连 HTML5教程 使用盒子模型的浮动布局

    虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式.而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另 ...

  2. IT兄弟连 HTML5教程 使用盒子模型设计页面布局

    布局所涉及的技术非常很多,足以另写单独的一本书了.在本节中主要介绍网站中最常用的布局方案,包括区块框居中.两列浮动.三列浮动及多列浮动的区块框. 1  居中设计 区块框居中的设计是在网页布局中常用的技 ...

  3. w3c盒子模型与ie盒子模型

    盒子模型是css的专有名词,用来描述页面设置中的各种属性,如内容(content).填充(padding).边框(border).边界(margin),由于这些属性拼在一起,与日常生活中的“盒子”很相 ...

  4. 【css】IE盒子模型和标准W3C盒子模型

    其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型. 1.标准盒子 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 c ...

  5. IE盒子模型和W3C盒子模型

    IE盒模型出现在ie5.5以下的版本当中,ie6以上就实行W3C盒模型. box-sizing有两个属性,border-box和content-box. border-box对应传统的盒子模型,即ie ...

  6. W3c盒子模型+IE盒子模型+box-sizing属性

    1.盒子模型有两种,标准盒模型和IE盒模型,其中W3C标准的盒模型就是在网页的顶部加上 DOCTYPE 声明. (1)W3C标准的盒模型 W3C盒子模型包括4部分:margin,border,padd ...

  7. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题

    小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...

  8. IT兄弟连 HTML5教程 DIV+CSS的兼容性问题

    使用DIV+CSS布局网页其实是很容易的事情,但各种浏览器之间的不兼容性问题,加大了页面布局的难度,给程序员带来很多不便,于是需要花费更多的时间在调试各种浏览器的兼容性上.因为部分CSS属性在不同的浏 ...

  9. JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support .在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...

随机推荐

  1. Python高级数据结构-Collections模块

    在Python数据类型方法精心整理,不必死记硬背,看看源码一切都有了之中,认识了python基本的数据类型和数据结构,现在认识一个高级的:Collections 这个模块对上面的数据结构做了封装,增加 ...

  2. shell中的函数、shell中的数组、告警系统需求分析

    7月16日任务 20.16/20.17 shell中的函数20.18 shell中的数组20.19 告警系统需求分析 20.16/20.17 shell中的函数 函数就是一个子shell就是一个代码段 ...

  3. python_regex

    正则表达动机(目的):    1.处理文本成为计算机主要工作之一    2.根据文本内容进行固定搜索是文本处理的常见工作    3.为了快速方便的处理上述问题,正则表达式技术诞生,逐渐发展为一种单独技 ...

  4. 源码分析 RocketMQ DLedger 多副本之 Leader 选主

    目录 1.DLedger关于选主的核心类图 1.1 DLedgerConfig 1.2 MemberState 1.3 raft协议相关 1.4 DLedgerRpcService 1.5 DLedg ...

  5. luogu P1044 栈

    题目背景 栈是计算机中经典的数据结构,简单的说,栈就是限制在一端进行插入删除操作的线性表. 栈有两种最重要的操作,即poppop(从栈顶弹出一个元素)和pushpush(将一个元素进栈). 栈的重要性 ...

  6. iOS10 openURL方法跳转到设置界面

    问题 在iOS10之前,跳转到系统设置界面的某个指定界面的方式如下: //打开定位服务界面 NSURL*url=[NSURL URLWithString:@"prefs:root=Priva ...

  7. 配置中心入门案例以及出现Could not resolve placeholder 'XXX' in value "${XXX}"的解决方式

    编写配置中心的服务端 创建项目 修改 pom 文件添加 config-server 坐标 <?xml version="1.0" encoding="UTF-8&q ...

  8. 了解一下Mysql分布式事务及优缺点、使用案例(php+mysql)

    在开发中,为了降低单点压力,通常会根据业务情况进行分表分库,将表分布在不同的库中(库可能分布在不同的机器上),但是一个业务场景可能会同时处理两个表的操作.在这种场景下,事务的提交会变得相对复杂,因为多 ...

  9. 怎么定义一个自己的vue组件

    1.在src文件夹中创建一个hello文件夹,然后创建hello.js和hello.vue 2.hello.vue代码如下 <template> <button>这是hello ...

  10. stm32 io操作 头文件规范

    在stm32众多项目开发中,有太多的对io进行操作,若置1或清0,使用官方库提供的函数,固然方便,规范,但是需要包含标准的库,尺寸较大,还得处理不同版本兼容问题,包括io初始化也太繁琐,于是操作原子等 ...