前端CSS——定位、装饰

#博学谷IT学习技术支持#

• 定位

• 属性名：position
• 属性值

1. 静态定位：static

         标准流中的元素默认就是静态定位

     2.相对定位：relative

         特点：需要配合方位属性实现移动；相对于自己原来的位置进行移动；还占位置，没有脱标

     3.绝对定位：absolute

         特点：需要配合方位属性实现移动；不占位置

  （1）如果祖先元素中没有定位的元素此时相对于浏览器可视区进行移动

  （2）如果祖先元素中有定位的元素此时相对于最近的有定位的祖先元素进行移动

    4.固定定位：fixed

         特点：需要配合方位属性实现移动；永远相对于浏览器进行移动；不占位置

• 应用场景

1. 子绝父相：子元素绝对定位；父元素相对定位。场景：让子元素相对于父元素进行定位移动
2. 水平居中：子绝父相；给子元素设置 left：50%   transform：translateX（-50%）
3. 水平垂直都居中：子绝父相；给子元素设置left:50% top:50% transform：translate（-50%，-50%）

• 元素的层级关系

      三种定位之间的层级默认是相同，在html结构中写在下面的，层级更高

• 装饰

（一）垂直对齐方式：vertical-align

项目中 vertical-align 可以解决的问题

1. 文本框和表单按钮无法对齐问题

2. input和img无法对齐问题

3. div中的文本框，文本框无法贴顶问题

4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题

5. 使用line-height让img标签垂直居中问题

（二）光标类型：cursor

场景：设置鼠标光标在元素上时显示的样式

（三）边框圆角：border-radius

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

常见取值：数字+px 、百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

（四）overflow溢出部分显示效果：overflow

溢出部分：指的是盒子 内容部分 所超出盒子范围的区域

控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

（五）元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

常见属性：

1. visibility：hidden

2. display：none

区别：

1. visibility：hidden 隐藏元素本身，并且在网页中 占位置

2. display：none 隐藏元素本身，并且在网页中 不占位置

注意点：

• 开发中经常会通过 display属性完成元素的显示隐藏切换

• display：none；（隐藏）、 display：block；（显示）

（六）元素整体透明度

场景：让某元素整体（包括内容）一起变透明

属性名：opacity

属性值：0~1之间的数字

1：表示完全不透明

0：表示完全透明

注意点：

opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

  （七）边框合并

border-collapse：collapse（给table标签设置）

三、总结

    学习的时候，日子一天一天的过。说快也不快，说慢也不慢。学习的时候是辛苦的，希望以后工作的时候回想起来却是美好的。今天的复习就到这啦，下周继续加油呀！