HOME
NAVIGATION

外边距叠加、行框、行内框、outline属性

今天复习了一下《精通CSS》,发现已经忘了很多东西了,惭愧惭愧……

1.外边距叠加

只有普通文档流中块框的垂直外边距才会发生外边距叠加。
行内框、浮动框或绝对定位框之间的外边距不会叠加。 外边距叠加的问题一般都可以通过添加一点内边距或者与元素背景颜色相同的小边框来修复

2.行内框

行内框在一行中水平排列。可以使用水平内边距、边框和外边距调整他们的水平间距, 但是,垂直内边距、边框和外边框不影响行内框的高度。

这时候出现的inline-block简直救星!

它像inline一样显示,但是可以设置宽度高度垂直内外边距。

3.行框

同样,在行内框上设置显式的高度或宽度也没有影响, 由一行形成的水平框称为行框。
行框的高度总是足以容纳他包含的所有行内框, 但是,设置行高可以增加这个框的高度。

文本在行框中总是垂直居中的,所以用line-height控制元素高度优于height

4.outline属性

outline属性为元素框(padding和margin以外)的轮廓
相比于border属性
优点:不影响页面布局优于border
缺点:没有outline-radius之类属性