CSS定位

元素定位的属性:

  • position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
    • static 默认值。没有定位。
    • absolute 绝对定位,相对于(static 定位以外的第一个) 父元素进行定位。通过绝对定位,元素可以放置到页面上的任何位置。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。(注:static 定位以外的第一个父元素:相对与最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,则依据 body 对象左上角作为参考进行定位。)
    • relative 相对定位,相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    • fixed 绝对定位,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    • 绝对定位和相对定位的区别
      • 绝对定位对象可以层叠,相对定位的对象不可以
      • 相对定位对象会占据它原来位置,绝对定位不会
  • top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。注:如果 "position" 属性的值为 "static",那么设置 "top" 属性不会产生任何效果。
  • right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。注:如果 "position" 属性的值为 "static",那么设置 "right" 属性不会产生任何效果。
  • bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。注:如果 "position" 属性的值为 "static",那么设置 "bottom" 属性不会产生任何效果。
  • left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。注:如果 "position" 属性的值为 "static",那么设置 "left" 属性不会产生任何效果。
  • clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
    • 语法 clip: rect(top, right, bottom, left);目前裁切形状只有矩形可以使用
    • rect()需要设置四个值:top, right, bottom和left。他们之间需要用逗号隔开,而且rect()属性值和margin、padding一样的标准,遵循顺时针旋转的规则。
    • 注意:clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。
    • auto:这是一个默认值,clip设置auto值和没有进行剪切是一样的效果;
  • vertical-align 设置元素的垂直对齐方式。
    • baseline 默认。元素放置在父元素的基线上。
    • top 把元素的顶端与行中最高元素的顶端对齐
    • middle 把此元素放置在父元素的中部。
    • bottom 把元素的底端与行中最低的元素的底端对齐。
    • 数值(像素)/百分比
    • text-top 把元素的顶端与父元素字体的顶端对齐
    • text-bottom 把元素的底端与父元素字体的底端对齐。
    • sub 垂直对齐文本的下标。
    • super 垂直对齐文本的上标
  • z-index 设置元素的堆叠顺序。
  • overflow 设置当元素的内容溢出其区域时发生的事情。
  • float 浮动:定义元素在哪个方向浮动。
    • left 元素向左浮动。
    • right 元素向右浮动。
    • none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
  • clear 浮动的清除:常用属性值 both/left/right/none
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注