CSS定位装饰

一.定位

1.1网页常见布局方式

1.2.定位的常见应用场景

2.1.使用定位的步骤

 

3.1.相对定位 

特点：

1.占有原来的位置，即没有脱标

2.仍然具有标签原来的显示模式

3.改变位置参照自己原来的位置

4.只加position不加left、right等，盒子不会有变化

 5.如果写了left和right，以left为准；如果写了top和bottom，以top为准

 4.1.绝对定位

特点:

1.脱标，不占位置

 2.改变标签的显示模式特点: 具备了行内块特点(在一行共存。宽高生效)

3.如果给父级设置定位，尽量设置 relative，如果设置absolute，那父级就会带着子级一起跑，设置relative的父级根据原本位置进行移动，更加的可控。

4.浮动是半脱标，绝对定位是全脱标

父级相对定位；子级绝对定位 -- 子绝父相

此处的父级是个广义的父级，即就近原则。比如子级的父级没有定位，但是爷爷级有定位，就会根据爷爷进行定位，如果所有的父级都没有，就参考浏览器窗口定位。

（案例）卡片模块的hot图标定位案例 

（案例）子绝父相水平居中案例

绝对定位的盒子不能使用左右margin auto居中

因此用到绝对定位。有两种方法

一： left: 50%;  margin-left: -150px;  (说明：50%会去到正中间线的方向边，即 left: 50%; 是正中线的右边)

二：transform: translate(-50%, -50%);  (说明：位移：自己宽度高度的一半)

（案例）导航二维码居中定位案例

 

（案例）底部半透明遮罩效果

5.1.固定定位

特点:

                    1.脱标-不占位置

                    2.改变位置永远都是参考浏览器窗口

                    3.具备行内块特点

6.1.元素的层级关系

如果都定位了，那写在下面的层级关系更高，即后来者居上

除此之外，也可以用 z-index:整数;  取值越大，显示顺序越靠上，z-index的默认值是0。注意：z-index必须跟定位配合才生效

 

二.装饰

 1.1.认识基线（了解）

注意：浏览器处理行内块和行内标签时是按照文字去解析

1.2.文字对齐方式

1.3.垂直对齐方式

注意：但凡是处理行内块和行内块或者文字对齐，都是使用 vertical-align:middle;

用于中部对齐就对大盒子的进行设置

基线，如果一张图片的父级盒子没有高度，被照片撑开，这种情况盒子底下会有剩下的空间，方法一：用  vertical-align:middle;   方法二：给照片添加  display:black;   原因：浏览器把行内和行内块都当做文字处理，因此默认基线对齐

此外，如果图片在一个盒子里，想要垂直居中，不能使用  line-height  ，而要使用子级添加  vertical-align:middle;  父级添加linve-height 配合使用

因此：verlical-align专门用于 图片、input等行内或者行内块标签 的垂直居中效果

2.1.光标类型

3.1.边框圆角

3.2.边框圆角的常见使用

 注意：如果要是胶囊状，必须是长方形，不能用border-radius:50%，必须是border-radius:高度的一半

4.1.溢出部分显示效果

5.1.元素本身隐藏

在实际开发中，更常用的是 display: none; 隐藏 ，  用display: block; 显示，因为这两个使用不会占位置，实际开发中更加的常用。 相反，visibility:hidden虽然隐藏，但是会占用位置

 

（拓展）元素整体透明度

 会让整体都透明，父级里面的所有都会变透明

需要注意的是，为何是拓展，因为这个效果对于纯html+css来说并不实用，是未来学js后配合交互效果使用的。