定位
定位应用场景
应用场景:
1 解决盒子之间的层叠(叠加)问题,可以层叠到其它盒子上面
2 页面滚动,盒子固定在页面某个位置不动.
定位的使用步骤:
1 设置定位的方式
2 设置偏移值
定位语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*
定位使用步骤
1.1 设置定位方式
1.2 设置偏移值
*/
div {
width: 300px;
height: 300px;
}
.red {
background-color: red;
}
.blue {
/* 1.1 设置定位方式 */
position: absolute;
/* 1.2 设置偏移值 */
top: 150px;
left: 150px;
background-color: blue;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>
静态定位
position: static; 特点: 1 静态定位就是普通的标准流 2 静态定位设置偏移值无效.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态定位</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 300px;
height: 300px;
}
.red {
background-color: red;
}
.blue {
/* 定位方式 */
/* 静态定位 */
position: static;
/* 偏移值 */
left: 10px;
top: 10px;
background-color: blue;
}
/*
特点
静态定位就是之前的标准流,不能通过方位属性来移动位置
*/
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>
相对定位
position: relative; 特点: 1 需要配合方位属性来移动位置 2 想对于自身原来的位置进行移动 3 在页面中占位置-没有脱标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 300px;
height: 300px;
}
.red {
background-color: red;
}
.green {
/* 相对定位 */
position: relative;
left: 20px;
top: 40px;
background-color: green;
}
.blue {
background-color: blue;
}
/*
特点
1 需要配合方位属性来移动位置
2 相对于自己原来的位置进行移动
3 没有脱标
*/
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>
绝对定位
position: absolute; 特点 1 需要配合方位属性来移动位置 2 祖先元素如果没有定位,默认相对于浏览器进行移动;祖先元素有定位,相对于最近一级带有定位的祖先元素移动位置. 3 在页面中不占位置-已经脱标
子绝父相
子绝父相:
子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小.
子绝父绝:
实际开发中在子绝父相的时候,发现父元素有绝对定位,此时父元素里面的孩子直接子绝即可.
绝对定位的盒子水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.father {
position: relative;
width: 600px;
height: 600px;
background-color: red;
margin: 0 auto;
}
.son {
/* 绝对定位 */
position: absolute;
/* 1 先让子盒子往右移动父盒子的一半*/
left: 50%;
/* 先让子盒子往下移动父盒子的一半 */
top: 50%;
/* 2 再让子盒子往左移动自身宽度的一半 margin负值*/
/* 再让子盒子往上移动自身高度的一半 margin负值*/
/* margin-left: -100px;
margin-top: -100px; */
/* 优化做法 transform 后期移动端会详细讲解 有兼容性问题 pc端建议大家使用margin负值*/
/* transform: translateX(-50%);
transform: translateY(-50%); */
/* 注意 x和y之间一定要用逗号隔开 */
/* transform: translate(x,y); */
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: pink;
/* 绝对定位的盒子不能使用 margin: 0 auto; */
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
固定定位
position: fixed; 特点 1 需要配合方位属性来移动位置 2 相对于浏览器的可视区域进行移动位置 3 不占位置-脱标
定位特殊性
行内元素加了绝对/固定定位可以设置宽高
块级元素加了绝对/固定定位,如果不给宽高,宽高由内容撑开
嵌套块级元素加了绝对/固定定位,不会有塌陷问题.
元素层级
不同布局方式元素的层级关系：
标准流 <浮动 <定位
定位元素之间的层级关系相同(相对定位 绝对定位 固定定位)
(默认情况下 定位的盒子,后来者居上)
z-index属性可以修改定位元素之间的层级关系
z-index: 数字(默认值是auto );
z-index属性的属性值千万不要加单位
数字越大,层级越高.只有定位的盒子才有 z-index属性
小结
子绝父相
子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小.
css提高
垂直对齐方式
场景:解决行内/行内块元素垂直对齐问题
vertical-align属性只对行内或行内块元素有效.
/* 默认值 基线对齐 */
vertical-align: baseline;
/* 底部对齐 */
vertical-align: bottom;
/*中线对齐 */
vertical-align: middle;
/* 顶部对齐 */
vertical-align: top;
光标类型
- 鼠标形状默认值 箭头
- 鼠标形状 小手
- 鼠标形状 放大 后期搭配js一起使用
- 鼠标形状 缩小 后期搭配js一起使用
- 鼠标形状 移动
- 鼠标形状 文本
- 鼠标形状 禁止
边框圆角 border-rudis
.box {
width: 300px;
height: 300px;
background-color: pink;
margin: 50px auto;
/* */
/* border-radius: 10px; */
/* 从左上角开始赋值 如果没有赋值看对角 */
border-radius: 10px 40px;
border-radius: 10px 40px 60px;
/* 左上角 右上角 右下角 左下角 顺时针 */
border-radius: 10px 40px 60px 90px;
border-radius: 0 50%;
}
overflow溢出部分显示效果
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
.box {
/* 溢出部分显示效果 */
/* 默认值 溢出部分可见 */
overflow: visible;
/* 溢出部分隐藏 */
overflow: hidden;
/* 无论是否溢出都显示滚动条 */
overflow: scroll;
/* 根据是否溢出,自动显示滚动条 */
overflow: auto;
width: 300px;
height: 300px;
background-color: pink;
}
/*一行文字溢出处理方式*/
文字溢出显示
元素本身隐藏
/* 隐藏元素本身 占位置 */
visibility: hidden;
/* 隐藏元素本身 不占位置*/
display: none;
元素整体透明度
opacity:0.5; 属性值：0~1之间的数字 1：表示完全不透明 0：表示完全透明 opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
细线边框
border-collapse: collapse;
