目录
一、定位
1、静态定位 position: static;
静态定位，默认值，标准流
2、相对定位 position: relative;
如果left,right都有，以left为准；top，bottom都有，以top为准
相对定位
1.占据原来的位置（没有脱标）
2.仍然具备标签原有的显示模式特点
3.改变位置参照自己原来的位置
3、绝对定位 position: absolute;
1.绝对定位的元素脱标，不占据原来的位置
2.绝对定位的元素，所有的父元素都没有使用定位，位置偏移参考浏览器
3.绝对定位的元素，如果父元素使用了定位，位置偏移参考最近的使用了定位父元素
绝对定位的盒子显示模式具备行内块元素特点：加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸就是0
4、子绝父相
子元素绝对定位，父元素相对定位，子元素位置偏移参考父元素的位置，相对定位不脱标，还占据原来的位置
5、子绝父相水平居中
绝对定位的盒子不能使用margin:auto居中
方法1、
<style>
.box {
position: absolute;
/* 水平 */
/* 参照物的一半 */
left: 50%;
/* 自身的一半，负值，往左走 */
margin-left: -150px;
/* 垂直 */
/* 参照物的一半 */
top: 50%;
/* 往上走自身的一半 */
margin-top: -150px;
width: 300px;
height: 300px;
background-color: pink;
}
</style>方法2、
<style>
.box {
position: absolute;
left: 50%;
top: 50%;
/* 位移：自己宽度高度的一半 */
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background-color: pink;
}
</style>方法3、
<style>
.father {
position: relative;
width: 800px;
height: 500px;
background-color: #ccc;
}
.son {
position: absolute;
/* 该技巧 子元素必须设置宽高 */
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 150px;
height: 150px;
background-color: red;
}
</style>6、固定定位 position: fixed;
将元素固定在页面的某个位置，不会随着滚动条滚动
1.不占据原来的位置（脱标）
2.改变位置参考浏览器可视窗口
3.具备行内块特点
7、定位层级关系
定位元素默认层级相同，标签顺序越靠后，层叠顺序越靠前
z-index 调整定位元素（相对定位，绝对定位，固定定位）的顺序，默认值0，值越大，层叠顺序越靠上，可以为负值，必须配合定位使用，否则不生效
注意：对浮动，标准流，静态定位无效，不带单位
8、垂直居中
vertical-align: middle垂直对齐；top顶对齐；bottom底对齐
浏览器遇到行内，行内块标签当作文字处理，文字按基线baseline对齐
垂直对齐父元素无高度时，设置vertical-align: middle
行内块垂直居中，给父元素设置宽度和行高相等，给行内块元素设置vertical-align: middle
二、装饰
1、光标类型 cursor
default 默认值，箭头
pointer 小手效果
text 工字型
move 十字光标
not-allowed 禁止
help 帮助
2、圆角边框 border-radius
border-radius:数字+px / 百分比
一个值，表示四个角相同
四个值，从左上顺时针转一圈
三个值，最后一个取对角的值
两个值，另外两个取对角的值
工作中常用情况
正圆：盒子必须是正方形，设置盒子宽高的一半
border-radius: 50%;
胶囊按钮：盒子必须是长方形，设置盒子高度的一半
3、overflow溢出处理
overflow: visible;默认值，溢出部分可见
overflow: hidden;溢出部分隐藏
overflow: scroll;无论是否溢出，都显示滚动条
overflow: auto;根据是否溢出，自动显示或隐藏滚动条
4、隐藏效果
visibility: hidden;占位隐藏
display: none;不占位隐藏；配合 display: block(显示) 使用
5、opacity透明度
元素 整体 透明度 取值0-1
6、表格边框合并
相邻表格边框合并，表格专有属性
border-collapse: collapse;
7、三角形的制作
<!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>
.box {
width: 0;
height: 0;
/* 三角形盒子宽高必须设置为0 */
/* 上下，左右 */
border-width: 100px 200px;
border-style: solid;
/* border-color: red green blue brown; */
border-color: transparent red blue transparent;
/* 1.书写一个盒子，宽高设置为0
2.盒子添加四个方向的border，设置颜色
3.保留一个方向的border，其他设置颜色transparent（透明） */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>8、焦点伪类选择器
:focus鼠标点击时获得焦点
9、属性选择器
<!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>
input[type] {
width: 40px;
height: 20px;
}
input[type="text"] {
background-color: #666;
}
input[type="password"] {
background-color: #a34;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
</body>
</html>
