h5前端学习|h5学习—在CSS中元素如何进行定位 h5前端学习|h5

因为上学期的多媒体技术课程通过修改一个网页来简单的学习了网页的布局，所以这篇博客来回顾一下学习的要点。
主要探讨的是HTML5中CSS元素在网页中如何定位，从而搭建出整个页面的布局结构。

浮动定位（float）
清除浮动（clear）
position定位

浮动定位（float） float定位是CSS排版中重要的手段，属性float的值很简单，可以设置为left、right或者默认值none，当设置了元素向左或向右浮动时，元素会向其父元素的左侧或右侧靠紧。
实际应用场景：当元素有规律的水平排列的时候就想到使用float定位
float属性值：
1） left：左浮动，浮动元素的左边框向父元素的左边框靠。
2）right：右浮动，浮动元素的右边框向父元素的右边框靠。
3）默认为none
（float定位在文字排版和布局排版中经常使用到，要想学好页面的布局，float属性必须用的很熟练。）

文章图片

文章图片

清除浮动（clear）问题：当一个元素一旦设置了float属性，那么会影响后面的其它元素的位置。也就是说后面的元素会受上面浮动元素的影响，如何让后面的元素不受其周围左右浮动元素所造成的影响。
功能：清除浮动元素对其造成的影响
【h5前端学习|h5学习—在CSS中元素如何进行定位】clear属性值：
1） left：清除周围左浮动元素对其造成的影响
2） right：清除周围右浮动元素对其造成的影响
3） both：清除周围左右浮动元素对其造成的影响
让父元素不受其子元素浮动的影响，在父元素上设置：overflow:hidden

文章图片

position定位 ==static（静态定位）：==默认值，属于正常的文档流。
absolute（绝对定位）
1）当一个元素设置了position属性值为absolute，那么此元素就会脱离文档流，（#会脱离父元素的管理#），会释放它在父元素中原先所占据的空间，在没有设置宽高的情况下，会根据其内容自适应宽高（类似于块级标签变成行级标签），这点和float定位的特点一样。
2）当一个元素设置了position属性值为absolute，那么此元素会彻底释放空间，后面的元素会占据其释放的空间，后面元素的文字不会环绕在其周围，这点和float定位是有区别的。
3）当一个元素设置了position属性值为absolute，且设置了定位的属性left，right，top，bottom，那么此元素不再相对父元素定位，而是相对浏览器来进行定位，那么我们把相对浏览器的定位就叫做"绝对定位"。若没有设置定位属性，那么相对于父元素定位。
4）当父元素设置了position属性值为非static（非静态的），子元素设置了position属性值为absolute，子元素又设置了定位的属性left，right，top，bottom（不设置定位属性默认定位到父元素的左上角），那么子元素是相对父元素来进行定位的，而不再是浏览器（使用的比较多）。

文章图片

==relative（相对定位）：==相对自身原先的位置来进行定位的

特点：当一个元素设置了position属性为relative，且设置了定位属性left，right，top，bottom，那么此元素没有脱离文档流（自身本质不会改变），只是相对自身元素原来的位置进行了偏移。
2）实际应用场景：当元素本质不改变的情况下，位置做微调的时候可以使用。

==重点：==在实际开发中，子元素相对父元素定位，往往父元素设置postion属性为relative，子元素设置posotion属性为absolute。
fixed（固定定位）
1）参考position属性为absolute
2）唯一的区别相对浏览器的位置是固定的，不会随滚动条滚动而滚动。
3）实际应用场景：做固定网页广告栏时使用
in the end 课堂上的的学习要点差不多也就是这样。