CSS之定位

定位方向: left | right | top | bottom

position:static

静态定位。默认值,就是文档流

position:absolute

绝对定位 特点

  • 元素使用绝对定位之后不占据原来的位置(脱标)
  • 元素使用绝对定位,位置是从浏览器出发
  • 嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是从浏览器出发。
  • 嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素位置出发
  • 给行内元素使用绝对定位之后,转换为行内块。(不推荐使用,推荐使用display:inline-block;)

position: relative

相对定位 特点

  • 使用相对定位,位置从自身出发
  • 还占据原来的位置
  • 子绝父相(父元素相对定位,子元素绝对定位)
  • 行内元素使用相对定位不能转行内块

position:fixed

固定定位 特点

  • 固定定位之后,不占据原来的位置(脱标)
  • 元素使用固定定位之后,位置从浏览器出发
  • 元素使用固定定位之后,会转化为行内块(不推荐,推荐使用display:inline-block;)

定位的盒子居中显示

  • margin:0 auto; 只能让标准流的盒子居中对齐。
  • 定位的盒子居中:先左右走父元素盒子的一半50%,在向左走子盒子的一半(margin-left:负值。)
.nav{
    width:500px;
    height:60px;
    left:50%;
    margin-left:-480px
}

标签包含规范

  • div可以包含所有的标签
  • p标签不能包含div h1等标签
  • h1可以包含p,div等标签
  • 行内元素尽量包含行内元素,行内元素不要包含块元素

规避脱标流

  • 尽量使用标准流
  • 标准流解决不了的使用浮动
  • 浮动解决不了的使用定位
posted @ 2018-02-05 10:48  简丛  阅读(144)  评论(0编辑  收藏  举报