定 位
定位方向 : left | right | top | bottom
静态定位
//静态定位,默认值,就是文档流
position : static绝对定位
//绝对定位
position : absoulte
特点 :
1.元素使用绝对定位之后不占据原来的位置.(脱标)
2.元素使用绝对定位,位置是从浏览器出发的
3.嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是从浏览器出发.
4.嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素位置出发.
5.给行内元素使用绝对定位之后,转换为行内块.(不推荐使用,推荐使用display:inline-block)z-index : 调整元素的层叠顺序
(默认值是0-999,值越大元素越在上边)
相对定位
position : relative
特点:
1.使用想对定位,是从自身出发
2.还占据原来的位置
3.子绝父相(父元素相对定位,子元素绝对定位) (重点)
4.行内元素使用相对定位不能转行内块固定定位
position : fixed
特点:
1.固定定位之后忙不占据原来的位置(脱标)
2.元素使用固定定位之后,位置从浏览器出发.
3.元素使用固定定位之后,会转化为行内块(不推荐使用,用display:inline-block)定位的盒子居中显示
//只能让标准流的盒子居中显示
margin : 0 auto
//定位的盒子居中
1.先左向右走父元素盒子的一半50%
2.向左走盒子的一般(margin-left:负值)
规避脱标
//让盒子左侧充满
margin-left : auto
//让盒子右侧充满
margin-right : auto
//居中
margin : 0 auto图片和文字垂直居中对齐
vertical-align 对 inline-block最敏感,默认属性是vertical-align : baseline;
CSS可见性
overflow:hidden //溢出隐藏
visibility:hidden //隐藏元素 隐藏之后还占据原来的位置
display:none //隐藏元素 隐藏之后不占据原来位置
display:block //元素可见
display:none 和 display:block 常配合js使用CSS之内容移除(网页优化)
display : inline-block;
text-indenr : -5000em;