CSS 定位之一切都是框

还记得上一篇讲的浮动吗?我们现在已经知道了,浮动是一种用于布局的属性,但是在CSS 中要实现定位不只是浮动这么简单。But,在介绍定位之前,一定要在脑子里形成一个观念。

一切都是框

CSS 的盒子模型让我们能够把元素看成是一个一个的框,这些框主要分为块框和行内框两类。

块框(块元素)

我常常把div 元素及其之间的内容称为一个块,这意味着div 元素显示一块内容,也就是“块框”,能显示块框的元素还有 p 、h1(标题元素)等元素。

行内框(内联元素)

span、strong 等元素的内容显示在行之中,即“行内框”。实际上,每个行内元素都会生成一个行内框。简单来说,行内框就是行内元素的边框,它不会实际显示出来,在没有padding 等其他因素影响时,行内框就等于内容区域。

行内元素并不遵守盒子模型,在浏览器中占据的高度只由元素的大小决定,它是无法用CSS 来改变的,也就是说设置margin、padding 是没有用的,唯一能改变的就是为行内元素设置行高。比如:

加上了padding 之后,虽然表面上看,撑起了行内框的高度,使得边框更高了,但事实上并没有改变行内元素本身的高度,所以内边距部分会和上面的元素重叠在一起。

无名块框

在块框中,有这样一种情况,如下所示。在div 中,即使部分文本没有定义称段落,也会被当成段落看待。在这样的情况,这样一行文本就形成了一个“无名块框”。

行框

还有一个与“行内框”仅差一字的概念,叫做“行框”。它是给某个行一个虚拟的矩形框,也不会实际显示出来。行框的高度等于本行之内所有元素中行内框最大的值。有多行内容的时候,每行都有自己的行框。

块框和行内框的转换

由于无名块框和行框是无法应用样式的,所以display 属性在这时候就发挥作用,使这些框可以转换为行内元素和块元素。

《css浮动——构建布局的必备属性》

中已对该属性详细介绍过,这里不讲啦。

总结

这一篇文章只向大家介绍一个在学习前端必须要建立的理念——一切都是框。把元素当成框来看待,自然对其布局会有“套路”般的认知。而我自认为,学习一项新技能,其实就是先学套路。好啦,下一篇我们再介绍CSS 定位机制的组成。

不介意的留个赞吧!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180910G0A0C400?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券