百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

定位

作者wcs课程第七天到第八天:学习布局390次浏览02018-05-09 10:37

position: static 默认值:将元素放入它在文档布局流中的正常位置

position: relative 相对定位,相对于元素原来的位置移动,偏移前的位置保留。在使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间。

position: absolute;绝对定位的元素不再存在于正常文档布局流程中,不占用空间,原来占用的位置被删除。相对于设置了position:relative或者position:absolute的包含容器为基准定位,元素的margin依然有效,没设置就是相对于根元素定位。浮动元素不同,浮动于正常流中移除,保留部分流动性,会影响后面的内容,文字文字内容会围绕在浮动元素周围。

position:fixed固定元素相对于浏览器viewPort定位。

left、right、top、bottom属性确定元素在正常文档流中的偏移位置。值可以是 ——px,mm,rems,%等。


背景定位与绝对定位的区别:

取值为时百分比(x%,x%)时:

  • background-position是背景自身的点(x%,x%)定位到容器(x%,x%),涉及到两个坐标系,一个是图片自身的坐标系,一个是容器的坐标系

    值对应的容器坐标位置计算公式:

    positionX = (容器的宽度-图片的宽度) percentX;
    positionY = (容器的高度-图片的高度)
    percentY;

  • position:absolute 是元素左上角的点(0,0)定位到容器(x%,x%);top、bottom值是相对于设置了定位的包含容器的高度计算,left、right是值是相对于设置了定位的包含容器的宽度计算。包含容器未指定时,top、bottom相对视口的高度计算


z-index:设置元素的堆叠顺序 。z-index值较大的元素将叠加在z-index值较小的元素之上。
z-index属性适用于定位元素,如果元素是没有定位的,对其设置的z-index会无效。

  • 父元素z-index有效,那么子元素无论是否设置z-index都和父元素一致,会在父元素上方,如果父元素z-index失效(未定位或者使用默认值),那么定位子元素的z-index设置生效
  • 一个定位一个没有定位,z-index正数定位元素覆盖未定位元素,负数被覆盖。
  • 两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象,那么按文档流顺序,后面的覆盖前面的。

text-align:center 父元素设置行内元素(文字、图像、表单之类的)水平居中,不止对文本有效

0条评论