静态页面总结二-优快云博客

本文介绍了网页布局中的一些实用技巧，包括使用a标签显示链接元素、span标签进行纯文本展示、img标签显示图片等内容。还详细讲解了如何通过CSS来统一页面上功能相似的区块样式，以及如何处理浮动定位和盒子模型等问题。

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

1. 如果一行内需要显示多个有链接的元素，那么可以用标签a

2. 纯文本显示可以使用标签 span p

3. 图片虽然可以做为背景图片显示，但是想配合后台数据的话，有些还是需要用img标签

4. 页面上功能类似的块，文档结构最好做成一样的，css可以针对性的修改，这样有利于后台传过来的list数据的显示

5. a标签内可以放置图片，div，p，span等

6. font: 14px/32px "Microsoft YaHei"; 字体大小配合行高

7. 上下的层次关系，用position: relative, absolute, fixed. relative首选，因为不影响文档流

8. 用浮动定位时，一定记住给父元素清浮动，方法：
     1. 可以给父元素直接加height, 这种方法不灵活
     2. clear: both, 内墙法、伪元素方法最常用
     3. overflow不为 visible
     
9. 一个盒子如果给定了它的width和height，如果再给它设定margin，padding，这时就必须注意盒子的宽高，
   如果不采取措施，肯定会被撑开， 措施有：
   box-sizing: content-box，如果用这个，必须重新设定width和height
   box-sizing: border-box，这个可以不用重新设定，但是再check下宽高是否正常
   
10. 本例用到了浮动布局，这个比较好的，可以多多参考

11. 还有利用浮动实现了字围效果