黑马程序员技术交流社区

标题: 学习笔记——第5节居中的规范书写(1) [打印本页]

---

作者: Zy_阿匠    时间: 2017-1-6 17:16
标题: 学习笔记——第5节居中的规范书写(1)


第1课时
1、元素的定位属性为position，其有4个属性值，分别为：
* Static，默认值，元素根据流式布局进行排版定位；
* Relative，相对定位，元素根据原文档流进行相对定位；
* Absolute，绝对定位，相对于其上一个已经定位的父元素进行定位；
* Fixed，固定定位，相对于浏览器窗口进行定位
2、拓展阅读——援引自“博客园作者Mr.Ming2”
     三种定位机制使用了4个属性来描述定位元素各边相对于其包含块的偏移。这4个属性被称为偏移属性。  top/right/bottom/left
　　值: <length> | <percentage> | auto | inherit
　　初始值: auto
　　百分数: 对于top和bottom，相对于包含块的clientHeight；对于right和left，相对于包含块的clientWidth
　　这些属性描述了距离包含块最近边的偏移。top描述了定位元素上外边界离其包含块的顶端有多远。如果top为正值，会把定位元素的上外边距边界下移，若为负值，则会把定位元素的上外边距移到其包含块的顶端之上。类似地，left描述了定位元素的左外边距边界在其包含块左边界右边(正值)或左边(负值)有多远。如果是正值，会把定位元素的外边距边界移到包含块左边界右边，而负值则将其移到包含块左边界左边。所以，正值会导致向内偏移，使边界朝着包含块的中心移动，而负值会导致向外偏移。
　　偏移定位元素的外边距边界时，带来的影响是元素的所有一切(包含外边距、边框、内边距和内容)都会在定位的过程中移动
　　注意，定位元素的边界是指定位元素margin外侧的边界；包含块的包含区域是指包含块的border内侧的padding+content区域
3、案例：

第2课时
1、绝对定位的元素根据方向属性进行页面的绝对定位，即top、right、left等；其取值是根据父元素的各方向来进行
      定位。例如，top:50px，是指其绝对定位元素的top相距父元素的top50px
2、绝对定位元素相当于从文档流“删除”，此元素不存在在文档流中，它以前的位置也不复存在，让给其他元素，它只                 
      能漂浮在半空中；而相对定位元素会保留以前位置，元素只是相对于以前位置进行位置偏移。相对定位的元素不会   
      破坏文档流的布局
3、拓展阅读——援引自“博客园作者Mr.Ming2”
   元素绝对定位时，会从文档流中完全删除。然后相对于其包含块定位，其边界根据偏移属性(top、left等)放置。定位元素不会流入其他元素的内容，反之亦然。元素绝对定位时，会为其后代元素建立一个包含块
　　[注意]如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位
　　当元素绝对定位时，偏移属性表现如下:
    left:0 元素的左边界(margin-left外侧)位于包含块的左边界内侧(border-left内侧)
    top:0 元素的上边界(margin-rop外侧)位于包含块的上边界内侧(border-top内侧)
    right:0 元素的右边界(margin-right外侧)位于包含块的右边界内侧(border-right内侧)
    bottom:0 元素的下边界(margin-bottom外侧)位于包含块的下边界内侧(border-bottom内侧)
    当top、right、bottom、left四个值都为auto时(即都处于默认状态时)，
    left:auto 元素的左边界位于元素处于静态位置时的左边界
    top:auto 元素的上边界位于元素处于静态位置时的上边界
    right:auto 元素的右边界位于正好能包裹住元素的横向区域的右边界(margin-right外侧)
    bottom:auto 元素的下边界位于正好能包裹住元素的纵向区域的下边界(margin-bottom外侧)
　　注意，元素的静态位置是指元素在正常流中原本的位置，更确切的讲，顶端的静态位置是从包含块的上边界到假想框的上外边距边界之间的距离。假想框是假设元素position属性为static时元素的第一个框。如果这个假想框在包含块的上面，则这个值为负
//DEMO中，包含块的width和height都是180px，padding为10px，所以包含块的clientWidth和clientHeight都是200px
4、案例

第3课时
1、当对多个元素同时设置定位时，页面的元素之间会发生重叠的现象。
2、在css中，要想调整层叠元素的堆叠顺序，可以应用z-index层叠等级属性进行设置；z-index的默认值为0，取值越大，其元素在堆叠中越靠上（离用户约近，越不会被堆叠），*z-index取值没有单位。
3、父元素的z-index会影响子元素的层叠顺序
4、案例：

第4课时
1、固定定位属性为fixed，其是根据浏览器窗口进行的定位
2、案例：

第5课时
1、自适应布局，无论是几行几列，自适应的就是那个文档流中的没有浮动的块级元素
2、3列自适应布局，实现布局效果，可以有几种方法：
* 在body中，把文档流中不设置浮动的块级元素在书写顺序上放在最下面，然后其上的两个块级元素根据需要去浮动一左一右
* 如果不按上上面的书写顺序去设置块级元素，也可以把最后一个需要浮动的块级元素用绝对定位的方式去设置，也可以实现想要的浮动效果
* 如果不设置浮动的文档流中的块级元素在书写顺序上设置在了最上面，那么下面两个块级元素设置浮动时，是不能与这个文档流中的块级元素在一行中，只能在他下面显示，想要改变这种布局从而实现三列自适应布局的话，只能通过绝对定位进行设置
3、案例：

---

作者: 小虎同学    时间: 2017-1-6 21:55
好好看的说

---

作者: 浮世散人    时间: 2017-1-7 00:35
很不错，值得分享

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2