【精通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,即让元素向行内元素一样水平的依次排列,但是,框的内容任然符合块级框的行为。

相对定位

绝对定位

浮动

posted @ 2017-05-08 19:03  少东主  阅读(146)  评论(0编辑  收藏  举报