【精通CSS】定位
盒模型
3 种定位机制
CSS 中有 3 种基本的定位机制:普通流、浮动、绝对定位。除非专门制定了,否则所有的框都在普通流中定位——普通流中元素框的位置由元素在 HTML 中的位置来决定。
- 块框: p、h1、div 等元素是块元素,意味着显示为一块内容,即块框。
- 行内框: strong、span 等元素是行内元素,意味着其内容显示在行中,即行内框。
可以使用display
改变生成的框的类型。
块级框从上到下地垂直排列,框之间的垂直距离由框的垂直外边距计算出来。
而行内框则是在一行中水平排列,可以使用水平内边距padding、边框border、外边距margin调整水平间距。但是,垂直内边距padding、边框border、外边距margin是不影响行内框的高度的,同样,显式的设置高度或宽度也没什么用,**唯一的方法是修改行高 line-height **。
由一行形成的水平框称为行框,行框的高度总是足以容纳它包含的所有行内框。
对行内框的总结:修改行内框尺寸的唯一方法是:修改行高 或者 水平边框、内边距、外边距。
CSS 2.1 允许把元素的 display
属性设置为 inline-block
,即让元素向行内元素一样水平的依次排列,但是,框的内容任然符合块级框的行为。