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等标签
• 行内元素尽量包含行内元素，行内元素不要包含块元素

规避脱标流

• 尽量使用标准流
• 标准流解决不了的使用浮动
• 浮动解决不了的使用定位