定位
- css的定义机制:标准流、浮动、定位
1.定位原理
- float属性让元素水平移动
- margin属让元素相对与本身位置移动
- css中定位属性允许元素相对于本身的位置,相对与父元素、浏览器窗口位置调整
- 网页中出现覆盖关系。优先考虑使用定位技术
- 定位偏移属性
* top属性
* bottom属性
* left属性
* right属性
属性值:auto|inherit|length|百分比
注意:定位偏移属性不能单独使用,必须与定位属性配合使用才会有效
2.定位属性
- 1)position:static:默认值
- 静态定位,相当于没有定位:元素出现在正常文档流中
- 不会受到top|bottom、left|right属性影响
- 2)position:relative;相对定位
* 相对于元素本身的位置调整;占位依然在原位置
* 使用
元素微调:做绝对定位元素的参照元素
* 特性
> 不影响元素本身的特性
> 不会使元素脱离正常文档流——占位
> 如果没有设置定位偏移属性,对元素本身没有影响。如果有定位偏移属性,相对于元素原来的位置偏移;
> 提升层级
- 3)position:absolute;绝对定位
* 相对于最近的定位父元素(定位父级)定位
* 特性
> 1.元素脱离正常文档流,不占位
> 2. 有定位父级,相对于定位父级发生位移偏移;如果没有定位父级,相对于整个文档发生偏移
> 3.使没有设置宽高的块级元素宽度自适应,使行级元素支持宽、高
> 4. 提升层级
* 绝对定位使用步骤
> 1.为要做特殊定位的盒子(定位盒),添加:position:absolute;绝对定位,设置定位偏移属性
top:0|bottom:0;
left:0;|right:0;
> 2.定位盒的父级盒(定位父级),添加
position:relative:相对定位
> 回到定位盒,通过top|bottom、left|right属性进行精确位置的调整- 4) position:fixed;固定定位
*相对于浏览器窗口的四个角的位置定位
* 特性
> 1.元素脱离正常文档流,不占位
> 2.始终相对于浏览器窗口的四个角为原点进行定位;不会随页面的滚动而滚动
>3.使没有设置宽度的块级元素高度自适应;使行级元素支持宽高
> 4.提升层级- 使用 :固定定位的绝对居中
width:;
height:;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
marign:auto;
- 使用 :固定定位的绝对居中
- 4) position:fixed;固定定位
- relative相对定位占位;absolute绝对定位:fixed固定定位不占位
3定位技巧——绝对居中(水平,垂直居中)
- 使用margin:auto;实现有width属性和hieght属性的绝对定位元素的居中
.wrap1 div{
width:100px;
height:100px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
-
使用margin负间距实现具有width属性和height属性的绝对定位元素的居中
.wrap2 div{
width;200px;
height:100px;
position:absolute;
left:50%; 定位父元素宽度的一半
top:50% 定位父元素高度的一半
margin-left:100px; 元素本身宽度的一半
margin-top:50px;元素本身高度的一半 -
margin:auto:实现盒子的绝对居中有兼容问题
4.定位中存在的问题——层级问题
- 元素添加了定位属性(相对定位,绝对定位,固定定位)之后,可以覆盖在页面的其他元素上
- 后面加载的定位元素会覆盖先加载的定位元素
- z-index属性:设置定位元素的叠放次序
- 属性值没有单位,取值可以使正整数,负整数,0
- 属性值越大叠放次序越高
- 属性值相同按照结构中书写顺序,后来者居上
- 正值向上调整层级;负值向下调整层级
1.z-index属性需要与positon:relative|absolute|fixed:配合使用才会有效
2.如果同时有margin:0 auto;float:left|right;position:absolute|fixed:则:position属性有效
3.如果同时有margin:0 auto;float:left|right:;position:relative属性;则float属性有效
浮动和定位对比
css2中能够脱离正常文档流的属性
- float:left|right
- 脱离正常文档流,但不脱离文本流
- position:absolute|fixed;
- 脱离正常文档流,又脱离文本流
> 注意:所有元素都能使用以上的属性
> 元素脱离正常文档流之后,不再区分块级元素和行级元素,都具有相同的属性;没有设置宽度,宽度由内容撑开;可以设置盒模型属性
透明度
1、rgba(r,g,b,a)颜色模式——颜色透明
- 兼容性:IE6,7,8下不兼容,IE9+支持
- 使用
- background-color属性,color属性,border-color属性等设置颜色透明
- 语法
rgba(r,g,b,a)
r-red 红色 取值范围0-255
g-green 绿色 取值范围0-255
b-blue 蓝色 取值范围0-255
a-alpha 透明度 取值范围0~1之间表示半透明,0表示完全透明,1表示完全不透明
超出范围的值将被截止最近的极限值
2.opacity属性 透明度 ——元素透明
- 兼容性:IE6,7,8下不兼容,IE9+支持
- 使用
- 将内容(及所有的后代)、背景一起透明
- 取值
- 范围0~1之间表示半透明,0表示完全透明,1表示完全不透明
3.filter属性——元素透明
- 兼容性:仅仅支持IE6,7,8,9,IE10及以上被废除
- 使用
- IE浏览器专属
- 语法
filter:Alpha(opacity=n);
n的取值范围0~100之间表示半透明,0表示完全透明,100表示完全不透明
显示和隐藏的方法
-
1.display属性
- display:none;元素隐藏,不占物理空间
- display:bloack;元素显示
-
2.opacity属性
- opacity:0;元素透明,占位空间仍然存在
- opacity:1;元素不透明
-
3.visibility属性
- visibility:hidden;元素隐藏,占位空间仍然存在
- visibility: visible;元素显示
-
5.设置元素位置让其.消失
- 使用position属性,用z-index属性遮盖
例如:
.box{
width:100px;
height:100px;
position:absolute;
z-index:-1; 此时其父元素的z-index值要比这个大
} -
6.overflow:hidden;属性,将要隐藏的元素移动到父元素之外
父元素
.box{
width:100px;
height:100px;
overflow:hidden;
}
子元素
.son{
margin-top:100px;
}
这样元素就会超出父元素,父元素设置了溢出隐藏就会隐藏超出的子元素
- 7.将元素的font-size,line-height,width,height属性的属性值都设置为0
border-radius属性
- border-radius:npx; 四个角都有npx的圆角
- border-radius:npx mpx; 左上角和右下角,左上角和左下角
- border-radius:npx mpx xpx;左上角, 右上角和左下角,右下角
- border-radius:npx mpx xpx ypx;左上角,右上角,右下角 ,左下角
- border-radius:border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius;
左上角,右上角,右下角 ,左下角