|
|
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
分享:
大家都在看
猜你喜欢

读 书 +更多

循序渐进Oracle——数据库管理、优化与备份恢复

本书从基础知识入手,详细讨论了Oracle数据库的创建、OEM及iSQL*Plus等工具的使用、Oracle的字符集知识、用户的创建与管理、表空间和数据文...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
博聚网