定位 position
特点 : 特殊位置,压住(压住其他元素(层叠到其他元素上)浮动和标准流解决不了的位置)
静态定位
position: static; ：(元素默认的定位方式)标准流不会动
相对定位 position: relative; (缩写 por)
- 相对定位元素不脱标,还占据原来位置
- 位置偏移参考自身位置
绝对定位 position: absolute； (缩写 poa)
- 绝对定位元素脱标,不占据原来位置
- 绝对定位元素如果父元素没有定位,位置偏移参考浏览器
- 绝对定位元素如果父元素有定位,位置偏移参考离他最近的使用定位的父元素
固定定位 position: fixed; (缩写 pof)
把盒子固定在页面的某个位置,不会随滚动条滚动。配合方位名词移动 left right top bottom
- 固定定位的元素脱标,不占据原来位置
- 位置偏移参考浏览器可视窗口
子绝父相（实际开发中常用）
子元素绝对定位,父元素相对定位,子元素位置偏移参考父元素
<head>
<style>
.baba {
position: relative;
width: 800px;
height: 300px;
background-color: #ccc;
}
.son {
position: absolute;
right: 0;
top: 100px;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="baba">
<div class="son"></div>
</div>
</body>
绝对定位的盒子居中方法
方法1 ：
<head>
<style>
.baba {
position: relative;
width: 600px;
height: 400px;
background-color: #ccc;
}
.erzi {
position: absolute;
/* 向右走父元素宽度的一半 */
left: 50%;
/* 向左走子元素自身宽度的一半 */
margin-left: -75px;
/* 向下走父元素高度的一半 */
top: 50%;
/* 向上走子元素自身高度的一半 */
margin-top: -75px;
width: 150px;
height: 150px;
background-color: red;
/* margin: 0 auto; 只对标准流里边块元素水平居中有效 */
/* margin: 0 auto; */
}
</style>
</head>
<body>
<div class="baba">
<div class="erzi"></div>
</div>
</body>
方法 2 ：
left:0; right:0; top:0; bottom:0; margin:auto;
<head>
<style>
.baba {
position: relative;
width: 600px;
height: 400px;
background-color: #ccc;
}
.erzi {
position: absolute;
/* 这个方法子元素必须设置宽高 */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 150px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<div class="baba">
<div class="erzi"></div>
</div>
</body>
注意 : 这个方法子元素必须设置宽高
鼠标形态 cursor
cursor: default; 默认状态 小白cursor: pointer; 小手cursor: move; 移动cursor: help; 帮助cursor: not-allowed; 禁止cursor: crosshair; 十字cursor: text; 文本
元素的层级关系
标准流 < 浮动 < 定位
定位元素的层级关系
标签越靠后,层级越靠上
z-index:值; 默认值为auto=0 ，值越大越靠上
z-index用来调整定位(相对,绝对,固定)元素层叠顺序,值越大,层叠顺序越靠上,可以为负值
脱标元素(浮动 绝对定位 固定定位)的特点
浮动脱标和定位脱标的相同点
- 块元素脱标之后不会默认父元素宽度,默认宽高为0,内容撑开宽高
- 行内元素脱标后可以设置宽高了
- 脱标的块元素使用margin:0 auto;无效. 脱标的行内内元素行内块元素给父元素使用tac居中无效
浮动脱标和定位脱标的区别
- 浮动压不住文字 行内元素 行内块元素,浮动最重要的特点是多个块元素同行显示
- 定位元素脱标可以压住任意标签,定位的作用是特殊位置压住
CSS 装饰属性
基线垂直对齐
vertical-align：值； 控制行内元素行内块元素垂直对齐 块元素无效
vertical-align：baseline；默认值 基线对齐vertical-align：top；顶对齐vertical-align：middle；垂直居中对齐vertical-align：bottom；底对齐
行内元素、行内块元素垂直顶对齐方法
- 行内元素,行内块元素,垂直对齐使用vertical-align
- 行内元素,行内块元素垂直顶对齐,也可以使用浮动,因为浮动的元素顶对齐,代码换行没有缝隙
解决图片底部缝隙的问题方法
- 给图片设置 vertical-align 除了基线对齐以外所有的值
- 把图片转换为块元素
内容溢出处理 overflow : 值 ;
overflow :visible; 默认值 溢出可见overflow :hidden; 溢出隐藏overflow :scroll; 不管内容是否溢出都生成滚动条overflow :auto; 内容溢出生成滚动条,不溢出不生成滚动条
元素的显示与隐藏
visibicity : hidden ; 隐藏后还占据原来位置display : none ; 隐藏后不占据原来位置。display:block ; 显示隐藏元素（实际开发常用）
边框合并
border-collapse : collapse ; 表格边框合并,表格标签专有属性
精灵图的使用方法
把很多装饰类的小图放到一张大图上,作为背景使用,提升页面打开速度,减少请求次数，优化页面性能。
- 测量需要局部大小,设置宽高
- 测量图片的坐标值,设置为背景定位属性的负值
<head>
<style>
.box {
/* 精灵图2步
1.测量需要局部大小,设置为盒子的宽高
2.测量局部坐标值,设置为背景定位负值
*/
width: 24px;
height: 24px;
background: url(./images/index.png) no-repeat -157px -106px;
}
.abc {
width: 13px;
height: 8px;
border: 1px solid #000;
margin-top: 100px;
background: url(./images/index.png) no-repeat -255px -27px;
}
</style>
</head>
<body>
<!-- 精灵图是把很多装饰类的小图放到一张大图上,作为背景使用,提升页面打开速度,减少请求次数 -->
<div class="box"></div>
<div class="abc"></div>
</body>
|