Omina

CSS定位真难，我是前端小白，元素调半天无法居中，一个元素需要覆盖到另外一个元素上，页面放到手机上，简直无法直视

CSS布局

display:float 元素的位置会朝着设置的方向浮动

display:absolute 元素的位置是相对于已定位的父元素的绝对位置，还需要设置left，right等属性，不占据文档流的空间

display:fixed 元素的位置是相对于已定位的父元素的绝对位置，还需要设置left，right等属性，占据文档流的空间

样式小case

CSS如何让一个元素覆盖到另外一个元素上

CSS居中 前端小样式 加号居中
使用英语加号很难居中，换成中文就可以了，不知道为啥

CSS背景图片定位
div没有背景图片大，如何定位背景图片

响应式布局：适配手机
首先在文件头添加viewport
<meta name="viewport" content="width=device-width, initial-scale=1" />
食用媒体查询设置断点适应不同手机尺寸

/* For width 768px and smaller: */ 
@media screen and (max-width: 768px){
   div{
     background-color: #0f0;
   }
}

/* For width 400px and larger: */ 
@media screen and (min-width: 400px){
   div{
     border: solid 1px #000;
   }
}

注：尽管开发者也可以根据 *-device-width 创建查询，但是我们强烈建议不要这么做。@media (min-device-width: 500px) and (max-device-width: 600px)对旧的android游览器兼容不好

flex 响应式布局

详见下回分解

版本控制