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等标签
- 行内元素尽量包含行内元素,行内元素不要包含块元素
规避脱标流
- 尽量使用标准流
- 标准流解决不了的使用浮动
- 浮动解决不了的使用定位