Web-9月26日随笔

一:定位

意义:脱离原来的标准文档流,与此同时脱标的元素(浮动float,绝对定位,固定定位)

1.绝对定位:position:absolute

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

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

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

2.相对定位:

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

3.固定定位:

position:fixed(固定到某一个位置,不随页面滚动,常用于顶部,侧栏)

4.元素垂直水平居中:

position:absolute;

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 然后给图标宽高才起作用

原文地址:https://www.cnblogs.com/lovels/p/9710627.html