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

最新推荐文章于 2025-05-03 14:30:58 发布

Auroraone

最新推荐文章于 2025-05-03 14:30:58 发布

阅读量4.6k

点赞数 3

CC 4.0 BY-SA版权

文章标签： web 布局淘宝网页前端

本文链接：https://blog.youkuaiyun.com/Auroraone/article/details/79908732

本文作者在学习HTML和CSS后尝试制作淘宝静态网页，通过实践深入理解了网页布局。讨论了网页布局的基础，强调div+css的重要性，并列举了布局所需掌握的关键知识点，包括标准文档流、盒子模型、float属性和position属性。文中提到了浮动布局和定位布局，特别是浮动模型的左右浮动实现元素并排显示，以及绝对定位和相对定位的概念及其区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习了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 --- 自适应宽度元素绝对定位；由于绝对定位脱离文档流，需要固定宽度列的高度 > 自适应宽度的列的高度。