前端第七波

前端第七波

定位（Positioning）

目录

前端第七波

定位（Positioning）

块内元素与行内元素

position定义与用法

---

块内元素与行内元素

块级元素：div、h1 或 p 元素   //这意味着这些元素显示为一块内容

行内元素：span 和 strong  元素    //这是因为它们的内容显示在行中，即“行内框”

块级元素对应display：block，还可以通过把 display 设置为 none，让生成的元素根本没有框。行内元素对应display：inline。可以通过修改元素的display属性来切换行内元素和块级元素。

display：inline-block；（巨有用）可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。

position定义与用法

static（静态的）：默认值，没有定位，元素出现在正常流中。

fixed（固定的）：生成绝对定位的元素，相对当前浏览器窗口（当前屏幕）进行定位。元素位置由 top,bottom,left,right 等进行规定。不占据空间位置。

relative（相对的）：有空间占位，相对原来的空间进行偏移定位。（即以自身为基础进行偏移，并保留原来位置的空间不被其他元素所占用）。

absolute（绝对的）：生成绝对定位的元素，相对于父辈或者更高辈份中存在定位的一个父元素进行定位，位置通过 top,bottom,left,right 等进行规定。不占据空间位置。