定位
定位的作用
- 解决盒子与盒子之间的层叠问题。
- 可以让盒子始终固定在屏幕中的某个位置。
定位的基本使用
- 设置定位方式。
- 属性名：position:
- 属性参数：
1. 静态定位：static
- 默认的定位方式。
2. 相对定位：relative
- 自恋型定位，相对于自己原有的位置改变位置;
- 依然占有原来的位置，不脱标;
- 不会改变标签显示模式;
3. 绝对定位：absolute
- 拼爹型定位，相对于非静态定位的父元素进行定位定位;
- 如果有父元素，并且父元素有定位，参照父元素定位;
- 如果父元素无定位，参照浏览器窗口进行定位;
- 绝对定位查找父元素逐层向外查找，如果所有父元素都无定位，就参照浏览器窗口定位;
- 不占有原来位置，脱标;
- 改变标签的显示模式为：行内块;
4. 子绝父相
- 开发中：子元素绝对定位配合父元素相对定位。
5. 固定定位：fixed
- 需要配合方位属性实现移动;
- 相对于浏览器可视区域进行定位移动;
- 在页面中不占位置，脱标;
- 应用场景：让盒子固定在屏幕中的某个位置。
6. 设置偏移值
- 偏移值分为两个方向，水平和垂直方向各选一个使用即可;
- 选取原则一般是就近原则（离哪边近用哪个）;
- 水平方向：left,right;属性值数字+px;
- 垂直关系：top,bottom;属性值数字+px;
7. 元素的层级关系
- 标准流<浮动<定位;
- 相对，绝对，固定默认层级相同;
- 谁写在下面谁层级高;
- 层级相同时设置z-inde:取值越大层级越高(默认值是0);
定位装饰
- 浏览器处理行内／行内块元素时会按照文本处理;
- 基线：浏览器文字类型元素排版中存在用于对齐的基线(baseline)文字对齐问题;
- 场景：解决行内／行内块元素垂直对齐问题;
- 问题：当图片和文字在一行中显示时，其实底部不是对齐的。
垂直对齐方式：
- 属性名：vertical-align:
- 属性值：baseline:默认，基线对齐;
- top:顶部对齐;
- middle:中部对齐;
- bottom:底部对齐;
光标类型
- 设置鼠标光标在元素上时显示的样式;
- 属性名：cursor:
- 常见属性值：default->默认值，通常是箭头;
-
- pointer->小手效果，提示用户可以点击;
-
- text->工字型，提示用户可以选择文字;
-
- nove->十字光标，提示用户可以拖动;
边框圆角
- 属性名：border-radius:
- 取值：数字+px;百分比(取值最大百分之五十);
- 从左上角开始顺时针赋值，没有赋值的看对角;
overflow
溢出部分显示效果
- 属性名：overflow:
- 属性值：
-
- visible默认值，溢出部分可见;
-
- hidden溢出部分隐藏;
-
- scroll无论是否溢出，都显示滚动条;
-
- auto根据是否溢出，自动显示滚动条;
元素本身隐藏
- display:none;(不占位隐藏属性)
- visibility:hidden;(占位隐藏属性)
元素透整体明度
- 属性名：opacity:
- 属性值：0-1之间;
- opacity会让元素整体透明包括子元素。
css精灵图（css sprite）
-
项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图;
-
减少服务器发送次数，减轻服务器压力，提高页面加载速度;
-
- 创建一个盒子，设置盒子的尺寸和小图尺寸相同;
-
- 将精灵图设置为盒子的背景图片;
-
- 修改背景图位置(background-position:x y)修改位置。
设置背景图的大小
- 属性名：background-size:
- 属性值：
-
- 数字px;
-
- 百分比<相对于当前盒子自身的宽高百分比>;
-
- contain<等比例缩放，会有空白>;
-
- cover<等比例缩放，没有空白图片可能显示不全>。
background属性连写
- backgruoun:color image repeat position/size;
- 一般情况下size不连写：backgruoun:color image repeat position;和backgruoun-size:;
盒子阴影
- 属性名：box-shadow:
- 取值：
-
- h-shadow:必须有值,水平偏移量,px;
-
- x-shadow:必须有值,垂直偏移量,px;
-
- blur:可选,模糊度,px;
-
- spread:可选,阴影扩大,px;
-
- color:可选,阴影颜色;
-
- inset:可选,将阴影设置为内部阴影;
过渡
- 让元素的样式慢慢变化，常配合hover使用，增强网页交互体验。
- 属性名：transition
- 取值：过渡的属性名 过渡的时长数字s;
- 默认状态和hover状态样式不一样，才能有过渡效果;
- transition属性需要给过渡的元素本身添加;
- transition属性设置在不同的状态中，效果不同：给默认状态设置，鼠标移入移出都有效果;
- 给hover状态设置，鼠标只有移入有过渡效果。
- 使用的绝对定位的盒子不能使用{margin:0 auto;}居中。
- 解决方法：
- 使用 left:50%;margin-left:-宽度一半px;
- top:50%;margin-top:-高度一半px;
