Web-9月26日随笔

Posted 2021-01-13 lovels

一：定位

意义：脱离原来的标准文档流，与此同时脱标的元素（浮动float，绝对定位，固定定位）

1.绝对定位：position：absolute

   如果一级一级往上找页面中没有相对定位，就参考body进行定位。

   如果有多个相对定位元素，就参考最近的，就近原则。

z-index:数字。覆盖效果。 数字越大,越在上面,可以给负值(负值的话，会在下面)必须有定位元素才起作用。

2.相对定位：

相对自身原来的位置进行移动。（设置margin后原来所占有的空白位置和自身一起移动，形离影离，一般给子元素当参照物，或者元素的微调。一般情况下不建议添加值。）

3.固定定位：

position：fixed（固定到某一个位置，不随页面滚动，常用于顶部，侧栏）

4.元素垂直水平居中：

position:absolute;

width:200px;

height:200px;

left:50%;

top:50%

margin-left:-100px;

margin-top:-100px;

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

背景属性：

background-image：url（图片地址）；跟img调用地址一样

background-repeat：repeat-x（水平重复）       repeat-y（垂直重复）    no-repeat（不平铺）

水平往左：负值   　水平往右：正值       垂直往上：负值     垂直往下：正值。

背景属性简写顺序·：颜色 地址 重复方式  位置；

background：color  url（）repeat  position；

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

雪碧图（精灵图）：

1.量取icon图标距离原点(左上角0,0)的位置
2.量取icon图标的宽高限制一下
3.图标一般单独给一个标签好控制 比如span 把它转成行内块元素display:inline-block 然后给图标宽高才起作用