一、定位
1.相对定位
position: relative;
left: 50px;
top: -50px;
- 不脱离文档流
- 如果给一个标签只设置positon:relative , 不加关键词,就对该元素没有影响
- 配合top , right , bottom , left 使用(可以为负值)
- 提升层级(可通过z-index设置它的层级)
- 相对于自己原来的位置进行定位
2.绝对定位
position: absolute;
bottom: 0;
right: 0;
- 脱离文档流,也脱离了文本流
- 提升层级
- 默认是相对于初始包含块进行定位,但初始包含块不确定,有可能是指整个html文档,有可能是指浏览器所能显示的那一部分
- 一般配合相对定位使用,如果一个元素的父元素有定位,那么该元素的绝对定位就会相对于父元素进行定位(子绝父相)
- 配合 top , right ,left ,bottom 使用
3.固定定位
- 脱离文档流,也脱离文本流
- 提升层级
- 相对于浏览器屏幕进行定位
- 配合top , right , left, bottom 使用
position: fixed;
top: 50px;
left: 0;
二、小盒子在大盒子中间显示
-
知道大盒子的宽高,知道小盒子的宽高,通过padding 或 margin 或者 定位
-
大盒子的宽高不固定,知道小盒子的宽高
- 给大盒子设置相对定位
- 给小盒子设置绝对定位
- 给小盒子设置 top : 50% ; left :50%;
- 给小盒子设置margin-top : 负的小盒子高度的一半
- 给小盒子设置margin-left:负的小盒子宽度的一半
.box{ width: 700px; height: 700px; border: 10px solid red; position: relative; } .small{ width: 200px; height: 200px; background-color: orange; position: absolute; left: 50%; margin-left:-100px ; top: 50%; margin-top: -100px; }
-
大盒子和小盒子的宽高都不固定
- 给大盒子加相对定位
- 给小盒子加绝对定位
- 给小盒子设置 top , bottom , right , left 都为0
- 给小盒子设置margin: auto;
.box{ width: 600px; height:600px; border: 10px solid red; position: relative; } .small{ width: 100px; height: 100px; background-color: orange; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
三、提升层级 z-index
- 使用时该标签必须设置定位,才能通过z-index设置层级
- 默认 0
- 可以为负值
- 值越大,越靠前
四、让内联标签支持宽高
- 给内联标签设置浮动 ( 脱离文档流,但不脱离文本流)
- 给内联标签设置绝对定位 ( 既脱离文档流,又脱离文本流)
- 给内联标签设置固定定位( 既脱离文档流,又脱离文本流)
五、内联块垂直对齐方式
css样式: vertical-align: middle; baseline(默认基线对齐) top bottom 具体px
六、图片间隙问题 ( 多个内联块间隙问题)
解决:
- 给他的父元素设置 font-size:0 ; line-height:0; (里边的子元素如果有文字的话,需要重新设置字体大小和行高)
- 给内联块设置vertical-align: top | middle | bottom , 解决的是图片之间上下的空隙
- 直接将内联块转成块标签 ( 独占一行)
- 直接将内联块浮动(浮动引起的问题)
七、透明度
1.opacity 设置元素的透明度
opacity: 0.5; //设置元素半透明 0 - 1 , 不兼容ie8及以下
filter: alpha(opacity=50); // 用来兼容ie8及以下 取值 0 - 100
2.rbga的兼容(了解)
-
不兼容ie8 及以下
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f00ff00,endcolorstr=#7f00ff00); 其中颜色值#7f00ff00 == #aarrggbb
3.rgba 和 opacity 的区别
- rgba( r, g ,b , a) 其中rgb的值是0-255 , a的值 0-1
- rgba 给背景色使用 ,那就是背景色可以半透明,如果给color 设置,那就是文字可以半透明
- opacity : 值 0 - 1 让背景和里边的子元素都半透明
八、元素隐藏
- display:none 隐藏后该元素不占位
- opacity : 0 隐藏后该元素占位
- visibility: hidden ; ( visible 是默认值,显示) 隐藏后改元素占位