通过仿淘宝静态网页我的总结

 学习了html和css,自己试着动手做了淘宝静态网页,(因为我觉得动手很重要)在动手完成的时候,脑子也同时会在思考。

问1.什么是网页布局?

网页布局是网页制作的基础; div+css布局网页

问2.需要掌握的知识点有哪些?

标准文档流盒子模型float属性position属性

布局的类型:浮动布局和定位布局

浮动模型(Float)通过设置float属性为left或right来定义为浮动;可以通过设置浮动,来让块状元素并排显示(同左、同右或一左一右等)

绝对定位(position: absolute)将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位;如果不存在这样的包含块,则相对于<html>元素,即相对于浏览器窗口移动,而不是<body>元素。

相对定位(position: relative)相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、top、right、bottom属性确定,偏移前的位置保留不动;偏移前的位置保留不动即原来的位置还保留着,后面的元素覆盖不了前面没有偏移倩的位置。

float元素的三个值:left、right、none。设置了float属性的元素脱离了标准文档流,但仍占据位置空间,会对周围的元素产生影响。当元素没有设置宽度值,而又设置了浮动,那么元素的宽度随内容的变化而变化。当元素设置浮动属性后,会对紧邻在后面的元素产生影响(如宽度等)所以要清除浮动。
清除浮动及常用方法:
clear属性 --- 为元素设置clear属性,常用clear: both;。而clear: left;和clear: right;也是可以的。

注意:
当父包含块没有设置浮动,而它内部的子元素设置了浮动,这种情况下父元素同样受到浮动的影响,子元素不再被父元素包裹了,它的高度不会扩展为子元素的最大高度。这时若要清除浮动,需要设置overflow: hidden来把浮动元素包裹起来。
相对定位
相对定位有如下特点:相对定位是相对于自身原有位置进行偏移;相对定位的元素仍处于标准文档流当中;相对定位后即可以设置偏移属性(left、top、right、bottom)以及z-index属性。relative更稳定,且不脱离文档流,可以用作设置了absolute的元素的父包含块。
绝对定位
绝对定位有如下特点:绝对定位是相对于其包含块为基准的定位;绝对定位的元素完全脱离了标准文档流;绝对定位后即可以设置偏移属性(left、top、right、bottom)以及z-index属性;如果未设置固定宽度,则绝对定位的元素随内容宽度变化而变化。
要点:relative --- 父元素相对定位;absolute --- 自适应宽度元素绝对定位;由于绝对定位脱离文档流,需要 固定宽度列的高度 > 自适应宽度的列的高度。

猜你喜欢

转载自blog.csdn.net/auroraone/article/details/79908732