|
|
51CTO旗下网站
|
|
移动端

3.2.1 盒模型

《前端程序员面试笔试宝典》第3章CSS基础,本章介绍的是CSS的基础知识,包括CSS的定义、目标和标准化等。本节为大家介绍盒模型。

作者:平文来源:机械工业出版社|2018-11-09 16:39

3.2.1  盒模型

盒模型(box model,也称为框模型)就是从盒子顶部俯视所得到的一张平面图,用来描述元素所占用的空间。有两种盒模型:W3C盒模型和IE盒模型(IE6以下,不包含IE6以及怪异模式下的IE 5.5+),两者不同之处是对元素尺寸的计算方式。当用CSS给某个元素定义宽或高的时候(代码如下所示),IE盒模型中内容的宽或高将会包含内边距和边框。

  1. div {  
  2.   padding: 10px;  
  3.   margin: 10px;  
  4.   border: 1px solid #000;  
  5.   width: 100px;  

图3-3是两种盒模型的区别示意图,第一个是W3C盒模型,第二个是IE盒模型,中间的100px就是上面代码中所定义的div元素的宽度。

当一个元素包含其他元素时,这个元素的内容区域就是其后代元素的容器,这个容器也称为包含块(containing block),如图3-4所示。


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书会第9群:808517103

【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

活学活用 Ubuntu Server

活学活用 Ubuntu Server

实战直通车
共35章 | UbuntuServer

218人订阅学习

Java EE速成指南

Java EE速成指南

掌握Java核心
共30章 | 51CTO王波

83人订阅学习

Mysql DBA修炼之路

Mysql DBA修炼之路

MySQL入门到高阶
共24章 | 武凤涛

471人订阅学习

读 书 +更多

计算机病毒分析与防治简明教程

本书全面翔实地介绍了各种病毒的原理,以操作系统的发展为主线,结合病毒的发展过程来综合分析病毒。在分析工具上,较多地利用了脚本语言、...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客

博聚网