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

3.2.3 盒子的显示类型

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

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

3.2.3  盒子的显示类型

现实生活中看到的盒子,有正方形、长方形、圆柱形等,依据形状特点,可包裹不同物件。CSS中的盒子虽然没有那么多的形状,但在视觉呈现上不同类型的盒子还是会有很大的不同,有的盒子要占据一行,有的盒子不能定义外边距、宽度和高度,有的盒子宽度和高度能自适应。CSS中用display指定盒类型(即框类型),常用的有block(块)、inline(行内)、inline-block(行内块)、table(表格),以及CSS3新增的flexbox(伸缩盒)。

HTML元素只有两种默认的盒类型,即块级元素(block-level element)和行内元素(inline-level element)。其中行内元素不可定义CSS属性width、height、上下margin和上下padding。常用的span和div分别是行内元素和块级元素。

在下面的代码中,给span元素定义了上下内边距后,就像脱离了正常流,不但不会占据位置,还会与相邻的块级元素div重叠,效果如图3-7所示。

  1. <style> 
  2.   span {  
  3.     border: 1px solid #000;  
  4.     margin: 10px 0;  
  5.     padding: 10px 0;  
  6.     width: 300px;  
  7.     height: 100px;  
  8.   }  
  9. </style> 
  10. <div>块级元素</div> 
  11. <span>行内元素</span> 

有些元素,像img,虽然属于行内元素,但没有那些样式限制,与行内块的效果有点类似。这是由于在CSS中,元素有两种形式:替换元素(replaced element)和非替换元素(nonreplaced element)。img属于替换元素,所谓替换元素,是指元素内容需要引用其他位置的资源或来自用户的输入(即内容不在文档中),常用的替换元素除了img之外,还有object、video和表单元素(如input、textarea等)等。

常见笔试题:1.??什么是外边距塌陷?

答案:外边距塌陷(margin collapsing)也称为外边距合并,是指两个在正常流中相邻(兄弟或父子关系)的块级元素的外边距,组合在一起变成单个外边距,不过只有上下外边距才会有塌陷,左右外边距不会出现这种问题。通常有4种情况会发生塌陷,如下所列,每种情况还给出了相应的示例。

(1)父元素(没有上边框和上内边距)和***个子元素,在***个元素之前没有内容(文本、行内元素),同时为其定义了上外边距。

  1. <div style="margin-top:20px"> 
  2.   <div style="margin-top:10px">子元素</div> 
  3. </div> 

(2)父元素(没有下边框和下内边距)和***一个子元素,在***一个元素之后没有内容,同时为其定义了下外边距。

  1. <div style="margin-bottom:20px"> 
  2.   <div style="margin-bottom:10px">子元素</div> 
  3. </div> 

(3)两个相邻的兄弟元素,分别定义了下外边距和上外边距。

  1. <div style="margin-bottom:20px">兄弟元素</div> 
  2. <div style="margin-top:10px">兄弟元素</div> 

(4)一个空的元素(没有高、边框、内边距和内容),只定义了上下外边距。

  1. <div style="margin-bottom:20px; margin-top:10px"></div> 

2. 当出现外边距塌陷时,外边距之间的计算方式是怎样的?

答案:元素的外边距可以用正数或负数来指定,使用不同的组合会改变外边距的计算方式,总共有3种组合方式,如下所列:

(1)两个都是正数,取较大的值。

(2)两个都是负数,取绝对值较大的值。

(3)一正一负,取两个值相加的和。


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

51CTO读书频道二维码


51CTO读书会第9群:808517103

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

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

订阅专栏+更多

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

289人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

645人订阅学习

WOT2019全球人工智能技术峰会

WOT2019全球人工智能技术峰会

通用技术、应用领域、企业赋能三大章节,13大技术专场,60+国内外一线人工智能精英大咖站台,分享人工智能的平台工具、算法模型、语音视觉等技术主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

读 书 +更多

Java程序设计教程

本书对第1版的某些章节作了合理的调整,增加了部分实用的程序,并在每一章的最后加了适量的练习题,以巩固前面所学的知识,更加有利于等级考试...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客