tywo45 / css

基本CSS布局知识汇总

css

---

背景

background-image:url(sprite.png) background-repeat:no-repeat background-postion:1-100px;（可以实现sprite效果）

background-attachment:fixed|scroll|

background-position:10px 20px;|20% 50%|50% 50%(居中)|center center(居中)|right(x轴上靠右，其他值默认center)|right 10px top 20px;

background-repeat:no-repeat

background-origin:默认是padding box

background-clip:默认是border box

CSS布局

块级显示，在文档流 display:block|display:inline-block|display:none

定位显示，不在文档流，绝对定位元素以相对定位元素为参考标准 position：absolute(脱离文档流)|position:relative（不脱离文档流）

半脱离文档流： float:两列布局，两列自适应布局

灵活多列自适应布局： flex