阅读 1315

CSS定位position

CSS为定位和浮动提供了一些属性,利用这些属性可以建立列式布局,将布局的一部分与另外一部分重叠。CSS定位的基本思想就是允许定义元素相对于正常位置应该出现的位置;或者相对于父元素、另一个元素、浏览器窗口本身的位置。

**一切皆为框:**div,h1,p元素常常被称作块级元素(block元素,从上到下,每个元素都会另起一行),span,strong等元素被称作行内元素(inline)。可以使用display属性,规定元素生成的框的类型。例如:

p.inline{display:inline)
复制代码

display的取值:

  • none:此元素不会被显示
  • block:此元素将显示为块级元素,此元素前后带有换行符;可以改变元素的height,width值;在不设置自己宽度的情况下,会默认填满父级元素的宽度
  • inline:默认,此元素会被显示为内联元素,元素前后没有换行符,可以与其他元素共享一行,不能更改元素的height,width的值,大小由内容撑开
  • inline-block:行内块元素,结合了两者的特点,简单来说就是不独占一行的块级元素。

CSS定位机制

CSS有三种基本定位机制:普通流,浮动和绝对定位。

除非专门指定否则所有框都在普通流中定位,也就是普通流中的元素的位置由元素在HTML中的位置决定(写的HTML中的先后顺序)。

CSS position属性

取值:

  • static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素会创建一个或多个行框,置于其父元素中。
  • relative:元素框偏移某个距离,元素仍保持未定位前的形状,它原本所占的空间仍保留。

生成相对定位的元素,相对于其正常位置进行定位

  • absolute:元素框从文档流中完全删除,并相对于其其包含块定位。生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过“left","top""right""bottom"属性进行规定。
  • fixed:生成绝对定位的元素,相对于浏览器窗口进行定位

相对定位:relative

<style>    h3{        border: 1px solid green;    }    h3.pos_left{        position: relative;        left: -20px;    }    h3.pos_right{        position: relative;        left: 20px;    }</style><body>    <h3>这是正常位置的标题</h3>    <h3 class="pos_left">相对于正常位置向左移动</h3>    <h3 class="pos_right">相对于正常位置向右移动</h3>    <p>相对定位会按照元素的原始位置对该元素进行移动</p></body>
复制代码

绝对定位absolute

<style>    div.pos_abs{        width: 50px;        height: 50px;        border: 1px solid green;        position: absolute;        left: 100px;        top: 80px;    }</style><body>    <div class="pos_abs"></div>    <p>通过绝对定位,元素可以放到页面上的任何位置,图中div距离页面左侧100px,距离页面顶部80ox</p></body>
复制代码

固定定位:fixed

元素的位置相对于浏览器窗口是固定的,即使窗口的滚动他也不会移动

文章分类
前端
文章标签