阴影及定位

隐藏及阴影

标签隐藏

1、显示方式 display
display: none;
/*表示在页面中隐藏，并且不占位，但是重新显示出来又会占位*/
2、透明度 opacity 
opacity: 0;
/* 0 代表完全透明 1 代表完全显示 但是即使是透明了也会在页面中占位*/
/*
显示方式透明没办法找到中间值，所以不可以做渐变操作
透明度可以找到中间值，可以做出渐变的效果
*/

阴影

/*阴影box-shadow: x轴移动 y轴移动 虚化程度 阴影宽度 颜色*/
box-shadow: 10px 0 10px 1px red;
/*并且一个标签的box-shadow后面可以跟多个阴影，用逗号隔开*/
box-shadow: 10px 0 10px 1px red,0 10px 10px 1px green;

定位

固定定位

/*
vw vh 指定的宽高是根据当前页面窗口的宽高来进行判定的
80vw  这里的80表示的是百分百
*/

/*
固定定位 fixed

一旦打开定位属性
　　1.left top right bottom 四个方位都能参与布局
　　2.子级标签获取不到父级标签的宽度，也撑不起父级的高度
　　3.固定定位布局参考的对象是浏览器的窗口
　　4.布局依据：固定定位的盒子四边的距浏览器窗口四边的距离
　　5.如果布局出现冲突：上下取上， 左右取左
　　6.如果定位显示重叠通过z-index可以选择谁显示在上面(z-index可看后续详细介绍)
*/

绝对定位

/*
绝对定位 absolute
1.子级标签获取不到父级标签的宽度，撑不起父级标签的高度
2.绝对定位的标签都是相对于一个参考系进行定位，之间不会相互影响
3.参考系：最近定位的父级标签(父级标签没定位就去找更上一级，都没定位最后找到html)
4.四个方向都能参与定位
5.上下取上，左右取左

自己采用绝对定位，一般都是想参照父级标签进行定位
所以父级标签必须要定位才能作为子级标签的参考系
父级标签可以采用fixed absolute 但是这两种都会影响盒模型
relative(相对定位)不会影响盒模型：也就是父相子绝(经常同时出现)
*/

相对定位

/*
相对定位 relative
1.相对定位不同于固定定位和绝对定位，相对定位可以获取父级的宽度，也可以撑开父级的高度
2.相对定位的参考系是自身的原有位置
3.相对定位移动的是图层，盒子还在原地没动
4.相对定位一般配合绝对定位使用(一般不单独使用)
*/