div, h2或p元素常常被称为块级元素。这意味着这些元素显现为一块内容,即“块框”。与之相反,跨度和h4等元素称为“行内元素”,这是由于它们的内容显现内行中,即“行内框”。
在这种状况下,这个框称为无名块框,由于它不与专门界说的元素相关联。
块级元素的文本行也会发作相似的状况。假设有一个包括三行文本的阶段。每行文本构成一个无名框。无法直接对无名块或行框运用款式,由于没有能够运用款式的地方(留意,行框和行内框是两个概念)。可是,这有助于了解在屏幕上看到的全部东西都构成某种框。
CSS定位机制
CSS有三种基本的定位机制:普通流、起浮和肯定定位。
除非专门指定,不然全部框都在普通流中定位。也就是说,普通流中的元素的方位由元素在X (HTML)中的方位决议。
块级框从上到下一个接一个地摆放,框之间的笔直间隔是由框的笔直外边距计算出来。
行内框在一行中水平安置。能够运用水平内边距,边框和外边距调整它们的间隔。可是,笔直内边距,边框和外边距不影响行内框的高度。由一行构成的水平框称为行框(LineBox),行框的高度总是足以包容它包括的全部行内框,不过,设置行高能够添加这个框的高度。
在下面,咱们会为您详细解说相对定位,肯定定位和起浮。
CSS位置特点
经过运用位置特点,咱们能够挑选4中不同类型的定位,这会影响元素框生成的方法。
位置特点值的意义:
静态
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创立一个或多个行框,置于其父元素中。
相对
元素框偏移某个间隔。元素仍坚持其未定位前的形状,它本来所占的空间仍保留。
绝对
元素框从文档流完全删去,并相对于其包括块定位。包括块可能是文档中的另一个元素或者是初始包括块。元素原先在正常文档流中所占的空间会封闭,就好像元素本来不存在相同。元素定位后生成一个块级框,而不管本来它在正常流中生成何种类型的框。
固定
元素框的体现相似于将位置设置为绝对不过其包括块是视窗自身。
提示:相对定位实际上被看作普通流定位模型的一部分,由于元素的方位相对于它在普通流中的方位。
CSS定位特点
CSS定位特点答应你对元素进行定位。
特点描绘
位置把元素放置到一个静态的,相对的,肯定的,或固定的方位中。
界顶级说了一个定位元素的上外边距鸿沟与其包括块上鸿沟之间的偏移。
右界说了定位元素右外边距鸿沟与其包括块右鸿沟之间的偏移。
底界说了定位元素下外边距鸿沟与其包括块下鸿沟之间的偏移。
左界说了定位元素左外边距鸿沟与其包括块左鸿沟之间的偏移。
溢出设置当元素的内容溢出其区域时发作的工作。
夹设置元素的形状。元素被剪入这个形状之中,然后显现出来。
vertical-align设置元素的笔直对齐方法。
z - index设置元素的堆叠次序。
CSS为定位和起浮供给了一些特点,运用这些特点,能够树立列式布的局,将布局的一部分与另一部分堆叠,还能够完结多年来一般需求运用多个表格才干完结的使命。
定位的基本思想很简单,它答应你界说元素框相对于其正常方位应该呈现的方位,或者相对于父元素,另一个元素乃至浏览器窗口自身的方位。明显,这个功用十分强壮,也很让人吃惊。要知道,用户署理对CSS2中定位的支撑远胜于对其它方面的支撑,对此不该感到奇怪。
另一方面,CSS1中中初次提出了起浮,它以网景在网络开展初期添加的一个功用为根底。起浮不完满是定位,不过,它当然也不是正常流布局。咱们会在后边的章节中清晰起浮的意义。
