我不知道的CSS盒子

626 阅读2分钟

很久之前学习css的时候,我只看到盒模型四大家族——content,padding,border,margin,以及他们分别代表什么,气什么作用,不同浏览器上对于width属性的计算方式不一样。

然后到现在,我才反应过来,哪有这么简单!!!(对不起是我太菜了)

当然理解盒模型的四大家族也很重要,但是有些细节的地方被我忽略到了,所以想在这里再梳理一下。

盒子与display

关于display的值,我们都晓得block,inline, inline-block,list-item,none, table...

就行为来看:

  • 值为block:一个水平流上只单独显示着一个元素
  • 值为inline:好几个inline的元素可以显示在一个水平流上,但是不能设置width/height
  • 值为inline-block: 能和图文显示一行,又能直接设置width/height
  • list-item: 一行一个,并且会在每一条前面显示小图标

但是为什么是这么展示的呢?当然是因为css盒子

1. 为了list-item

因为在一开始的时候呢,只有两种盒子,块级盒子内联盒子,块级盒子控制结构,内联盒子控制内容,简单和谐,直到有一天出现了list-item这个东西,咋显示呢,太难了,那加一层盒子吧,于是给list-item加了一个标记盒子,用来放前面的小图标

2. 为了inline-block

好的list-item搞定了,可是inline-block咋整,又要显示在一行,又要有宽高,好像是我们成年人什么都要一样,但是人家是真的啥都要了还必须得有

那就再加一层盒子,也就是每个元素都会有两个盒子,一个外在盒子,一个内在盒子,外在盒子用来控制是独自霸占一行还是我可以跟别人在一行显示,内在盒子负责我有多高多宽内容是什么。

比如block, 外在盒子我理解成是block的,内在盒子也是block的。

inline的话呢,就是外在盒子是inline的,而内在盒子也是incline的

所以inline-block我就可以理解成外在盒子是inline的,内在盒子是block的,就既可以跟小伙伴们在一行,又要跟别人保持距离,妙啊。

到这里也突然反应过来,元素的width也就是作用在内在盒子上的。 但是关于width, 也有很多之前理解不到位的地方,比如with:100%, widht:auto, box-sizing等等,好的我去学习了。